>>>

HTML5 表單新屬性 pattern 的使用技術

maybe yes發表於2015-05-13 23:01

原文連結 :http://blog.lmlphp.com/archives/117/The_use_of_HTML5_form_new_attribute_pattern來自 :LMLPHP後院

HTML5 的表單屬性增加了很多功能，如 placeholder，pattern，multiple，autocomplete，autofocus，list，novalidate， required 等。這些新屬性讓網站的開發更加方面和簡單。但是現實總是殘酷的，若是要開發出真正使用者體驗非常好的網站，這些自帶功能往往都是排不上用場的。

前段時間在一個網站上提交表單時 input 輸入框提示 “請與所請求的格式保持一致。”，這樣的提示讓我不知怎麼回事。於是審查元素檢視到輸入框的屬性中含有 pattern，由於是一個郵箱欄位，pattern 寫的過於嚴格，導致不能通過校驗。這樣的提示對於一般的使用者來說，是不會明白怎麼回事的。

於是寫了個小頁面進行測試，發現不同的瀏覽器的提示內容不一樣，也有部分支援 HTML5 的瀏覽器不支援 pattern 屬性的，比如 Safari 瀏覽器。測試發現 Chrome 和 Firefox 都支援 pattern 屬性，Chrome 瀏覽器的提示內容是：“請與所請求的格式保持一致。”， Firefox 的提示內容是：“請匹配要求的格式！”。

使用 pattern 屬性的同時，最好是配合 title 屬性一起使用，並在 title 屬性中註明要求的格式，提示的時候 title 屬性中的內容會出現在下方，如果不在 title 屬性中註明，使用者根本不知道要求的格式是什麼，使用者體驗會非常的不好。如下程式碼示例：

<form>
    <input type="text" placeholder="數字" pattern="\d+" id="數字" title="必須數字哦！">
    <label for="數字">數字</label>
    <input type="submit" value="submit">
</form>

附上 Chrome 和 Firefox 執行截圖：

閱(913)評(0)檢視評論

轉載於:https://my.oschina.net/hosser/blog/672733