HTML5表單的新功能

HTML5 Web Forms 2.0是對目前Web表單的全面提升,它在保持了簡便易用的特性的同時,增加了許多內置的控件或者控件屬性來滿足用戶的需求,并且同時減少了開發人員的編程。HTML5 主要在以下幾個方面對目前的Web表單做了改進:

HTML結構更加自由

XHTML中需要放在form之中的諸如input/button/select/textarea等標簽元素,在HTML 5中完全可以放在頁面任何位置,然后通過新增的form屬性指向元素所屬表單的ID值,即可關聯起來。

    <form id="form0" action="http://www.baidu.com"></form>
    <input type="search" form="form0" name="kw">

新增控件類型

  1. Email/Url類型
    <input type="email" name="email"></input> 
    <input type="url" name="url"></input> 

必須輸入正確的email/url地址,表單才能正常提交。

  1. search
    <input type="search" search="s"></input> 

此類型表示輸入的將是一個搜索關鍵字,通過results=s可顯示一個搜索小圖標。

  1. number/range
    <input type="number" name="points" min="5" step="5" max="100" />
    <input type="range" name="points" min="5" step="5" max="100" />

不同的數字輸入模式

  1. color
    <input type="color"></input> 

此類型可讓用戶通過顏色選擇器選擇一個顏色值,并反饋到value中。

  1. date/month/week/time/datetime 日期選擇器
    <input type="date" name="user_date" />

新增表單屬性

  1. placeholder
    <input type="text" placeholder="請輸入用戶名"></input>
  1. require/pattern
    <input type="text" name="require" required=""></input> 
    <input type="text" name="require1" required="required"></input> 
    <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input> 
  1. autofocus
    <input type="text" autofocus="true"></input> 

頁面初始時,聚焦

  1. list
    <input type="text" list="ilist"/> 
    <datalist id="ilist"> 
        <option label="a" value="a"></option> 
        <option label="b" value="b"></option> 
        <option label="c" value="c"></option> 
    </datalist>

list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。

  1. multiple 規定輸入域中可選擇多個值。
    <input type="file" name="img" multiple="multiple" />
  1. XML Submission編碼格式
    我們一般常見的是Web Form的編碼格式是application/x-www-form-urlencoded。開發人員都很清楚這種格式,數據送到服務器端,可以方便的存取。HTML5提供一種新的數據格式:XML Submission,即application/x-www-form+xml。簡單的舉例說,服務器端將直接接收到XML形式的表單數據。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容