表单标签，表单域-CSDN博客

本文链接：https://blog.csdn.net/wusiye_123456/article/details/83793083

表单标签：表单控制（包含了具体的表单功能项，如单行文本输入框，复选框，提交按钮，重置按钮等）；提示信息（一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作）；表单域（相当于一个容器，用来容纳所有的表单控制和提示信息，如果不定义表单域，表单中的数据就无法传送到后台服务器）

（1）input控件：<input />为单标签。type为最基本的属性。

type:text(属性值) 单行文本输入框

Password 密码输入框

Radio 单选按钮

Checkbox 复选框

Button 普通按钮

Submit 提交按钮

Reset 重置按钮

Image 图像形式的提交按钮

File 文件域

Name:由用户自定义控件的名称

Value:由用户自定义 input控件中的默认文本值

Size:正整数 input控件中在页面中的显示宽度

Checked:checked 定义选择控件默认被选中的项

Maxlength:正整数控制允许输入的最多字符数

（2）lable标签：用于绑定一个表单元素，当点击lable标签的时候，被绑定的表单元素就会获得输入焦点。

for属性规定lable与哪个表单元素绑定

<lable for=“male”>male</lable>

<lable type=“radio” name=“sex” id=“male” value=“male”>

（3）textarea控件文本域：<textarea></textarea>

（4）下拉菜单：<select>

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>

......

</select>（在option中定义selected=selecteds时，当前即为默认选中项）。

（5）表单域：form被用于自定义表单域，创建一个表单，

常用属性：action(将收集的信息传递给服务器处理，action指接收并处理表单数据的服务器程序的url地址)； method(用于设置表单数据的提交方式，其取值为get或post);name(用于指定表单的名称)

类选择器：.类名{属性1:属性值1；} 注意：每个表单都有自己的表单域

表单控件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	用户名：<input type="text" value ="用户名"/><!--这是一个文本框--><br/>
	 密码：<input type="password" maxlength="6"/> <!-- 这是一个密码框 ctrl+/ maxlength密码的最大长度 --><br />
	 性别： <input type="radio" name ="sex" />  女 <input type="radio" name ="sex" />  男 <input type="radio" name ="sex" checkd ="checked" />  人妖
	 <input type="radio" name ="sex1" />  未知<!-- 单选框 如果是一组通过相同的name值来实现 sex与sex1名不一样，所以能选两个--><br />
	 爱好：<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />篮球 <input type ="checkbox" name="hobby" />排球  <!-- 复选框 可以同时选多个 checkd ="checked"为默认--><br />
	 搜索：<input type="button" value="搜索啥">  <!-- 普通按钮 --><br />
	 <input type="submit" value="提交表单"/> <!-- 提交按钮 -->
	 <input type="reset" value="重置表单"/> <!-- 重置按钮 --><br />
	 <input type="image" src="ta.jpg"/> <!-- 
	 图像按钮 --><br />
	 上传头像：<input type="file" /> <!-- 文件按钮 -->
</body>
</html>

表单域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	用户名：<input type="text" value ="用户名"/><!--这是一个文本框--><br/>
	 密码：<input type="password" maxlength="6"/> <!-- 这是一个密码框 ctrl+/ maxlength密码的最大长度 --><br />
	 性别： <input type="radio" name ="sex" />  女 <input type="radio" name ="sex" />  男 <input type="radio" name ="sex" checkd ="checked" />  人妖
	 <input type="radio" name ="sex1" />  未知<!-- 单选框 如果是一组通过相同的name值来实现 sex与sex1名不一样，所以能选两个--><br />
	 爱好：<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />篮球 <input type ="checkbox" name="hobby" />排球  <!-- 复选框 可以同时选多个 checkd ="checked"为默认--><br />
	 搜索：<input type="button" value="搜索啥">  <!-- 普通按钮 --><br />
	 <input type="submit" value="提交表单"/> <!-- 提交按钮 -->
	 <input type="reset" value="重置表单"/> <!-- 重置按钮 --><br />
	 <input type="image" src="ta.jpg"/> <!-- 
	 图像按钮 --><br />
	 上传头像：<input type="file" /> <!-- 文件按钮 -->
</body>
</html>

文本域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<form action="xxx.php" method="get" name="userMessage">
	用户名：<input type="text" value ="用户名"/><!--这是一个文本框--><br/>
	 密码：<input type="password" maxlength="6"/> <!-- 这是一个密码框 ctrl+/  注释的快捷键 maxlength密码的最大长度 --><br />
	 性别： <input type="radio" name ="sex" />  女 <input type="radio" name ="sex" />  男 <input type="radio" name ="sex" checkd ="checked" />  人妖
	 <input type="radio" name ="sex1" />  未知<!-- 单选框 如果是一组通过相同的name值来实现 sex与sex1名不一样，所以能选两个--><br />
	 爱好：<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />篮球 <input type ="checkbox" name="hobby" />排球  <!-- 复选框 可以同时选多个 checkd ="checked"为默认--><br />
	 搜索：<input type="button" value="搜索啥">  <!-- 普通按钮 --><br />
	 <input type="submit" value="提交表单"/> <!-- 提交按钮 -->
	 <input type="reset" value="重置表单"/> <!-- 重置按钮 --><br />
	 <input type="image" src="ta.jpg"/> <!-- 
	 图像按钮 --><br />
	 上传头像：<input type="file" /> <!-- 文件按钮 -->
	 </form>
	<!--
标签名称：form 表单标签
属性：action:提交的去向,目标地址的url
method:设置提交请求的方式，get和post；默认为get
get和post提交有什么区别？
get传输：将内容信息放在地址栏传输，而且长度限制在1k,而且安全性不好。
post传输：将内容房子body信息中传输。没有长度限制。
子标签：
input标签：需要提交其中的value，必须有一个name属性。
属性：type：password 等
//-
通过下面的实例的演示，发现在某些情况下可以用form去做链接，而且做链接的同时还能提交数据到
这个目标的地址文件上。
fieldset标签：定义域
legend标签：定义域的标题
-->
</body>
</html>

新增表单属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	用户名：<input type="text" placeholder="请输入用户名" autofocus />
	上传头像：<input type="file" multiple />
	<h4>自动记录完成</h4>
	1.autocomplete首先需要提交按钮<br />
	2.这个表单您必须给他名字
	<form action="">
		姓名：<input type="text" autocomplete="on" name="userName" /><br />
		<input type="submit" />
		</form>
		昵称：<input type="text" required accesskey="s"/>
		<!-- 边框里不能为空 --><br />
		
</body>
</html>

新增表单type类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<fieldset>
		<legend>HTML5新增的input type类型  那些表单</legend>
		<form action="">
			邮箱：<input type="email" />  <!-- aa@aa.com --><br />
			手机：<input type="tel" />  <!--  手机格式 数字 --><br />
			数字：<input type ="number" />  <!-- 只能是数字 --><br />
			url：<input type ="url" />  <!-- 网址格式 --><br />
			搜索：<input type ="search" />  <!-- 搜索格式 --><br />
			区域：<input type ="range" />  <!-- 区域格式  滑块 --><br />
			时间：<input type ="time" />  <!-- 时间格式  小时 分钟 --><br />
			<input type="submit" />
			年月日：<input type ="date" />  <!-- 获得年月日 --><br />
			月份：<input type ="month" />  <!-- 获得月份 --><br />
			星期：<input type ="week" />  <!-- 获得年 星期 --><br />
			颜色：<input type ="color" />  <!-- 获得颜色 --><br />
		</form>


	</fieldset>
</body>
</html>