首頁 > web前端 > html教學 > html 標籤的使用詳解

html 標籤的使用詳解

黄舟
發布: 2017-06-21 09:31:46
原創
9847 人瀏覽過

在Web設計中,經常會用到如輸入框的自動下拉提示,這將大大方便用戶的輸入。在以前,如果要實現這樣的功能,必須要求開發者使用一些Javascript的技巧或相關的框架進行ajax調用,需要一定的程式設計工作量。但隨著HTML5 的慢慢普及,開發者可以使用其中的新的DataList標記就能快速開發出十分漂亮的 AutoComplete元件的效果

標籤定義選項清單。 datalist 及其選項不會被顯示出來,它只是合法的輸入值清單。

<!DOCTYPE HTML>
<html>
<body>
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</body>
</html>
登入後複製

效果:

html <datalist>標籤的使用詳解

<!DOCTYPE html>
<html>
 <head>
    <title>HTML5 datalist tag</title>
    <meta charset="utf-8">
 </head>
    <p>
        浏览器版本:<input list="words">
    </p>
    <datalist id="words">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
        <option value="Sogou">
        <option value="Maxthon">
    </datalist>
 </body>
</html>
登入後複製

程式碼如上,配合標籤的list屬性,將作為提供的數據集,寫起來和下拉清單很像,只不過有自動提示功能。相容性如下:

Chrome/Firefox/Opera和IE10+均已支持,Safari直到版本7仍不支援。

一、datalist標籤的使用範例

			<!DOCTYPE html>

<html>

 <head>

    <title>HTML5 datalist tag</title>

    <meta charset="utf-8">

 </head>

    <p>

        浏览器版本:<input list="words">

    </p>

    <datalist id="words">

        <option value="Internet Explorer">

        <option value="Firefox">

        <option value="Chrome">

        <option value="Opera">

        <option value="Safari">

        <option value="Sogou">

        <option value="Maxthon">

    </datalist>

 </body>

</html>		
登入後複製

datalist提供一個事先定義好的列表,透過id與input關聯,當在input內輸入時就會有自動完成(autocomplete)的功能,使用者將會看見一個下拉式清單供其選擇。

效果如下

html <datalist>標籤的使用詳解

要注意的是IE 10和Opera 中,不需要使用者必須輸入一個字元才能看到下拉的建議列表,而其他瀏覽器需要使用者至少輸入一個字元才能看到效果。

二、Datalist中,同樣可以為每一個下拉列表選項指定一個value值,如下程式碼:

			 <label for="state">State:</label>
 <input type="text" name="state" id="state" list="state_list">
 <datalist id="state_list">
   <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
   <option value="AZ">Arizona</option>
   <option value="AR">Arkansas</option>
 </datalist>
 		
登入後複製

如果在option中一旦指定了value的值,則使用者透過下拉清單選擇後,文字方塊中顯示的將會是value的值,如下圖:

html <datalist>標籤的使用詳解

三、Autocomplete屬性

此屬性可以設定為on或off,表示輸入欄位是否應該啟用自動完成功能,如下程式碼所示:

			<form>
   <!-- 如果设置了autocomplete属性,则将会继承父元表单元素中autocomplete的值得,   
   如果也没设置,则默认autocomplete为on,这里没进行任何设置,所以firstName的autocomplete属性为on   -->
    <input type="text" name="firstName">
   <!-- autocomplete设置为on,浏览器将记忆下用户每次输入的值   -->
   <input type="text" name="address" autocomplete="on">   
   <!-- 设置为off,代表浏览器将不记忆用户在该文本框本次的输入,也不进行建议提醒   -->
   <input type="text" name="secret" autocomplete="off"> 
</form> 		
登入後複製

要注意的是,在opera瀏覽器中,如果設定autocomplete為off,則根本不顯示datalist,而在其他瀏覽器中,是會顯示datalist的,只不過失去自動建議提醒功能。

四、什麼時候該使用DataList

要注意的是,使用這種下拉的智慧提示框也要注意場合。例如在一些要選擇不是太多的場景下,使用一般的下拉框其實就可以了。而如果在需要使用者在許多資料中去選擇,則可以建議使用Datalist下拉建議提示框,因為可以方便使用者快速檢索去選擇。

五、如何應對不支援的瀏覽器

在寫本文的時候,依然只有IE 10,Firefox 4+,Chrome 20+和Opera是支援datalist的,這意味著不少舊版的瀏覽器的使用者不能使用datalist的功能,但辦法總是有的,下面分別介紹一個折衷的辦法

 

datalist中嵌套使用傳統的select下拉選擇框

一個不錯的解決方法,是在提供傳統的select下拉文字框的同時,提供給使用者能輸入普通文字的文字框,如下程式碼:

			<label for="country">Country:</label>
  <datalist id="country_list">
    <select name="country">
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
      <!-- more -->
    </select>
    If other, please specify:  
</datalist>
  <input type="text" name="country" id="country" list="country_list"> 
 		
登入後複製

在上面的程式碼中,在datalist中嵌套了傳統的select下拉文字框,而input文字框中依然綁定了datalist,這樣的好處是,當在不支援datalist的瀏覽器中運行的時候會有上圖的效果:一邊是下拉選擇,另外的是可以允許使用者輸入下拉清單中不存在的記錄。而上面的程式碼如果在支援datalist的瀏覽器中運行,則是原來的只顯示一個datalist的效果。

六、Datalist的限制

 

當然,Datalist也有限制和不足之處,體現在:

1)不能使用CSS去隨意控制或改變其下拉建議清單中的項目

2)無法控制datalist的位置

3) 無法控制每次當使用者輸入多少個字元後,就出現下拉建議清單

4)無法控制大小寫敏感,或當匹配什麼樣的字元就出現下拉建議清單

5)不能將其與服務端的資料來源綁定

以上是html 標籤的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板