form属性
在
HTML4
中,表单内的从属元素必须书写在表单内部,而在HTML5
中,可以把他们书写在页面上任何地方,然后为该元素指定一个form
属性,属性值为该表单的id
,这样就可以声明该元素从属于指定表单了。
用法:
<form id="isForm">
<input type="text">
</form>
<textarea form="isForm" cols="30" rows="10"></textarea>
formaction属性
在
HTML4
中,一个表单内的所有元素只能通过表单的action
属性被统一
提交到另-个页面,而在HTML5
中可以为所有的提交按钮,增加不同的formaction
属性,使单击不同的按钮时可以将表单提交到不同
的页面。
用法:
<form>
<input type="submit" name="s1" value="v1" formaction="xx.php">
<input type="submit" name="s2" value="v2" formaction="yy.php">
<input type="submit" name="s3" value="v3" formaction="zz.php">
</form>
formmethod属性
在
HTML4
中,一个表单内只能有一个action
属性用来对表单内所有元素统一指定提交页面,所以每个表单内页只有一个method
属性来统一指定提交方法。在HTML5
中,可以使用formmethod
属性来对每一个表单元素分别指定不同的提交方法
。
用法:
<form>
<input type="submit" name="s1" value="v1" formaction="xx.php" formmethod="post">
<input type="submit" name="s2" value="v2" formaction="yy.php" formmethod="get">
</form>
formenctype属性
在
HTML4
中,表单元素具有一个enctype
属性,该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5
中,可以使用formenctype
属性对表单元素分别指定不同的编码方式。
用法
<form>
<!--第一种:空格变为加号,但是并不对特殊字符进行编码-->
<input type="text" formenctype="text/plain">
<!--第二种:不对字符进行编码-->
<input type="text" formenctype="multipart/form-data">
<!--第三种-->
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
formtarget属性
在
HTML4
中,表单元素具有一个target
属性,该属性用于指定在何处打开表单提交后所需要加载的页面。
在
HTML5
中,可以对多个提交按钮分别使用formtarget
属性来指定提交后在何处打开所需加载的页面。
用法:
<form>
<!--第一种:在新的标签页面中打开-->
<input type="submit" name="s1" value="v1" formaction="xx.php" formtarget="_blank">
<!--第二种:在当前框架中打开-->
<input type="submit" name="s2" value="v2" formaction="yy.php" formtarget="_self">
<!--第三种:在当前页面中打开-->
<input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="_top">
<!--第四种:在当前框架的父框架中打开-->
<input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="_parent">
<!--第五种:在指定的框架中进行打开-->
<input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="framename">
</form>
autofocus属性
为文本框、选择框或按钮控件加上
autofocus
属性,当画面打开时,该控件自动获得光标焦点。
用法:
<form>
<input type="text">
<input type="text" autofocus>
</form>
required属性
HTML5
中新增的required
属性可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字
用法:
<input type="text" required>
Iabels属性
在
HTML5
中,为所有可使用标签的表单元素、button
、select
元素等,定义一个Iabels
属性,属性值为一个NodeList
对象,代表该元素所绑定的标签元素所构成的集合。
用法:
<script>
function Validate() {
// body...
var txtName = document.getElementById('txt_name');
var button = document.getElementById('btnValidate');
var form = document.getElementById('testForm');
if(txtName.value.trim() == ""){
var label = document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML = "请输入姓名";
txtName.labels[1].setAttribute("style","font-size:9px;color:red;")
}
}
</script>
<form id="testForm">
<label id="test" for="txt_name"></label>
<input type="text" id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
效果:
标签的control属性
在
HTML5
中,可以再标签内部放置一个表单元素,并且通过该标签的control
属性来访问该表单元素
用法:
<script>
function setValue() {
var label = document.getElementById("label");
var textbox = label.control;
textbox.value = "010010";
}
</script>
<form>
<label id="label">
邮编:
<input type="text" id="txt_zip" maxlength="6">
<small>请输入六位数字</small>
</label>
<input type="button" value="设定默认值" onclick="setValue()">
</form>
效果:
文本框的placeholder属性
placeholder
是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
用法:
<input type="text" placeholder="请输入用户名">
效果:
文本框的list属性
在
HTML5
中,为单行文本框增加了一个list
属性,该属性的值为某个datalist
元素的id。datalist
元素也是HTML5
中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入。datalist
元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
用法:
<form>
<input type="text" name="greeting" list="greetings">
<!--datalist在默认状态之下是none的,但是为了兼容各浏览器,独立设置其display属性为none-->
<datalist id="greetings" style="display: none">
<option value="HTML5学习">HTML5学习</option>
<option value="CSS3学习">CSS3学习</option>
<option value="JavaScript学习">JavaScript学习</option>
</datalist>
</form>
效果: