繁星H5之旅-HTML5表单新增元素与属性
2017-03-04 21:30
701 查看
1、标签control属性
在HTML5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。
文本框placeholder属性
placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
文本框list属性
在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
文本框AutoComplete属性
文本框的pattern属性
文本框的SelectionDirection属性
复选框的indeterminate属性
image提交按钮的height属性与width属性
在HTML5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> function setValue(){ var label=document.getElementById("label"); var textbox=label.control; textbox.value=510006; } </script> <form> <label id="label"> 邮编: <input id="txt_zip" maxlength="6"> <small>请输入六位数字</small> </label> <input type="button" value="设置默认值" onclick="setValue()"> </form> </body> </html>
文本框placeholder属性
placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Placehoder属性</title> </head> <body> <input type="text" placeholder="请输入用户名"> </body> </html>
文本框list属性
在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>List属性</title> </head> <body> <form> <input type="text" name="zkdir" list="zkdir"> <datalist id="zkdir" style="display: none;"> <option value="HTML5学习">HTML5学习</option> <option value="CSS3学习">CSS3学习</option> <option value="JavaScript学习">JavaScript学习</option> </datalist> </form> </body> </html>
文本框AutoComplete属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本框AutoComplete属性</title> </head> <body> <form> <input type="text" name="zkdir" autocomplete="on" list="zkdir"> <!--autocomplete有两个值:on&off,不填写取决于当前浏览器的默认值--> <datalist id="zkdir" style="display: none;"> <option value="HTML5学习">HTML5学习</option> <option value="CSS3学习">CSS3学习</option> <option value="JavaScript学习">JavaScript学习</option> </datalist> </form> </body> </html>
文本框的pattern属性
文本框的SelectionDirection属性
复选框的indeterminate属性
image提交按钮的height属性与width属性
相关文章推荐
- 繁星H5之旅-HTML5表单新增元素与属性
- HTML5表单新增元素与属性
- HTML5新增的表单元素和属性实例解析
- HTML5表单新增元素与属性
- HTML5表单新增元素与属性
- HTML5 表单新增元素与属性
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- HTML5表单新增元素与属性 (续)
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- HTML5表单新增元素与属性
- HTML5——表单新增元素与属性(1)
- HTML5表单新增元素与属性 (续)
- html5表单新增元素与属性2
- HTML5表单新增元素与属性
- HTML5表单新增元素与属性
- HTML5 学习笔记4-表单新增的元素和属性
- HTML5 学习笔记5-表单新增元素和属性(续写)
- HTML5新增表单元素及属性总结
- HTML5表单相关新增元素和属性
- HTML5表单相关新增元素和属性