＜form＞: 表单标签

表单是什么

• 表单用来收集信息，比如注册、登录、发送评论反馈、购买
  商品等等
• 所有HTML表单都以一个<form>元素开始

<form action="save.php" method="post">
</form>

基本控件

单行文本框

• 使用type属性值被设置为text的元素可以创建单行文本框，它是一个单标签
  <input type ="text">
• value属性表示已经填写好的值
• placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值
• disabled属性表示用户不能与元素交互，即“锁死”

<input type="text" value="123">
<input type="text" placeholder="请输入姓名">
<input type="text" disabled>

单选按钮

• 使用type属性值被设置为radio的<input>元素可以创建单选按钮
  <input type="radio">
• 互斥的单选按钮应该设置它们的name为相同值
• 单选按钮要有value属性值，向服务器提交的就是value值
• 单选按钮如果加上了checked属性，表示默认被选中

label标签

• label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮

<label>
	<input type="radio"> 男
</label>
<label>
	<input type="radio"> 女
</label>

• 在HTML4时代，label标签是通过for属性和单选按钮的id属性进行绑定的

<input type="radio" id="nan">
<label for="nan">男</label>

复选框

• 使用type属性值被设置为checkbox的元素可以创建复选框
  <input type="checkbox">
• 同组复选框应该设置它们的name为相同值
• 复选框要有value属性值，向服务器提交的就是value值

密码框

使用type属性值被设置为password的<input>元素可以创建密码框

下拉菜单

<select>标签表示下拉菜单，<option>是它内部的选项

<select>
	<option value="alipay">支付宝</option>
	<option value="wx">微信</option>
	<option value="bank">网银</option>
</select>

多行文本框

• <textarea></textarea>表示多行文本框
• rows和cols属性，用于定义多行文本框的行数和列数

三种按钮

表单中常见三种按钮，它们也都是input标签，type属性值不同

type属性值	按钮种类
button	普通按钮，可以简写为<button></button>
submit	提交按钮
reset	重置按钮

input类型总结

type属性值	控件
text	单行文本框
radio	单选按钮
checkbox	多选按钮
password	密码框
button	普通按钮
reset	重置按钮
submit	提交按钮

HTML5中新增的表单控件

type属性值	控件
color	颜色选择控件
date、time	日期、时间选择控件
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条
search	搜索框
url	网址输入控件

<datalist>控件

• <datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应

<input type="text" list="province-list">
<datalist id="province-list">
	<option value="山东">
	<option value="山西">
	<option value="广东">
	<option value="广西">
	<option value="河南">
	<option value="河北">
	<option value="湖南">
	<option value="湖北">
</datalist>