HTML表单

一、<form></form>标签及其常用属性

1.什么是form标签

form标签用于在网页中声明一个表单域，收集用户输入数据并提交到服务器。通常由<input/>，<textarea></textarea>,<select></select>三种标签组成，这三种标签不包含在form标签中也能显示出来，但是只有包含在form标签中才有意义（才能提交数据），其中使用最多的是input标签。

2.form标签的常用属性

1.action------规定向何处提交表单的地址（URL）（提交页面）。

2.method------规定在提交表单时所用的 HTTP 方法（默认：GET）。

取值：get,set      get方式提交数据会将提交的数据键值对在URL地址栏中显示出来，因此对于一些重要或者敏感信息不要使用get方式提交。

3.target------ 属性规定提交表单后在何处显示响应。

_blank:  响应显示在新窗口或选项卡中。

_self：响应显示在当前窗口中

4.name:规定表单名称

5.autocomplete：规定表单是否应打开自动完成（填写）功能。

取值：on(默认) , off

二、input标签

input是最常用的表单标签

1.input标签的常用属性

1.type------根据不同的取值对应不同的input类型

text : 文本输入框，name属性对应文本输入框的名称，value属性对应文本输入框中的内容

password ：密码输入框，输入的数字会被隐藏，name属性对应密码输入框的名称，value属性对应密码输入框中的内容

email: 定义邮箱输入框，会检查输入的内容是否符合邮箱格式（点击提交按钮后）。

radio： 定义单选按钮，多个input标签的type属性取radio值时，必须给这些input赋值相同的name才能达到单选的要求。

checkbox： 定义多选按钮。

button :定义可点击按钮（多用来触发js脚本）

file :定义文件上传按钮

submit： 定义提交表单按钮

reset： 定义重置数据按钮。

color：定义颜色选择器

date：定义日期的输入字段

datetime：允许用户选择日期和时间（有时区）

datetime-local：允许用户选择日期和时间（无时区）。

month: 许用户选择月份和年份。

number:用于应该包含数字值的输入字段。

range:显示为滑块控件。

search：用于搜索字段（搜索字段的表现类似常规文本字段）。

time：允许用户选择时间（无时区）。

url：用于应该包含 URL 地址的输入字段。

week:允许用户选择周和年。

2. readonly : 属性规定输入字段为只读（不能修改）它等同于 readonly="readonly"。

3.value 属性规定输入字段的初始值

4.disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。它等同于disabled="disabled"。

5.size :属性规定输入字段的尺寸（以字符计）：

6.maxlength 属性规定输入字段允许的最大长度：

7.autofocus :如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。写了autofocus就代表设置了该属性

8.height/width:  height 和 width 属性仅用于 <input type="image">。

9.min/max:     min 和 max 属性规定 <input> 元素的最小值和最大值。min 和 max 属性适用于输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

10.multiple:   <input/ type="file">设置了该属性后，运行上传多个文件

11.placeholder ： 用于对输入字段的提示信息，属性适用于以下输入类型：text、search、url、tel、email 以及 password。

12.required ： 设置了该属性的表单元素必须填写（非空），在提交按钮点击后检查。适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、 file.

三、select标签

select标签定义下拉菜单

select标签中通过<option></option>标签定义每一个选项内容，option中可以加上selected属性表示默认选中该选项，select中t可以加上multiple属性multiple="multiple",让下拉选项直接展开。

四、 textarea标签

cols属性 --------- 以字符个数设定的多行文本框的宽度

rows 属性-------- 以字符个数设定的多行文本框的高度

<form action="" method="post" >
		<div align="center">
			<h3>用户注册</h3>
			<p>用户名：<input type="text"></p>
			<p>密 码：<input type="password" autofocus required></p>
			<p>请选择你的性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女</p>
			<p>请选择你的爱好：<input type="checkbox">足球 <input type="checkbox">篮球 <input type="checkbox">LOL <input type="checkbox">韩剧 <input type="checkbox">王者荣耀</p>
			<p>邮箱：<input type="email" placeholder="请输入你的邮箱"></p>
			<p>用户头像：<input type="file"></p>
			<p>你的家庭住址：<select name="" id="">
				<option value="">重庆</option>
				<option value="" selected="selected">西安</option>
			</select></p>
			<p>你的收货地址是：<select name="" id="" multiple="multiple">
				<option value="">重庆</option>
				<option value="">北京</option>
			</select></p>
			<p>请留下你的建议或意见：<textarea name="" id="" cols="30" rows="10" placeholder="请留下你的建议或意见："></textarea></p>
			<p>请选择你喜欢的颜色：<input type="color"> 注册的时间：<input type="date"></p> 
			<p><input type="submit"> <input type="reset"></p>
		</div>	
	</form>

运行结果：