html5中表单新增元素与属性

form

很多初学者对与form不是很理解，其实从html的MDN中可以看出，form是用在前后台的交互上的，比如我需要把表单的内容（input里的内容提交到后台），这是就需要input包裹在form里面。

1 <form action="xxx.php" method="post">
2     <input type="text" name="ID">
3     <input type="submit" name="submit">
4 </form>

form属性中action就是表单要提交到的地方，method是提交的方法（有get和post两种）。

特别介绍的属性：

1.formaction：就是form和action的结合。上面的代码可以看到action是表单提交到的服务器（后台），但是在html5之前，一个form表单内部只能提交到同一个服务器，而formaction可以设置input元素提交到不同的服务器，就象这样：

<form  method="post">

    <input type="submit" name="submit" formaction="1.php">
    <input type="submit" name="submit" formaction="2.jsp">
    <input type="submit" name="submit" formaction="3.asp">
</form>

而类似的formenctype，formmethod和formtarget都是可以针对不同的表单内部的元素进行的操作。而具体的enctype，method和target参见网上的教程。

2.placeholder：就是为文本框设定一个简短的提示信息。

1 <input type="text" name="submit" placeholder="请输入你的学号">

3.list：为文本框添加一个下来菜单选项（包含预定义的选项）。

1 <form  >
2     <input list="datalist1">
3     <datalist id="datalist1">
4     <option value="1"></option>
5     <option value="2"></option>
6     <option value="3"></option>
7     <option value="4"></option>
8     </datalist>
9 </form>

4.pattern：用于验证正则表达式。

后记：关于form表单还有部分新增的属性在这里没有介绍，主要是因为这些属性还不能在大部分浏览器上使用或者流行，如果有兴趣可以自己了解。