标签：
2015/11/27 16:44:07
从三方面来介绍html5表单的新特性
要提交数据的控件可以布局在form标签之外，看下面的代码，表单元素可以写到form元素之外，只需在元素中加入form="form1"属性，也可提交到form元素指定的服务器地址
<body>
<form action="upload.php" method="post" accept-charset="utf-8" id="form1">
</form>
<input type="text" name="username" value="" form="form1">
<input type="submit" name="sub" value="提交" form="form1">
</body>
我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用
案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果
<form action="upload.php" method="post" accept-charset="utf-8" id="form1">
<br> 主页:
<input type="url" name="url" value="" placeholder="个人主页" required>
<br> 邮箱:
<input type="email" name="email" value="" placeholder="邮箱" required>
<br> 生日:
<input type="date" name="date" value="" required>
<br> 时间:
<input type="time" name="time" value="" required>
<br> 星期:
<input type="week" name="week" value="" required>
<br> 年龄:
<input type="number" name="age" value="">
<br> 薪水:
<input type="range" name="range" value="">
<br> 电话:
<input type="tel" name="tell" value="" placeholder="都不支持">
<br> 颜色:
<input type="color" name="mycolor">
<br>
<input type="search" name="key" value="" results="s"><br>
<input type="submit" name="sub" value="提交" form="form1">
</form>
chrome：
firefox：
Opera：
Microsoft Edge：
好，我们对微软的进步进行表扬！
除了新增的表单元素之外，html5中还新增了一些表单属性
autocomplete
novalidate
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
在下面的案例中，我们对一些常用的属性做了解释，大家直接看代码和代码旁边的注释，然后对照浏览器的运行结果就理解其意义了
<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">
<br>
<!--
novalidate:在控件中加入了required、emial、url等验证后，如果想让这些验证失效，可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时，经常会看到在下面显示输入过的内容，
这就是html5的新特性：自动完成，如果不想使用此功能，将其设置为off即可
-->
<input type="text" name="UserName" value="" required autocomplete="off">
<br>
<!--
multiple:在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传
-->
选择文件
<input type="file" name="upload" value="" multiple="multiple">
<br>
<!--
list：这个属性要和datalist元素一起使用，指定此文本框的可选择项，另外其相较于select的优点在于还可以输入
-->
区号：
<input type="text" name="age" value="" list="list1">
<br>
<datalist id="list1">
<option value="0312">保定</option>
<option value="0311">石家庄</option>
<option value="010">北京</option>
<option value="0313">唐山</option>
</datalist>
<!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
-->
<input type="submit" name="subsave" value="提交">
<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>标签：
原文地址：http://www.cnblogs.com/wenriyao/p/5001396.html
