HTML5表单--转自网上
表单是与用户交互的页面，HTML5将用于处理用户计算机中表单的代码库标准化，提供了新的属性、元素和完整的API。
1.表单元素：
表单没有太大的改动，其结构仍然保持不变，但HTML5增加了新的元素、输入类型和属性，可以根据需要进行扩展。
1）<form>元素：
创建一个基本的表单模板：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms </title>
</head>
<body>
<section id="form">
<form name="myform" id="myform" method="get">
<input type="text" name="name" id="name">
<input type="submit" value="Send">
</form>
</section>
</body>
<html>
<form>元素除一些常见属性，也有一些扩展属性。
·autocomplete：可以添加on和off两个值，默认是on。如果设为off，表单所包含的<input>元素就不会显示作为可选值的文字。<form>和其他独立的<input>元素都支持这个属性。
·novalidate：HTML5内置了验证功能，如果不想使用这个行为，可以使用属性novalidate。
2)<input>元素：
表单中最重要的元素是<input>，使用type属性可以改变元素性质。HTML5扩大了选择范围，还规定了浏览器对所接收信息的处理方式，从而增强了元素的功能。Type属性与其他属性一起，可以帮助浏览器实时限制和控制用户输入。
⑴电子邮件类型：
几乎每个表单都会使用输入域接收电子邮件地址，但目前唯一支持这种数据的输入类型是text。Text表示一般文字，而非特殊字符，所以必须使用JavaScript控制输入数据，确认所插入内容是一个有效的电子邮件地址。
现在有了email类型，浏览器会检查输入域中插入的文字，验证其是否为合法的电子邮件地址。如果验证失败，表单就不会发送。示例：
<input type="email" name="myemail" id="myemail">
各种浏览器有不同的无效输入响应方式。例如，在表示错误信息时，一些浏览器会在<input>元素周围显示红色框，另一些浏览器则显示蓝色框。也可以定制错误响应方式。
⑵搜索类型：
Search类型不能控制输入，作用是指示浏览器。示例：
<input type="search" name="mysearch" id="mysearch">
有一些浏览器会修改元素的默认设计，向用户提示域的用途。
⑶URL类型：
这种类型的作用与email完全相同，但主要针对网址。只接受绝对URL，如果输入无效URL会显示错误信息。示例：
<input type="url" name="myurl" id="myurl">
⑷电话号码类型：
这种类型主要针对电话号码。Tel类型没有规定特殊的语法，作用是指示浏览器，该应用程序需要根据不同的设备进行调整。示例：
<input type="tel" name="myphone" id="myphone">
⑸数字类型：
Number类型只能接受数字值。这个域还可以使用其他一些新属性：
·min：这个属性决定了域所能接受的最小值
·max：这个属性决定了域所能接受的最大值
·step：这个属性值决定了域所能接受值递增或递减的步长。例如，如果步长设置为5，最小值为0，最大值为10，那么浏览器就不允许输入0~5和5~10之间的值。示例：
<input type="number" name="mynumber" id="mynumber" min="0" man="10" step="5">
不一定要同时设置min和max，step的默认值是1。
⑹范围类型：
这是一种新增域类型。这种新控件允许用户选择一个范围的数值，通常会显示为滑块或箭头，用于增大或缩小数值，但目前还没有标准设计。
Range类型使用属性min和max，设置范围的下限值和上限值，此外还可以设置属性step，声明设置该值递增或递减的步长。示例：
<input type="range" name="mynumbers" id="mynumbers" min="0" max="0" step="5">
使用旧的value属性，可以设置元素的初始值；使用JavaScript可以在屏幕上显示数值。
⑺日期类型：
这是一种新控件，用来创建一个日期输入域。浏览器使用日历实现这个功能，用户可以单击域选择时间。用户可以选择日历中的一天，浏览器会将它与其他日期一同插入输入框中。示例：
<input type="date" name="mydate" id="mydate">
标准并没有规定它的页面设计，每一种浏览器都有不同的界面，并且有时候会根据应用程序所运行的设备不同而调整设计。通常，这个控件值的格式是：year-month-day。
⑻周类型：
这种类型提供一种与date类类似的界面，但是只能选择周。通常，这个控件值的格式是：2016-W50，其中2016是年份，50是周数。示例：
<input type="week" name="myweek" id="myweek">
⑼月份类型：
这种类型与周类型类似，但是只能选择一个月份。通常，这个控件值的语法是：year-month。示例：
<input type="month" name="mymonth" id="mymonth">
⑽时间类型：
Time类型与date类型，但是只能选择时间。它的格式包括小时和分钟，但其具体行为取决于不同浏览器的实现。通常，它的值的格式为：hour:minutes:seconds，但也可以是：hour:minutes。示例：
<input type="time" name="mytime" id="mytime">
⑾日期与时间类型：
Datetime类型支持输入完整的日期和时间，其中还包括时区。示例：
<input type="datetime" name="mydatetime" id="mydatetime">
⑿本地日期与时间类型：
datetime-local类型是一种不带时区的datetime类型。示例：
<input type="datetime-local" name="mylocaldatetime" id="mylocaldatetime">
⒀颜色类型：
Color类型具有预定义的颜色拾取界面。通常，这个域的预期值是十六进制数，如#00FF00。示例：
<input type="color" name="mycolor" id="mycolor">
HTML5没有规定标准的color界面，但是浏览器都会使用一组包含基本颜色的网格界面。
2.新属性：
有一些输入类型要求使用特定的属性才能够达到显示效果，也有一些输入类型需要使用一些属性来改进其性能。
1)Placeholder属性：
Placeholder属性通常用于文本框输入类型，也可以用在search等，表示一个简短提示、单词或词汇，可用于帮助用户输入正确的内容。示例：
<input type="search" name="mysearch" id="mysearch" placeholder="type your search">
这个属性可以显示一些提示内容，当该输入文本框获取焦点时提示信息就会消失。
2)Multiple属性：
Multiple属性也必须设置布尔值，可以用在一些输入类型中，如email或file，从而支持在同一域中输入多个值。所插入的值必须用逗号分隔。示例：
<input type="email" name="myemail" id="myemail" multiple>
3)autofocus属性：
autofocus属性会使网页加载后强制聚焦到所选元素上，每个页面只允许出现一个autofocus属性的input元素。但会考虑目前的状况，如果用户已经在网页上聚焦到某个元素，那么不会改变聚焦状态。示例：
<input type="search" name="mysearch" id="mysearch" autofocus>
以前，开发人员通常使用JavaScript的focus()方法来实现这个特性。
4)autocomplete属性：
可用于form元素和输入型的input元素，用于表单自动完成。autocomplete属性会把输入的历史记录下来，当再次输入时，会把输入的历史记录显示在一个下拉列表中，以实现自动完成输入。示例：
<input type="search" name="key" id="key" autocomplete="on" />
autocomplete属性有"on"、"off"和""等3个值。使用""时，使用浏览器的默认值。
5)form属性：
可用于在<form>标记之外声明表单元素。示例：
<nav>
<input type="search" name="mysearch" id="mysearch" form="myform">
</nav>
以前，必须使用标记<form>才能创建表单，然后在标记之间声明各个表单元素。HTML5支持在文档的任意位置插入元素，然后使用form属性通过名称引用表单。
6)formaction属性：
表单可以通过action属性把内容提交到另外一个页面。HTML5中，为不同的提交按钮添加formaction属性，该属性可以覆盖action属性，将表单提交至不同页面。示例：
<form id="form1" method="post">
<input name="name" type="text" form="form1" />
<input type="submit" value="提交到Page1" formaction="?page=1" />
<input type="submit" value="提交到Page2" formaction="?page=2" />
<input type="submit" value="提交到Page3" formaction="?page=3" />
<input type="submit" value="提交" />
</form>
7)formmethod、formentype、formnovalidate、formtarget属性：
使用方法与formaction一致，设置在提交按钮上，可以覆盖表单的相应属性。formmethod覆盖method属性，formentype覆盖entype属性，formnovalidate覆盖novalidate，formtarget覆盖target。
8)list属性：
与datalist元素配合使用，可以为某个可输入的input元素定义一个选值列表。见datalist。
3.新的表单元素：
1)<datalist>元素：
datalist元素使用list属性，可以为某个可输入的input元素定义一个选值列表。使用datalist元素构建选值列表，设置input元素的list属性为datalist元素的id值，实现二者的绑定。示例：
<input name="email" type="email" list="emaillist" />
<datalist id="emaillist">
<option value="test1@test.com">test1@test.com</option>
<option value="test1@test.com">test1@test.com</option>
</datalist>
目前只有Opera和Firefox Beta实现了<datalist>元素。
2)<progress>元素：
这是一个表单特有的元素，表示一个任务完成的进度。通常这些任务都在表单中启动和处理，因此可以添加到表单元素组中。
<progress>元素使用两个属性设置其状态和限制，value属性表示任务执行的进度，max声明任务完成后达到的值。
3)<meter>元素：
<meter>元素可用于显示刻度，而非进度，可用于表示一个已知范围，例如带宽使用。
<meter>元素有一些相关属性，min和max可用于设置范围边界，value可用于确定测量的值，而low、high和optimum可用于将范围划分为不同的部分和设置最佳位置。
4)<output>元素：
用于不同类型的输出，如用于计算结果或脚本的输出等，必须从属于某个表单，即写在表单内部，通常用于显示表单处理的结果值。示例：
<form name="myform" id="myform" oninput="x.value=volume.value">
<input type="range" name="volume" value="50" />
<output name="x"></output>
</form>
由于range类型的input元素表现为一个滑块，不显示数值，因此使用output元素协助显示其值。使用for属性可以将<output>与参与计算的源元素相关联。但这个元素通常是在JavaScript代码中引用和修改。
5）Keygen元素：
提供一种安全的方式验证用户。该元素有密钥生成的功能，当提交表单时，会分别生成一个私人密钥和一个公共密钥，其中私人密钥保存在客户端，公共密钥则通过网络传输至服务器。这种非对称加密方式，为网页的数据安全提供了更大的保障。示例：
<form name="myform" id="myform" action="">
<input type="text" name="name" /><br />
Encryption:
<keygen name="security" /><br />
<input type="submit" />
</form>
Keygen元素提供了中级和高级的加密算法，显示的是一个类似select元素的下拉框，可以选择加密等级。
