表单是页面上很重要的一块内容,用户可以输入的大部分内容都是在表单中的元素中进行的,它与后台的交互在大多数情况下也是通过点击表单中的按钮来完成的
HTML5中新增的与表单元素相关的两个API--------文件API和拖放API
新增的属性:
1.form属性
在HTML4中,表单内的从属元素必须写在表单内部,但是在HTML5中,可以把它写在页面上的任何部分,然后给元素一个form属性,属性值为该表单的id,这样就可以
声明该元素从属于指定表单了
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
input被写在内部,用不着再对他指定form属性,textarea属性被写在form表单之外,但是他属于form表单,所以将form表单的id指定给textarea元素的form属性;这样做
的好处是当需要给页面中的元素添加样式时可以更方便的添加,因为它们不是被分散在各表单之内的
2.formmaction属性
HTML4中,一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面,但是在HTML5中可以给所有的提交按钮都增加不同的formaction属性,这样在点
击不同的按钮的时候可以将表单提交到不同的页面
3.formmethod属性
HTML4中,一个表单内只有一个action属性来对表单内的所有元素统一指定提交页面,所以每个表单内只有一个method属性来统一指定提交方法。
HTML5中,可以使用formaction属性来对每个表单分别指定不同的提交页面,也可以使用formmethod属性来对每个表单元素分别制定不同的提
交方法
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="s1" formaction="s1.jsp" formmethod="post">提交到s1
<input type="submit" name="s2" value="s2" formaction="s2.jsp" formmethod="get">提交到s2
<input type="submit">
</form>
4.placeholder属性
placeholder是指文本框处于为输入状态的时候显示的输入提示,当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字
<input type="text" placeholder="input me">
5.autofocus属性:一个页面上只能有一个控件具有该属性
给文本框,选择框或者按钮控件加上该属性后,当画面打开的时候,该控件自动获得光标焦点,建议只有当一个页面是以使用某个控件为主要目的时才对该控件使用
autofocus属性
6.list属性:
在HTML5中,为单行文本框增加了一个List属性,该属性的值为某个datalist元素的id,datalist类似于选择框select,但是当用户想要设定的值不在选择列表之内的时候,
允许自行输入,该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>list属性示例</title>
</head>
text:<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none;">
<!--使用style="display:none;将datalist元素设定为不显示"-->
<option value="good morning">good morning</option>
<option value="hello">hello</option>
<option value="good afternoon">afternoon</option>
</datalist>
点击打开链接
7.autocomplete属性:
帮助输入所用的自动完成功能,可以节省时间,还可以提高安全性
可以设定的值有三种:on,off,不设定;不设定的时候,使用浏览器的默认值;设定为on的时候,可以显式指定候补输入的数据列表,使用detalist元素和list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示
<input type="text" name="greeting" autocomplete="on" list="greetings">