首页 > 代码库 > html5中表单新增元素与属性

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表单还有部分新增的属性在这里没有介绍,主要是因为这些属性还不能在大部分浏览器上使用或者流行,如果有兴趣可以自己了解。

 

 

html5中表单新增元素与属性