本文摘自PHP中文网,作者黄舟,侵删。
本文主要对HTML5表单新增属性进行详细介绍,并附上实例解析,简单易懂。需要的朋友一起来看下吧1. 表单内元素的form属性
在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了
1 2 3 4 | <form id= "testform" >
<input type= "text" >
</form>
<textarea form= "testform" ></textarea>
|
2. 表单内元素的formaction属性
在H4中,表单的提交方式
1 2 | <form action= "1.jsp" >
</form>
|
提交整个表单
在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属性,画面打开时,将自动获得焦点。
1 | <input type= "text" action= "1-3.jsp" autofocus>提交到3页面</form>
|
一个页面上只能有一个控件具有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() == "" ) {
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)处于为选择状态时输入提示信息(灰色)
1 | <input type= "text" palceholder= "hahah" >
|
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"、""(不指定)。不进行指定时,使用游览器的默认值。使用方法如下
1 | <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元素,当用户在这两个元素中用鼠标选取部分文字时,可以使用该元素来获取选择方向。
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" );
cb.indeterminate = true;
</script>
<input type= "checkbox" indeterminate id= "cb" >indeterminate属性测试
|
16. image提交按钮的height属性与width属性
height:指定图片按钮中图片的高度;
width:指定图片按钮中图片的宽度;
1 | <input type= "image" src= "img/2.png" width= "23" height= "23" >
|
17. textarea元素的maxlength属性与wrap属性
以上就是具体介绍HTML5表单新增属性的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5和css3扁平化风格博客教程的资源分享
url完整结构以及同源跨域处理的介绍
详解HTML5 canvas drawing的示例代码(三)
HTML5动画有什么用?
几个解决兼容ie6\7\8不支持HTML5标签的几个方法
HTML5应用-生日快乐动画的实现
HTML5 css 需不需要js
HTML5本地存储storage实例详解
HTML5实现上传图片预览效果代码
HTML5 网络拓扑图应用实例讲解
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 具体介绍HTML5表单新增属性