HTML5 表单元素

HTML5 表单元素(包含在<form>标签内)
一、input新类型
　　1. email类型 - 验证是否包含 '@'
　　2. url类型 - 验证是否包含 'http://'
　　3. tel类型 - 在移动端显示 调出数字输入
　　4. number类型
　　5. range类型
　　6. date类型
　　7. color类型 - 点击弹出颜色选择
　　8. search类型 - 可以清除文本内容

　　9. date - 日期类型
　　10. week - 星期类型
　　11. month - 月份类型

 　　示例：

 1  <form>
 2     <!--
 3         <input type="email">
 4         * 作用 - 提交表单时,验证是否包含"@"
 5         * 问题 - 验证逻辑并不完整
 6     -->
 7     email类型:<input type="email"><br>
 8     搜索类型:<input type="search"><br>
 9     <!--
10         <input type="url">
11         * 作用 - 提交表单时,验证是否包含"http://"
12         * 问题 - 验证逻辑并不完整
13     -->
14     URL类型:<input type="url"><br>
15     <!--
16         <input type="tel">
17         * 注意 - 效果只能在手机端出现
18     -->
19     电话号码类型:<input type="tel"><br>
20     <!--
21         <input type="number">
22         * min - 最小值
23         * max - 最大值
24         * step - 步长,默认值为1
25     -->
26     数字类型:<input type="number" min="0" max="10" step="2"><br>
27     <!--
28         <input type="range">
29         * min - 最小值
30         * max - 最大值
31         * step - 步长
32         * value - 当前值
33     -->
34     范围类型:<input type="range" min="0" max="10" value="8" step="2"><br>
35     颜色类型:<input type="color"><br>
36     <input type="submit">
37   </form>
View Code

 

 　　示例：

 1   <style>
 2     .dColor{
 3         width:150px;
 4         height:150px;
 5         border:1px solid black;
 6         background-color:rgb(200,3,5);
 7     }
 8   </style>
 9 
10         <!--
11     需求
12     * 定义<div>元素 - 用于显示选择后的颜色
13     * 定义<input type="range">元素 - 用于选择颜色的三原色(红|蓝|绿)
14       * rgb(r,g,b) - 0-255
15   -->
16   <div class="dColor"></div>
17     红:<input type="range" id="r" min="0" max="255" /><br />
18     绿:<input type="range" id="g" min="0" max="255" /><br />
19     蓝:<input type="range" id="b" min="0" max="255" /><br />
20  </body>
21  <script>
22     //
23     //当选择红|蓝|绿三原色的不同值,在<div>中显示不同颜色
24     function myChange(){
25         //获得 红 绿 蓝 的value值
26         var r=document.getElementById("r").value;
27         var g=document.getElementById("g").value;
28         var b=document.getElementById("b").value;
29         //设置div的背景色
30         document.getElementsByClassName("dColor")[0].style.backgroundColor="rgb("+r+","+g+","+b+")";
31     }
32     
33     //绑定onchange事件
34     for (var i=0,ele; ele=["r","g","b"][i++]; )
35     {
36         document.getElementById(ele).onchange=myChange;
37     }
38  </script>
View Code

　　示例：

1     //示例
2     日期类型:<input type="date"><br>
3     星期类型:<input type="week"><br>
4     月份类型:<input type="month"><br>
View Code

二、表单新元素
　　1.datalist 元素
　　2.progress 元素
　　3.meter 元素
　　4.output 元素

　　示例：

 1   <!-- 
 2     datalist元素
 3     * <datalist>元素 - 定义备选项(并不显示)
 4     * 配合<input>元素使用
 5       * 定义list属性 - 属性值等于<datalist>元素的id属性值
 6     * 效果 - 和<select>下拉列表类似
 7     * 特点 - 数据与结构的分离
 8       * 数据 - 预定义数据内容<datalist>
 9       * 结构 - 显示在HTML页面中的元素<input>
10     * 优点 - 使用<datalist>元素定义的数据,可以重复使用
11   --> 
12 <datalist id="mylist">
13     <option>请选择</option>
14     <option>北京</option>
15     <option>南京</option>
16     <option>天津</option>
17   </datalist>
18   <input type="text" list="mylist"><br>
View Code

 

