详解HTML5表单新增属性
我要评论1. 表单内元素的form属性
在H5中可以把form放到页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于指定表单了
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
2. 表单内元素的formaction属性
在H4中，表单的提交方式
<form action="1.jsp"> </form>
提交整个表单
在H5中，可以为表单的每一个属性添加提交到的jsp页面
<form action="1.jsp">
<input type="submit" action="1-1.jsp">提交到1页面</form>
<input type="submit" action="1-2.jsp">提交到2页面</form>
<input type="submit" action="1-3.jsp">提交到3页面</form>
</form>
3. 表单内元素的formmethod属性
可以对表单的每一个元素指定提交方法
<form action="1.jsp">
<input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>
<input type="submit" action="1-2.jsp" formmethod="get">提交到2页面，get提交方法</form>
</form>
4. 表单内元素的formenctype属性
同上，作用与每一个元素，代码略
5. 表单的formtarget属性
同上，作用与每一个元素，代码略
6.元素的autofocus属性
为文本框、选择框和按钮控件等加上autofocus属性，画面打开时，将自动获得焦点。
<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>
一个页面上只能有一个控件具有autofocus属性，不能滥用
7. required属性
可以用在大多数输入用的元素，若输入的值为空则不允许提交，游览器显示文字信息提示用户必须输入内容。
8. labels属性
可为表单所有元素添加一个lables属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
<script type="text/javascript">
window.onload = function () {
var text = document.getElementById('text');
var btn = document.getElementById('btn');
var form = document.getElementById('form');
btn.onclick = function() {
if (text.value.trim() =="") {
//alert(text.labels.length)
if(text.labels.length==1) {
var label = document.createElement("label");
label.setAttribute("for","text");
form.insertBefore(label,btn);
text.labels[1].innerHTML = "请输入姓名";
text.labels[1].setAttribute(
"style","font-size:9px;color:red");
}
}
else if(text.labels.length>1)
form.removeChild(text.labels[1]);
}
}
</script>
<form id="form">
<label id="label" for="text">姓名：</label>
<input id="text">
<input id="btn" type="button" value="验证">
</form>
当用户不输入任何值时，单击验证，文本框旁边会动态的添加一个标签元素，标签元素为“请输入姓名”；当用户在文本框中有输入时，文字为“请输入姓名”的标签将被删除。
9. 标签的control属性
可以在标签（label）内部放置一个表单元素，并通过该标签的control属性来访问该表单元素。
<script type="text/javascript">
function setValue() {
console.log(1);
var label =document.getElementById("label");
var textbox = label.control;
textbox.value = "231456"
}
</script>
<form>
<label id="label">
邮编：
<input id="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>
在游览器中打开页面，单击“设置默认值”按键，文本框中会显示231456.
10. 文本框的placeholder属性
当文本框（text或者textarea）处于为选择状态时输入提示信息(灰色)
<input type="text" palceholder="hahah">
11. 文本框的list属性
结合h5新增的datalist元素，制作提示框
text:<input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none";将datalist元素设置为不显示 -->
<datalist id="greetings" style="display:none">
<option value="你是人">你是人</option>
<option value="你是猪">你是猪</option>
<option value="你是狗">你是狗</option>
</datalist>
当你在文本框中输入“你”时，下面会出现三栏提示“你是人”、“你是猪”、“你是狗”，没有关键字将不出现提示
12. 文本框的autocomplete属性
autocomplete有三种值"on"、"off"、""（不指定）。不进行指定时，使用游览器的默认值。使用方法如下
<input type="text" name="greeting" list="greetings" autocomplete="on">
当你在文本框内输入如“我是人”点击提交后，返回前一页，再在文本框中输入“我”，就会出线提示“我是人”。
13. 文本框的pattern属性
相当于直接在html部分用正则表达式判断值输入是否符合要求。
请输入内容：<input type="text" pattern="[0-9][A-Z]{3}">
此段代码要求输入一个数字三个大写字母，如果输入不正确，则出现“请与所要求的内容保持一致（谷歌）”的提示。
14. 文本框的selectionDirection属性
针对input的text和textarea元素，当用户在这两个元素中用鼠标选取部分文字时，可以使用该元素来获取选择方向。
<script type="text/javascript">
function alertSelectionDirection() {
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="text" name="text">
<input type="button" value="惦记我" onclick="alertSelectionDirection()" >
</form>
15. 复选框的indeterminate属性
对于复选框来说，过去只有选取和与非选取状态，html5中，可以在js中对该元素使用indeterminate属性，以说明复选框“尚未明确选取”状态。
<script>
var cb = document.getElementById("cb");
//将indeterminate的属性设置为true
cb.indeterminate = true;
</script>
<input type="checkbox" indeterminate id="cb">indeterminate属性测试
16. image提交按钮的height属性与width属性
- height:指定图片按钮中图片的高度；
- width:指定图片按钮中图片的宽度；
<input type="image" src="img/2.png" width="23" height="23">
17. textarea元素的maxlength属性与wrap属性
- maxlength :使用整数值进行设定，用于限定textarea元素中可输入文字的个数。
- wrap:可指定属性值为soft与hard.当属性为hard时，在没有用回车键而是文字超出一排规定范围而自动换行时，提交表单时会在换行处添加一个换行标志。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
- 下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-26
- 下面小编就为大家带来一篇html5表单及新增的改良元素详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-07
- 这篇文章主要为大家介绍了HTML5新增的表单元素和属性,具有一定的参考价值！需要的朋友可以参考下2014-07-07
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
HTML5 拥有若干涉及表单的元素和属性，下面为大家介绍下新的表单元素datalist 元素、keygen 元素、output 元素以及它们的使用实例，感兴趣的朋友可以参考下哈，希望对大家2013-07-19HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
在HTML5增强的元素中，最值得关注的就是表单元素;在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可2013-01-31- 点击这里返回网页教学网 HTML教程 栏目． 上文：标记语言——引用 原文出处 chapter 5 表单 互动性一直是互联网的重点,让使用者与网站能够交换信息2008-10-17
- 本教程介绍FORM表单标记的各种属性在网页设计中的应用. <FORM>标记的NAME属性 基本语法 01 <Form name="Form＿name"> 02 ……2008-10-17
- 假设现在要在表单中添加这样一项内容：浏览所在的城市。这里不说全国的城市，只说省会以上的城市就有几十个。如果以上面讲过的单选按钮的形式，将这些城市全部罗列在网页上2008-10-17
- 带有图片预览功能的上传表单，完整的HTML代码如下所示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=2008-10-17
- 表单是用户提交信息的重要渠道。本节就将介绍表单的基础知识。 表单标签<form> 表单以一个<form>标签开始。用户注册网站会员，投票等等都需要表单来实现2008-10-17
最新评论