HTML学习笔记--表单

最新推荐文章于 2024-04-11 18:06:56 发布

PRCORANGE

最新推荐文章于 2024-04-11 18:06:56 发布

阅读量184

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/PRCORANGE/article/details/107624043

版权

文本字段

在 HTML 页面创建文本域，用户可以在文本域中写入文本。
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form>
			username:<input type="text" name="username"><br>
			age:<input type="text" name="age">
		</form>
	</body>
</html>

在这里插入图片描述

密码字段

创建 HTML 的密码域。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form action="get">
			username:<input type="text" name="username"><br>
			password:<input type="password" name="password">
		</form>
	</body>
</html>

在这里插入图片描述

单选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form>
			<input type="radio" name="sex" value="male">Male<br>
			<input type="radio" name="sex" value="female">Female
		</form>
	</body>
</html>

在这里插入图片描述

复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form>
			<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
			<input type="checkbox" name="vehicle" value="Car">I have a car
		</form>
	</body>
</html>

在这里插入图片描述

提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<!DOCTYPE html>
<html>
<body>

<form name="input" action="/statics/demosource/html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

</body>
</html>

在这里插入图片描述

简单的下拉列表

在 HTML 页面中创建简单的下拉列表框，下拉列表框是一个可选列表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form>
			<select name="car">
				<option value="volvo">volvo</option>
				<option value="saab">saab</option>
				<option value="fiat">fiat</option>
				<option value="audi">audi</option>
			</select>
		</form>
	</body>
</html>

在这里插入图片描述

预选下拉列表

创建一个简单的带有预选值的下拉列表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form>
			<select name="car">
				<option value="volvo">volvo</option>
				<option value="saab">saab</option>
				<option value="fiat" selected>fiat</option>
				<option value="audi">audi</option>
			</select>
		</form>
	</body>
</html>

在这里插入图片描述

文本域

创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<textarea rows="10" cols="30">这是一个文本框
		</textarea>
	</body>
</html>

在这里插入图片描述

创建按钮

创建按钮，你可以对按钮上的文字进行自定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form>
			<input type="button" value="hello world">
		</form>
	</body>
</html>

在这里插入图片描述

带边框的表单

在数据周围绘制一个带标题的框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			我的第一个网页
		</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Personal information</legend>
				name<input type="text" size="30"><br>
				e-mail<input type="text" size="30"><br>
				birthday<input type="text" size="10">
			</fieldset>
		</form>
	</body>
</html>

在这里插入图片描述

PRCORANGE

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记--表单

文本字段在 HTML 页面创建文本域，用户可以在文本域中写入文本。注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> 我的第一个网页 </title> </head> <body> <form action="">
复制链接

扫一扫