熱情輕鬆地過生活: HTML輸入欄位提示字串資訊 (Form list)

2013年9月26日星期四

HTML輸入欄位提示字串資訊 (Form list)

在Html的form表單中，我們常常會使用<input type="text">來讓使用者輸入資料，
若想要使用者點擊欄位就出現曾經輸入過的資訊可以透過 autocomplete 這個屬性的 on/off來控制，而若是開發者想要自訂提示資訊可以透過datalist來達成，如下面程式碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form>
<span>Enter the number :</span>
<input type="text" name="name" list="test" autocomplete="on"/>
</form>
<datalist id="test">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</datalist>
</body>
</html>

執行結果會如下圖:

如上圖所示，5544和555是我曾經輸入過的資料，而test1~test3為我們自己創造的提示資訊，若把list拿掉的話只會出現使用者曾經輸入過的資訊(也就是5544和555)，而如果不想讓使用者看到任何提示資訊的話只要把"autocomplete"這個屬性設為"off"就可以啦！

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)