HTML之表单
表单的结构
<form name="" action="" method="">
<input>
...
<select>...</select>
<textarea>...</textarea>
</form>
（1）name：表单名称，在为表单命名之后就可以使用脚本语言对它进行控制；
（2）action：动作属性，指定处理表单信息的服务浏览器应用端。
（3）method：方法属性，用于指定表单向服务器提交数据的方法，method的值可以为get或post，默认为get。
get方式与post方式
1、get方法
使用 get 方法提交数据，浏览器将把表单中的各个值添加到 action 指定的URL（这两者之间用问号分割）并向服务器发送 get 请求，每个值之间用符号“&”链接。IE地址栏最大的URL长度是2083个长度，最大可以传递的数据长度2048个字符，所以用户不要对数据量较多的表单使用 get 方法。且 get 限制表单的数据集的值必须为ASCII字符。
2、post方法
如果采用 post 方法，浏览器将首先与 action 属性中指定的表单处理服务器建立联系，一旦建立联系之后，浏览器就会按分段传输的方法将数据发送给服务器。与 get 方法不同的是， post 支持整个ISO10646字符集。
输入
输入<input>是一个单标签，必须嵌套在表单标签中使用，用于定义一个用户的输入项。
<form>
<input name="" type="">
</form>
name属性的参数值是相应程序中的变量名。Web服务器将把这条输入信息的值赋予name属性规定的变量。type属性用于指定该输入项提供的输入方式，即指出用户输入的值的类型。在不同的输入方式下，<input>标签的格式略有不同，除了type之外的其他5种属性因type类型的不同而含义不同。
单行文本输入框
当type="text"时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。
<form>
<input name="text" type="text" maxlength="" value="">
</form>
text文本框是一个只能输入一行文字的输入框。
（1）maxlength：设置单行输入框可以输入的最大字符数；
（2）size：设置单行输入框可以显示的最大字符数，这个值总是小于等于 maxlength 属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过的内容；
（3）value：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值；
（4）如果需要创建一个随着表单提交一同传递的元素，希望用户看到，却又不允许编辑，可以添加一个readonly属性。
另外通过<label><input></label>标签可以让鼠标点击前面文字而到输入框里面。
提交按钮和重置按钮
<form><input name="submit" type="submit" value="提交"></form>
<form><input name="submit" type="reset" value="重置"></form>
其中name是可以默认的，value用于显示在按钮上的值。
<form action="process.aspx" method="get">
请输入你的姓名：<input type="text" name="yourname">
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">
</form>
密码输入框
<input type="password" name="password" maxlength="" size="">
除 type 属性以外，其他属性和文本输入框一致。
<form action="process.aspx" method="get">
请输入你的姓名：<input type="text" name="yourname"><br>
请输入你的密码：<input type="password" name="password" maxlength="12" size="8"><br>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">
</form>
复选框
<input type="checkbox" name="" value="" checked>
由于选项可以很多，属性 name 应该取不同的值。属性 value 是用于提交给服务器的数据，所以其参数值必须与选项内容相同或基本相同，也可以在逻辑上有联系。 checked 属性用于默认选择。
<form action="process.aspx" method="get">
四大名著有以下几本：<br>
<input type="checkbox" name="三国演义" value="三国演义" checked>《三国演义》<br>
<input type="checkbox" name="红楼梦" value="红楼梦">《红楼梦》<br>
<input type="checkbox" name="水浒传" value="水浒传">《水浒传》<br>
<input type="checkbox" name="老残游记" value="老残游记">《老残游记》<br>
<input type="checkbox" name="西游记" value="西游记">《西游记》<br>
</form>
单选按钮
<input type="radio" name="radio" value="" checked>
所以属性的 name 都应取相同的值；不同的选项其 value 属性的值是不同的；checked 属性为默认勾选。
<form action="process.aspx" method="get">
以下那本不是四大名著之一：<br>
<input type="radio" name="radio" value="三国演义" checked="">《三国演义》<br>
<input type="radio" name="radio" value="红楼梦">《红楼梦》<br>
<input type="radio" name="radio" value="水浒传">《水浒传》<br>
<input type="radio" name="radio" value="老残游记">《老残游记》<br>
<input type="radio" name="radio" value="西游记">《西游记》<br>
</form>
图像按钮
<input type="image" name="image" scr="URL">
文本选择输入框
<form method="post" enctype="multipart/form-data">
<input type="file" name="" size="">
</form>
把 type 属性设置成 file 就可以插入，在
标签中，我们必须把 method 属性设置成 post ，另外， enctype 属性确保文件采用正确的格式上传。<form action="process.aspx" method="post" enctype="multipart/form-data">
<p>
请选择文件<br>
<input type="file" name="uploadfile" size="40">
</p>
<div>
<input type="submit" name="Send" value="上传">
</div>
</form>
隐藏框
如果用户不想显示某些选项而又不愿意将它们从文档中删去，可能是应用程序需要的一些信息。把 type 属性设置成 hidden ，就不会在页面中显示了。
<form><input type="hidden" name="hidden" value=""></form>
多行文本输入框
<textarea></textarea>标签可以用来定义高度超过一行的文本输入框。
<textarea name="" cols="" rows="" wrap="">初始的文本内容</textarea>
（1）name指定文本框的名字；
（2）rows设置多行文本输入框的行数，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条；
（3）cols设置多行文本输入框的列数；
（4）wrap设置自动换行：
wrap="virtual"仅仅是显示上的换行，而在实际的传输过程中仍然以回车键为准；
wrap="physical"不仅仅在显示上换行，还在实际的传输过程中以此换行为标准；
wrap="off"不会自动换行，且在内容超过文本域右边界时，文本将向左滚动，必须按下回车键才会换行。
<form action="process.aspx" method="post">
<p>简介：</p>
<textarea name="简介" cols="50" rows="10" wrap="virtual">内容</textarea><br>
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</form>
下拉列表框
<form>
<select name="" size="">
<option></option>
......
<option></option>
</select>
</form>
（1）<select>是一个成对标签，它其中用<option>标签来定义各个选项内容。
name设定下拉列表名字；
size可选项，设置在列表中选项的数目。如果实际数量大于size属性的数值， 浏览器会为该下拉列表框添加滚动条，且size默认为1；
multiple是否允许用户多选。
（2）option是双标签，用来定义下拉列表框中的众多选项。
value发送给服务器的信息
selected是否默认选择
<form>
<p>你最喜欢的运动：</p>
<select name="sport">
<option value="足球">足球</option>
<option value="篮球">篮球</option>
<option value="高尔夫">高尔夫</option>
</select>
</form>
新增输入元素
email类型
用于包含e-mail地址的输入域，在提交表单时会自动验证email域的值，不用使用带有正则表达式的脚本来验证输入域的值。根据浏览器的不同，email格式错误将会弹出不同的提示信息。
<input type='email' name='userEmail'/>url类型
要求用户必须输入scheme://host.domain:post/path/filename的url地址，否则会报错。
<input type='url' name='userUrl'>number类型
| 属性 | 值 | 描述 |
|---|---|---|
max |
number |
指定数值最大值 |
min |
number |
指定数值最小值 |
step |
number |
指定步长（数值间隔），默认步长为1 |
value |
number |
指定默认值 |
<input type='number' min='' max='' step='' name='userNumber'/> |
range类型
range类型用于确定包含一定范围内数字值的输入域，和number类型一致，并且属性相同。
<input type='range' min='' max='' step='' name='userRange'/>color类型
color类型用于弹出颜色选择器
<input type='color' name='userColor'>Date Picker类型
用于弹出日期选择器
<input type='data' name='userDate'>
支持以下的输入类型：date:选取日、月、年month:选取月、年week:选取周和年time:选取时间（小时和分钟）datetime:选取时间、日、月、年（UTC时间）datetime-local:选取时间、日、月、年（本地时间）
search类型
search类型用于搜索域，例如站点搜索或
新增其他元素
datalist类型
该元素功能是辅助表单文本框的内容输入，用于生成隐藏的可选下拉菜单，相当于一个select元素。datalist下拉菜单包含的选项使用option标签产生。显示文本是<option>的label属性值，而应该显示文本的实际参数值为value属性值。另外，datalist元素需要与某文本框结合使用，其结合方式是通过将文本框的list属性值设置为datalist的id值，这样就完成两者的绑定：
<!DOCTYPE html>
<html>
<head>
<title>实例</title>
</head>
<body>
<input type="text" list="datalist" name="cname"/>
<datalist id="datalist">
<option label="北京" value="北京">北京</option>
<option label="南京" value="南京">南京</option>
<option label="成都" value="成都">成都</option>
</datalist>
</body>
</html>
| 属性 | 描述 |
|---|---|
autocomplete |
表单或文本框的自动完成功能 |
autofocus |
页面加载时自动获得焦点 |
form |
所属表单id |
formaction |
重写表单action属性 |
formentype |
重写表单entype属性 |
formmethod |
重写表单method属性 |
formnovalidate |
重写表单novalidate属性 |
formtarget |
重写表单target属性 |
list |
新增表单元素datalist的属性，规定了下拉菜单列表 |
min,max,step |
部分新增imput类型元素的属性，最大、最小以及步长 |
multiple |
规定输入域可选择多个 |
pattern |
验证输入域的模式（正则表达式） |
placeholder |
输入域的提示文本，描述了当前输入域所期待的值 |
required |
输入域必填项，不能为空 |
