HTML5表单元素拓展

indeterminate属性是复选框checkbox用来表示选中状态未明确的属性，需要配合js使用，具体用法

    <input type="checkbox" id="cb1" /><input type="checkbox" id="cb2" checked="checked" /><input type="checkbox" id="cb3" indeterminate /><script type="text/javascript">var cb = document.getElementById("cb3");cb.indeterminate = true;</script>

　　　　效果　　

文本框的 list 属性，配合datalist建立可选可书写的下拉式文本框，按回车可以提交，还可以配合autocomplete属性来控制是否保留书写过的表单，

    <form><input type="text" name="txt" list="dlist" autocomplete="off"/><datalist id="dlist" style="display:none"><option>麻婆豆腐</option><option>水煮肉片</option><option>毛血旺</option></datalist></form>

　　　　效果　　当autocomplete的值为off时，不会记录并添加书写过的其他表单内容，当autocomplete的值为on时，回车提交后会自动记录和添加选项

　　　　　　off不添加　　，

　　　　　　　on添加

　文本框的 reqiured 和 pattern 属性，required用来做用户输入的非空验证，pattern 用来做用户输入内容的正则验证，

    <form><input type="text" name="txt" required="required" pattern="[A-Z]{3}"/><input type="submit"/></form>

　　　　效果，非空　　正则

新增input类型

　　url 必须输入网址的文本框，输入的网址格式如 http://www.baidu.com

    <form><input type="url" name="url"/><input type="submit"/></form>

　　　效果　

　　email 必须输入邮箱地址的文本框

    <form><input type="email" name="email"/><input type="submit"/></form>

　　　效果　

　　date ，可以选择时间的选择框

    <form><input type="date" name="date"/><input type="submit"/></form>

　　　效果　

　　time，可以选择时间的选择框

    <form><input type="time" name="time"/><input type="submit"/></form>

　　　效果　

　　month，只能选择到月，与date类似

　　week，选择第几周

    <form><input type="week" name="week"/><input type="submit"/></form>

　　　效果

　　 number，只能填写数字的文本框，可以设置value默认值、min最小值、max最大值、step上下调整幅度，因为e代表10的次幂，可以填写e，其他字母不可输入

    <form><input type="number" name="number" value="10" min="10" max="1000" step="10"/><input type="submit"/></form>

　　　效果

　　range，一个对应数字的拖动条，可以设置value默认值、min最小值、max最大值（默认为100）、step最小调整幅度，可以追加 output 元素来显示拖动的值

     <form><input type="range" id="range" value="50" min="0" max="100" step="10" onChange="bian()"/><output id="output">50</output><input type="submit"/></form><script type="text/javascript">function bian(){            var a = document.getElementById("range");var b = document.getElementById("output");b.value = a.value;}</script>

　　　　效果

　　search，搜索域，显示为正常的文本域

　　tel，用于输入电话号码的文本框，没有强制输入数字的效果，正常的文本框

　　color，颜色选择器，用来给指定元素选取颜色

        <input type="color" name="color" onChange="bianSe(this)" /><div id="bk" style="width:50px; height:20px; background-color:#f00"></div><script type="text/javascript">function bianSe(a){            var c = document.getElementById("bk");c.style.backgroundColor = a.value;}</script>

　　　　效果，初始选色后

转载于:https://www.cnblogs.com/zxbs12345/p/7991289.html

HTML5表单元素拓展相关推荐

html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架一.总结一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
不属于html5表单元素的是,HTML5 表单元素
HTML5 新的表单元素 HTML5有以下新的表单元素
12.6学习笔记 HTML5表单元素/嵌入图片/视频（未完）
12.6学习笔记一. HTML 表单元素(下) 二. HTML5嵌入图片与创建分区响应图三. HTML5嵌入视频一. HTML 表单元素(下) 主要内容: 用input元素获取有规定格式的字符串 ...
html表单验证的作用,HTML5表单元素、表单属性、表单验证
[HTML5新表单] 1.type: - email : 验证逻辑不完整,只验证是否包含 @ : - search : - url : 验证逻辑不完整,只判断是否包含 http:// : - tel ...
HTML5表单元素禁用,禁用HTML5表单元素的验证
// suppress "invalid" events on URL inputs $('input[type="url"]').bind('invalid' ...
HTML5 表单元素
创建表单 form标签用于创建一个表单,会将表单里面的内容一起发送服务器,结构类似于表格表单中的其他元素都要包含在form标签中 form元素属性: action:必须.指定表单发送的地址(服务器地 ...
Html5表单元素-搜索框和上传文件框
1.search - 搜索框 element/form/input/search.html <!doctype html><html><head> <titl ...
html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
(总结1)HTML5中新增加的表单元素
HTML5中新增加了很多元素标签使用,在经过了近一星期多的学习之后现在进行一下总结,方便日后查阅: H5中的智能表单 1 <form action=""> 2 < ...

HTML5表单元素拓展

HTML5表单元素拓展相关推荐

最新文章

热门文章