(总结1)HTML5中新增加的表单元素

Posted powerplay

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(总结1)HTML5中新增加的表单元素相关的知识,希望对你有一定的参考价值。

html5中新增加了很多元素标签使用,在经过了近一星期多的学习之后现在进行一下总结,方便日后查阅:

  • H5中的智能表单

技术分享图片

 1     <form action="">
 2         <fieldset>
 3             <legend>Html5中的智能表单</legend>
 4             <label for="email">
 5                 email:<input type="email" name="email" id="email"/>
 6             </label>
 7             <label for="tel">
 8                 tel:<input type="tel" name="tel" id="tel"/>
 9             </label>
10             <label for="url">
11                 url:<input type="url" name="" id="url"/>
12             </label>
13             <label for="number">
14                 number:<input type="number" name="" id="number" step="3"/>
15             </label>
16             <label for="search">
17                 search:<input type="search" name="" id="search"/>
18             </label>
19             <label for="range">
20                 range:<input type="range" name="" id="range" value="60" min="0" max="100"/>
21             </label>
22             <label for="color">
23                 color:<input type="color" name="" id="color"/>
24             </label>
25             <label for="time">
26                 time:<input type="time" name="" id="time"/>
27             </label>
28             <label for="date">
29                 date:<input type="date" name="" id="date"/>
30             </label>
31             <label for="month">
32                 month:<input type="month" name="" id="month"/>
33             </label>
34             <label for="week">
35                 week:<input type="week" name="" id="week"/>
36             </label>
37             <input type="submit" value="提交"/>
38         </fieldset>
39     </form>

 

  • 以及智能下拉菜单,和传统下拉标签进行一个对比

技术分享图片

    <!--传统表单-->
    <select>
        <option>选项1</option>
        <option>选项1</option>
        <option>选项1</option>
        <option>选项1</option>
    </select>
    <br/><br/><br/>



    <!--h5新增表单-->
    车:<input type="text" list="car"/>
    <datalist id="car">
        <option>奔驰</option>
        <option>奔奔</option>
        <option>宝马</option>
        <option>宝俊</option>
        <option>保时捷</option>
        <option>奥迪</option>
        <option>奥拓</option>
    </datalist>

 

  •  表单元素
<form action="">
        <fieldset>
            <legend>表单元素</legend>
            <label>
                output标签仅做展示用:<output>我是output</output>
            </label>
            <label>
                加密类型:<keygen/>
            </label>
            <label>
                度量器:<meter value="30" min="0" max="100"></meter>
            </label>
            <label>
                进度条:<progress></progress>
                <!--进度条:<progress  value="30" min="0" max="100"></progress> -->
            </label>

        </fieldset>
    </form>
  • 表单属性
1     autofocus:自动获取焦点
2     autocomplete:自动补全(默认on开启) off关闭
3     placeholder:占位符
4     required:必填选项
5     multiple:可多选(上传文件)
6     novalidate:关闭默认的验证功能(form标签属性)
7     pattern="1\\d{10}" 自定义正则表达式
  • 表单事件

技术分享图片

    <script>
        var txt1 = document.getElementsByTagName("input")[0];
        var txt2 = document.getElementsByTagName("input")[1];
        var txt3 = document.getElementsByTagName("input")[2];
        var num = 1;

        //oninput 当用户每一次输入的时候
        txt1.oninput = function () {
            txt2.value = num++;
        }
        //oninvalid 当验证不通过时触发
        txt3.oninvalid = function () {
            //setCustomValidity:验证不通过时提示的文字
            this.setCustomValidity("不要顽皮!请正确输入")
        }
    </script>

 

以上是关于(总结1)HTML5中新增加的表单元素的主要内容,如果未能解决你的问题,请参考以下文章

任何浏览器都能支持html5中新的表单控件

HTML5都有哪些新的表单属性

(总结2)HTML5中新增加的音频/视频标签

HTML5新增的form属性简介——张鑫旭

HTML5新增元素

css3总结