Input type

用途

说明

email

电子邮件地址文本框

url

网页URL文本框

number

数值的输入域

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value number 规定默认值

range

特定值的范围的数值，以滑动条显示

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value number 规定默认值

Date pickers

日期，时间选择器

仅Opera9+支持，包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎，比如在站点顶部显示的搜索框

与普通文本框用法一样，只不过这样更语文化

color

颜色选择器

仅Opera支持

<p><label for="runnername">Runner:</label>

             <input id="runnername"name="runnername" type="text" placeholder="First and last name" />

          </p>

类型

作用

on

该字段无需保护，值可以被保存和恢复

off

该字段需要保护，值不可以保存

unspecified

包含<form>的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on

<form action="" method="get" autocomplete="on">

Name:<input type="text" name="name" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

    <option label="W3School" value="http://www.w3school.com.cn" />

    <option label="Google" value="http://www.google.com" />

    <option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

Name: <input type="text" name="usr_name" required="required" />

Country code: <input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" />

<form action="demo_form.asp" method="get" novalidate="true">

E-mail: <input type="email" name="user_email" />

<input type="submit" />

</form>

名称

用途

用法

valueMissing

确保控件中的值已填写

将required属性设为true，

<input type="text"required="required"/>

typeMismatch

确保控件值与预期类型相匹配

<input type="email"/>

patternMismatch

根据pattern的正则表达式判断输入是否为合法格式

<input type="text" pattern="[0-9]{12}"/>

toolong

避免输入过多字符

设置maxLength，<textarea id="notes" name="notes" maxLength="100"></textarea>

rangeUnderflow

限制数值控件的最小值

设置min，<input type="number" min="0" value="20"/>

rangeOverflow

限制数值控件的最大值

设置max，<input type="number" max="100" value="20"/>

stepMismatch

确保输入值符合min,max,step的设置

设置max min step，<input type="number" min="0" max="100" step="10" value="20"/>

customError

处理应用代码明确设置能计算产生错误

例如验证两次输入的密码是否一致，等会DEMO细说

<form name="register1" id="register1">

          <p><label for="runnername">RunnerName:</label>

             <input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>

          </p>

          <p><label for="phone">Tel #:</label>

             <input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"

                    placeholder="xxx-xxxx-xxxx"/></p>

          <p><label for="emailaddress">E-mail:</label>

             <input id="emailaddress" name="emailaddress" type="email"

                    placeholder="For confirmation only"/></p>

          <p><label for="dob">DOB:</label>

             <input id="dob" name="dob" type="date"

                    placeholder="MM/DD/YYYY"/></p>

          <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>

          <p><label for="style">Shirt style:</label>

               <input id="style" name="style" type="text" list="stylelist" title="Years of participation"

                autocomplete="off"/></p>

            <datalist id="stylelist">

             <option value="White" label="1st Year"/>

             <option value="Gray" label="2nd - 4th Year"/>

             <option value="Navy" label="Veteran (5+ Years)"/>

            </datalist>

         <fieldset>

            <legend>Expectations:</legend>

            <p>

            <label for="confidence">Confidence:</label>

            <input id="confidence" name="level" type="range"

                   onchange="setConfidence(this.value)"

                   min="0" max="100" step="5" value="0"/>

            <span id="confidenceDisplay">0%</span></p>

            <p><label for="notes">Notes:</label>

               <textarea id="notes" name="notes" maxLength="100"></textarea></p>

         </fieldset>

         <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>

        </form>

//自定义表单控件验证行为

            var checkvalue = function(e){

                var el = e.target;

                var isvalid = el.checkValidity();

                if(isvalid){

                    el.className= "";

                    el.parentElement.getElementsByTagName("label")[0].className="";

                }else{

                    el.className= "error";

                    el.parentElement.getElementsByTagName("label")[0].className="error";

                }

                e.stopPropagation();

                e.preventDefault();

            }

            //定义表单验证方法

            function invalidHandler(evt) {

                checkvalue(evt);

            }

            function loadDemo() {

               var myform = document.getElementById("register1");

               //注册表单的oninvlid事件

               myform.addEventListener("invalid", invalidHandler, true);

                for(var i=0;i< myform.elements.length-1;i++){

                    //注册表单元素的onchange事件，优化用户体验

                    myform.elements[i].addEventListener("change",checkvalue,false);

                }

            }

            //在页面初始化事件（onload）时注册的自定义事件

            window.addEventListener("load", loadDemo, false);

<form name="passwordChange">

    <p><label for="password1">New Password:</label>

    <input type="password" id="password1" onchange="checkPasswords()"></p>

    <p><label for="password2">Confirm Password:</label>

    <input type="password" id="password2" onchange="checkPasswords()"></p>

</form>

<button onclick="document.passwordChange.password1.checkValidity()">Check Validity</button>

function checkPasswords() {

        var pass1 = document.getElementById("password1");

        var pass2 = document.getElementById("password2");

        if (pass1.value != pass2.value)

            pass1.setCustomValidity("两次输入的密码不匹配");

        else

            pass1.setCustomValidity("");

    }