html5中表单新增元素与属性

form

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

<form action="xxx.php" method="post">
    <input type="text" name="ID">
    <input type="submit" name="submit">
</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：就是为文本框设定一个简短的提示信息。

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

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

<form  >
    <input list="datalist1">
    <datalist id="datalist1">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
    </datalist>
</form>

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

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