HTML5用於建立表單的輸入小工具資料綁定以及資料驗證-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5用於建立表單的輸入小工具資料綁定以及資料驗證

高洛峰

Nov 18, 2016 am 11:15 AM

html5

1. 輸入類型和輸入屬性

　　菜鳥教程上給出了HTML5新增加的input輸入類型，可以在上面嘗試一下不同類型的樣子，基本上可以滿足日常開發需求了。類型不同會照成什麼內在差異呢？主要有三點，首先，瀏覽器會根據輸入類型進行基本的資料校驗，例如type="email"，如果使用者輸入的內容不包括@符號，那麼這就是不合法的輸入，瀏覽器會給出相應的提示。不同類型的第二點影響就是在行動端上，在瀏覽器上瀏覽頁面時，如果輸入項類型不同，裝置給出的虛擬鍵盤就會根據該類型的不同而不同，例如如果type="email" ，輸入時在蘋果手機上給出的鍵盤類型就增加了@符號。第三點則是帶來的便捷了，你輸入值如果是顏色類型，那麼瀏覽器會給你一個顏色選擇的面板，從而選擇或者輸入相應的顏色，如果單獨實現一個這種顏色選擇器方便用戶輸入的話就顯得有些麻煩了；。

　　[輸入屬性控制了一些特殊的內容，介紹三個輸入屬性：

　　placeholder: 相信大家最常用的就是這個屬性了，126郵箱的帳戶和密碼都用了這個placeholder，placeholder其實就是文字佔位符，當使用者輸入了內容佔位符自動消失，起到了提示的作用。

　　autofocus: 看例子就明白了，它用來定義在頁面載入時應該取得焦點的輸入元素。

　　required: 設定這個屬性就說明該輸入時必填項，如果使用者沒有填如該內容就提交表單，瀏覽器會給予對應的提示。

2. min max data-*輸入屬性

　　max min 屬性定義了number, range輸入的最大值與最小值。

　　data-*的作用是將鍵值對資料綁定到一些元素上。透過dom元素的dataset物件獲得：

<input type="number" data-price="21" >
js代码：
let element = document.getElementById(&#39;testid&#39;);
let price = element.dataset.price

登入後複製

　　元素的作用是將結果顯示給使用者：

<body>
    <output id=&#39;test&#39;>122</output>
</body>
<script type="text/javascript">
    let ss = document.getElementById(&#39;test&#39;)
    ss.value = 888;
</script>

登入後複製

這個小例子就實現了將output的值設為888;

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn