1. 表单内元素的form属性
在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了
2. 表单内元素的formaction属性
在H4中,表单的提交方式
提交整个表单
在H5中,可以为表单的每一个属性添加提交到的jsp页面
1
2
3
4
5
|
< 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属性
可以对表单的每一个元素指定提交方法
1
2
3
4
|
< 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属性,画面打开时,将自动获得焦点。
一个页面上只能有一个控件具有autofocus属性,不能滥用
7. required属性
可以用在大多数输入用的元素,若输入的值为空则不允许提交,游览器显示文字信息提示用户必须输入内容。
8. labels属性
可为表单所有元素添加一个lables属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
< 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属性来访问该表单元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
< 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)处于为选择状态时输入提示信息(灰色)
11. 文本框的list属性
结合h5新增的datalist元素,制作提示框
1
2
3
4
5
6
7
|
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”、””(不指定)。不进行指定时,使用游览器的默认值。使用方法如下
当你在文本框内输入如“我是人”点击提交后,返回前一页,再在文本框中输入“我”,就会出线提示“我是人”。
13. 文本框的pattern属性
相当于直接在html部分用正则表达式判断值输入是否符合要求。
请输入内容:<input type=”text” pattern=”[0-9][A-Z]{3}”>
此段代码要求输入一个数字三个大写字母,如果输入不正确,则出现“请与所要求的内容保持一致(谷歌)”的提示。
14. 文本框的selectionDirection属性
针对input的text和textarea元素,当用户在这两个元素中用鼠标选取部分文字时,可以使用该元素来获取选择方向。
1
2
3
4
5
6
7
8
9
10
11
|
< 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属性,以说明复选框“尚未明确选取”状态。
1
2
3
4
5
6
|
< 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:指定图片按钮中图片的宽度;
17. textarea元素的maxlength属性与wrap属性
- maxlength :使用整数值进行设定,用于限定textarea元素中可输入文字的个数。
- wrap:可指定属性值为soft与hard.当属性为hard时,在没有用回车键而是文字超出一排规定范围而自动换行时,提交表单时会在换行处添加一个换行标志。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
原文链接:http://www.cnblogs.com/huyuzhu/p/6200883.html