　　示例：

 1   <!--
 2     <progress>元素 - 进度条
 3     * max - 设置进度条的最大值
 4     * 没有min属性 - 最小值为0
 5     * value - 表示当前的进度值
 6   -->
 7   <progress max="100" value="0" id="progress"></progress>
 8   <br>
 9   <!--
10     <meter>元素 - 刻度
11     * min - 最小值
12     * max - 最大值
13     * value - 当前值
14     * low - 低预警值
15     * high - 高预警值
16   -->
17   <meter min="0" max="100" value="95" low="10" high="90"></meter>
18
View Code

　　示例：

 1   <progress max="100" value="1" id="pro"></progress>
 2   //进度条回滚
 3       (function myChange(){
 4         var pro=document.getElementById("pro");
 5         var val=pro.value;
 6         pro.value=--val;
 7         val<=0&&(pro.value=100);
 8         if (val>=0)
 9         {
10             setTimeout(myChange,10);
11         }
12     })()
View Code

三、表单新属性
　　1.placeholder - 默认提示内容
　　2.multiple - 允许输入多个值，使用','分割
　　3.autofocus - 自动获取焦点
　　4.form - 允许表单元素定义在表单之外

　　示例：

 1     <!-- 
 2         placeholder属性
 3         * 作用 - 类似于value属性
 4         * 区别
 5           * value属性值
 6             * 显示为黑色
 7             * 确实存在文本框中
 8           * placeholder属性值
 9             * 显示为灰色
10             * 类似于背景存在
11         * 
12     -->
13     <input type="text" value="请输入你的用户名"><br>
14     <input type="text" placeholder="请输入你的用户名">
15     <br><br><br>
16     <!--
17         multiple属性
18         * 作用 - 允许输入多个值
19         * 注意 - 多个值之间使用","
20         * 用法 - 只定义属性名,没有属性值
21     -->
22     <input type="email" multiple>
23     <br><br>
24     <!-- 
25         autofocus属性
26         * 作用 - 自动获取焦点
27         * 用法 - 只定义属性名,没有属性值
28     -->
29     <input type="text" autofocus>
30     <br><br>
31     <input type="submit">
32   </form>
33   <!--
34     form属性
35     * 原本的HTML页面中定义表单元素
36       * 所有的表单元素,必须定义在<form>元素中
37     * 作用 - 允许将表单元素定义在<form>元素外
38       * <form>元素外的表单元素,使用该属性
39       * form属性值等于<form>元素的id属性值
40   -->
41   <input type="password" id="pwd" form="myform">
View Code

四、表单新验证
　　1.验证属性
　　　　1. required 属性 - 验证当前元素是否为空
　　　　2. pattern 属性 - 使用正则表达式验证当前元素值是否匹配
　　　　　　*注意 - 不能验证当前元素是否为空
　　　　3. min和max属性 - 验证当前元素值最小值或最大值(一般用于number,range等元素)
　　　　4. minlength和maxlength属性
　　　　　　*minlength - 验证当前元素的最小长度，提交表单时验证元素最小值
　　　　　　*minlength并不是HTML5新元素
　　　　　　*maxlength - 验证当前元素值的最大长度，输入长度不能大于指定值
　　　　5. validity 属性
　　　　　　*表单验证HTML5提供一种有效状态
　　　　　　* 有效状态通过validityState对象获取到
　　　　　　　　* validityState对象可通过validity属性得到
　　　　示例：

1     <form>
2     用户名:<input type="text" id="user" required><br>
3     密码:<input type="text" id="pwd" pattern="^[a-zA-Z]{6,12}$"><br>
4     年龄:<input type="number" min="0" max="100"><br>
5     email地址:<input type="text" minlength="6" maxlength="10"><br>
6     <input type="submit">
7     </form>
View Code

 

 

