文本框list屬性:
為單行文本框增加了一個list屬性,該屬性的值為某個datalist元素的id。datalist元素也是HTML5中新增的元素,該元素類似于選擇框,但是當用戶想要設定的值不在選擇列表之內時,允許自行輸入。datalist元素本身并不顯示,而是當文本框獲得焦點時以提示輸入的方式顯示。
文本框autocomplete屬性:
輔助輸入所有的自動完成功能,是一個即節省輸入時間又十分方便的功能。就是當在輸入框里輸入了值并提交后就雙擊輸入框就會出現下拉菜單在這里就有上一次輸入的內容。
文本框list屬性使用方式:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>list屬性示例</title>
</head>
<form>
text:<input type="text" name="greeting" autocomplete="on" list="greetings">
<!--使用style="display:none;"將detalist元素設定為不顯示-->
<datalist id="greetings" style="display: none;">
<option value="Good Morning(早上好)">Good Morning(早上好)</option>
<option value="Hello(你好)">Hello(你好)</option>
<option value="Good Afternoon(下午好)">Good Afternoon(下午好)</option>
</datalist>
<input type="submit" />
<!-- 提交按鈕 -->
<input type="reset" />
<!-- 重置按鈕 -->
</form>
這里要申明一下:這里和HTML4的下拉菜單有點相像但是下拉菜單不能允許自行輸入,這里還允許自行輸入;
還有:
datalist里的內容不會顯示在文本框里只有點擊文本框才會出現
這時點擊datalist 里的任意一個通過list="greetings" id="greetings"
來把點擊的那個變成id="greetings"來顯示在文本框中
文本框autocomplete屬性:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autocomplete屬性 示例</title>
</head>
<body>
<input type="text" name="geenting" autocomplete="on" list="geenting"/>
</body>
</html>
在上面的list屬性使用的代碼中就用到:
如圖:
Paste_Image.png
autocomplete屬性的值有三個:on off 空值(不指定值)
當值為on時輸入框中除了提示list相關的之外還會提示用戶自己輸入過的數據,當用不指定值時就會使用瀏覽器的默認值(取決于各瀏覽器的決定)