HTML5表单新增元素和属性(2)
2017-10-10 11:53
836 查看
HTML5表单新增元素和属性(2)
HTML5表单新增元素和属性2control属性
placeholder属性
list属性
autocomplete属性
pattern属性
selectionDirection属性
indeterminate属性
image提交按钮的height属性和width属性
control属性
在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function setValue(){ var label = document.getElementById("label"); var textbox = label.control; textbox.value ="010010"; } </script> <form id="testform"> <label id="label"> 邮编: <input id="txt_zip" maxlength="6" /> <small>please input 6 number</small> </label> <input type="button" value="设置默认值" onclick="setValue()" /> </form> </body> </html>
placeholder属性
placeholder是指当前文本框处于未输入状态时显示输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊提示输入提示文字。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" placeholder="请输入用户名" /> </body> </html>
list属性
当行文档的属性为某个datalist元素的id
datalist元素类似于选择框,当用户想要设定的值叜选择列表之内时,允许自动输入。
datalist元素本身并不侠士,而是当文档框获得焦点时以提示输入的方式显示。
input的list属性对应一个datalist标签
datalist标签包含一系列的optin选项
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input type="text" name="greeting" list="greetings" /> <datalist id="greetings" style="display: none;"> <option value="HTML5学习">HTML5学习</option> <option value="Android学习">Android学习</option> <option value="IOS学习">IOS学习</option> </datalist> </form> </body> </html>
可下拉选择
可编辑输入
autocomplete属性
帮助输入所用的自动完成功能。使用antocomplete属性,安全性方面也得到了很好的控制。
pattern属性
对input元素使用pattern属性,并且将属性值设置为某个格式的正则表达式,在提交时会对这些进行检查,检查其内容是否符合给定格式。当输入内容不符合给定格式时,则不允许提交,同时在浏览器中显示相应的文字提示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://localhost:8080/helloJSP/test01.jsp"> 请输入内容 <input pattern="[A-Z]{3}" name="part" /> <input type="submit" /> </form> </body> </html>
效果如下:
selectionDirection属性
用户在input和textarea元素中用鼠标选择部分文字时,可以用selectionDirection属性来获取选择的方向。正向选取:forward
反向选取:backward
没有选择任何文字时:forward
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function AD(){ var control = document.forms[0]['text']; var Direction = control.selectionDirection; alert(Direction); } </script> <form> <input type="text" name="text" /> <input type="button" value="点击我" onclick="AD()" /> </form> </body> </html>
indeterminate属性
在JavaScript脚本代码中对 CheckBox元素使用indeterminate属性,说明复选框处于“尚未明确是否选取”状态。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" indeterminate id="cb" />属性测试 <script> var cb=document.getElementById("cb"); cb.indeterminate = true; </script> </body> </html>
效果如下:
image提交按钮的height属性和width属性
height和width分别用来指定图片按钮的高度和宽度<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="test.jsp" method="post"> 姓名:<input type="text" name="name" /> <input type="image" src="billd7.gif" alt="编辑" width="20" height="20" /> </form> </body> </html>
效果如下:
相关文章推荐
- html5表单新增的元素与属性
- HTML5 学习笔记5-表单新增元素和属性(续写)
- HTML5——新增表单元素与属性(2)
- WEB前端之HTML5[3]~HTML5 表单新增表单元素与属性
- HTML5表单相关新增元素和属性
- HTML5——新增表单元素与属性(3)
- HTML5表单新增元素与属性
- HTML5新增的表单元素和属性实例解析
- HTML5新增表单元素及属性总结
- HTML5 表单新增元素与属性
- HTML5 学习总结(二)——HTML5新增属性与表单元素
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- HTML5-表单新增元素和属性
- 疯狂的表单-html5新增表单元素和属性
- HTML5表单新增元素与属性
- HTML5表单新增元素与属性
- HTML5表单新增元素与属性 (续)
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- HTML5 表单新增元素与属性
- HTML5表单新增元素和属性(1)