　　2.验证(有效)状态
　　　　* validityState对象提供了一系列的有效状态
　　　　* 通过这些有效状态,进行判断
　　　　* 注意
　　　　　　* 所有验证状态必须配合上述的验证属性使用
　　　　* 作用
　　　　　　* 用来替换原本手工实现的逻辑
　　　　1.验证状态 - valid
　　　　　　* valid
　　　　　　* 作用 - 判断当前元素值是否正确
　　　　　　* 注意
　　　　　　　　* 该状态返回true,表示验证成功
　　　　　　　　* 该状态返回false,表示验证失败
　　　　2.valueMissing
　　　　　　*作用 - 判断当前元素值是否为空
　　　　　　*用法 - 配合 required 属性使用
　　　　3.typeMismatch
　　　　　　* 作用 - 判断当前元素值的类型是否匹配
　　　　　　* 用法 - 配合email、number、url等
　　　　4.patternMismatch
　　　　　　* 作用 - 判断当前元素值是否与指定正则表达式匹配
　　　　　　* 用法 - 配合pattern属性使用
　　　　5.tooLong
　　　　　　* 作用 - 判断当前元素值的长度是否正确
　　　　　　* 用法 - 配合maxlength属性
　　　　　　* 使用maxlength属性后,实际不可能出现长度大于maxlength的值
　　　　6.rangeUnderflow
　　　　　　* 作用 - 判断当前元素值是否小于min属性值
　　　　　　* 用法 - 配合min属性
　　　　　　* 注意 - 并不能与max属性值进行比较
　　　　7.stepMismatch
　　　　　　* 作用 - 判断当前元素值是否与step设置相符
　　　　　　* 用法 - 配合step使用
　　　　　　* 注意 - 并不能与min或max属性值进行比较
　　　　8.customError
　　　　　　* 用法 - 配合setCustomValidity()方法
　　　　　　* 如果使用该方法,该状态返回true
　　　　　　* setCustomValidity()方法
　　　　　　* 作用 - 设置自定义的错误提示内容
　　　　　　* 问题 - 使用该方法设置错误信息
　　　　　　* 当输入正确时,调用该方法将信息设置为空("")
　　　　　　* 不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)

　　　　示例：

 1 <form>
 2     用户名:<input type="text" id="user" required><br>
 3     email地址:<input type="email" id="email"><br>
 4     密码:<input type="text" id="pwd" pattern="^[a-zA-Z]{6,12}$"><br>
 5     确认密码:<input type="text" id="repwd" maxlength="10"><br>
 6     年龄:<input type="number" id="age" min="10" max="20"><br>
 7     成绩:<input type="number" id="score" min="60" max="100" step="10">
 8     <input type="submit" value="注册">
 9   </form>
10   <script>
11     var user = document.getElementById("user");
12     user.onblur = function(){
13         if(user.validity.valueMissing){
14             console.log("用户名不能为空.");
15         }
16     }
17     var email = document.getElementById("email");
18     email.onblur = function(){
19         if(email.validity.typeMismatch){
20             console.log("email输入格式错误.");
21         }
22     }
23     var pwd = document.getElementById("pwd");
24     pwd.onblur = function(){
25         if(pwd.validity.patternMismatch){
26             console.log("密码输入错误.");
27         }
28     }
29     var repwd = document.getElementById("repwd");
30     repwd.onblur = function(){
31         if(repwd.validity.tooLong){
32             console.log("密码输入过长.");
33         }
34     }
35     var age = document.getElementById("age");
36     age.onblur = function(){
37         if(age.validity.rangeUnderflow){
38             console.log("年龄过小,不符合!");
39         }
40     }
41     var score = document.getElementById("score");
42     score.onblur = function(){
43         if(score.validity.valid){
44             console.log("成绩输入正确.");
45         }else if(score.validity.stepMismatch){
46             console.log("成绩输入不符.");
47         }
48     }
49   </script>
View Code
 1   <form>
 2     用户名:<input type="text" id="user" required>
 3     <input type="submit">
 4   </form>
 5   <script>
 6     /*
 7      * setCustomValidity()方法
 8      * * 作用 - 修改验证错误后的默认提示信息
 9      * * 问题
10      *   * 一旦使用该方法修改默认错误提示信息后
11      *     即使输入正确,错误提示依旧存在(逻辑错误)
12      * * 解决
13      *   * 判断如果用户输入正确的话,将该方法设置提示内容修改为空
14      * * 问题
15      *   * 使用valid状态判断输入是否正确
16      *     * 一旦使用该方法,validityState对象的所有状态都返回false
17      */
18     var user = document.getElementById("user");
19     user.onblur = function(){
20         //user.value == "" || user.value == null
21         if(user.value != "" && user.value != null){
22             user.setCustomValidity("");
23         }else if(user.validity.valueMissing){
24             user.setCustomValidity("用户名不能为空");
25         }
26     }
27   </script>
View Code

 

posted @ 2015-11-06 21:10  Medeor  阅读(387)  评论(0)  编辑  收藏  举报