精通
英语
和
开源
,
擅长
开发
与
培训
,
胸怀四海
第一信赖
HTML5中新增一个form属性,是一个与处理表单相关的元素。 在HTML4或XHTML中,我们要提交一个表单,必须把相关控件元素都放在form元素下,因为在表单提交的时候,会直接忽略不是其子元素的控件。但是实际情况下,由于页面设计与实现的特殊性,会存在有些表单之外的元素一并提交的情况。HTML5中的form属性可以让HTML控件元素独立在表单之外,然后表单在提交的时候不仅可以提交表单内的控件元素,这个独立的控件元素也可以一并提交出去,本章讲解涉及<form> 和<input>元素的新属性。
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
注释:在某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
注释:如需引用一个以上的表单,请使用空格分隔的列表。
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
注释:这些属性对于创建不同的提交按钮很有帮助。
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
form可以理解为一个框,然后把所有的input放在里面,form的属性action表示你要处理表单内容的那个后端页面,一般是php或asp的;method属性,表示发送请求的方法,包括get和post两种,post加密,无字节限制。由于实际开发中一个页面的input内容不可能全是连着放一块的,中间可能插入其他内容,所以,html5中form有新的元素,设置一个ID,然后其他的input元素中设置form属性,值等于ID,这样一个页面中不需要有多个form标签了,然后通过相同的ID就可以把所有的input标签放到form元素内了