html5的datalist元素詳解
一、總結
一句話總結：
datalist元素配合input元素可以出現有提示選擇作用的選框效果，還是相對比較簡便好用的
1、optgroup元素是干嘛的？
optgroup元素用來對option元素進行組合分組
<select name="select" id=""> <optgroup> <option value="HTML5">HTML5</option> <option value="CSS3">CSS3</option> <option value="JAVA">JAVA</option> <option value="JAVASCRIPT">JAVASCRIPT</option> </optgroup> <optgroup> <option value="HTML5">HTML5</option> <option value="CSS3">CSS3</option> <option value="JAVA">JAVA</option> <option value="JAVASCRIPT">JAVASCRIPT</option> </optgroup> </select>
2、datalist元素配合input元素 做選項框實例？
input元素要指定list屬性的值為datalist的id
<input type="text" name="datalist" list="mydatalist"> <datalist id="mydatalist"> <optgroup> <option value="HTML5">HTML5</option> <option value="CSS3">CSS3</option> <option value="JAVA">JAVA</option> <option value="JAVASCRIPT">JAVASCRIPT</option> </optgroup> <optgroup> <option value="HTML5">HTML5</option> <option value="CSS3">CSS3</option> <option value="JAVA">JAVA</option> <option value="JAVASCRIPT">JAVASCRIPT</option> </optgroup> </datalist>
二、html5--select與HTML5新增的datalist元素
學習要點
- 掌握select元素與datalist元素的使用
select元素
- 用來建立一個下拉菜單選項列表
- 不僅可以在表單中使用，還可以在其他塊元素和內聯元素中使用
- select只是定義一個下拉菜單列表，其具體列表項要通過option元素建立
- option元素可以用來建立一個選項，即下拉列表的一個菜單項
- optgroup元素用來對option元素進行組合分組
- size用來定義列表中顯示的列表項
- multiple屬性用來定義是否可以多選
- 可以添加disabled屬性和autofocus屬性
datalist元素
- HTML5新增元素，用來建立一個選項列表
- datalist元素的內容不會直接顯示在網頁上，只是會在用戶輸入時作為候選項
- 通常與input元素配合使用
實例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <p style="color:#FF0000"> 8 <!-- 9 autofocus屬性：自動獲得焦點<br> 10 accesskey屬性：指定快捷鍵windows中，指定快捷鍵后，按Alt+“快捷鍵”,便會獲得焦點<br> 11 tabindex屬性：指定按Tab鍵時，項目間的移動順序<br> 12 autocomplet屬性： HTML5新增屬性屬性值為on/off,定義是否開啟瀏覽器自動記憶功能<br> 13 --> 14 15 </p> 16 <form action="L3_01.html" method="get"> 17 <!-- 18 姓名：<input type="text" name="name" accesskey="n" tabindex="3" autocomplet="on"><br><br> 19 密碼：<input type="password" name="password" accesskey="p" autofocus="autofocus" tabindex="2" autocomplet="off"><br><br> 20 電話：<input type="tel" name="tel" accesskey="t" tabindex="1" autocomplet="on"><br><br> 21 --> 22 <p2 style="color:#FF0000">這是select元素</p2><br> 23 請選擇你喜歡的課程：<select name="select" id=""> 24 <optgroup> 25 <option value="HTML5">HTML5</option> 26 <option value="CSS3">CSS3</option> 27 <option value="JAVA">JAVA</option> 28 <option value="JAVASCRIPT">JAVASCRIPT</option> 29 </optgroup> 30 <optgroup> 31 <option value="HTML5">HTML5</option> 32 <option value="CSS3">CSS3</option> 33 <option value="JAVA">JAVA</option> 34 <option value="JAVASCRIPT">JAVASCRIPT</option> 35 </optgroup> 36 </select><br><br> 37 38 <p2 style="color:#FF0000">這是datalist元素</p2><br> 39 <input type="text" name="datalist" list="mydatalist"> 40 <datalist id="mydatalist"> 41 <optgroup> 42 <option value="HTML5">HTML5</option> 43 <option value="CSS3">CSS3</option> 44 <option value="JAVA">JAVA</option> 45 <option value="JAVASCRIPT">JAVASCRIPT</option> 46 </optgroup> 47 <optgroup> 48 <option value="HTML5">HTML5</option> 49 <option value="CSS3">CSS3</option> 50 <option value="JAVA">JAVA</option> 51 <option value="JAVASCRIPT">JAVASCRIPT</option> 52 </optgroup> 53 </datalist> 54 <br><input type="submit" value="確定"><br> 55 </form> 56 57 <body> 58 </body> 59 </html>