新的 HTML5 Datalist 元素介紹

openkk 12年前發布 | 14K 次閱讀 HTML5 前端技術

HTML5 的 <datalist> 元素為 <input> 元素指定了一個預定義的列表選項，實現類似自動完成的效果。 

<!DOCTYPE html>
<html>
<body>


<form action="login.php" method="post">
User:
<input list="username" name="username" />
<datalist id="username">
  <option value="Zhlmmc">
  <option value="oschina">
  <option value="Winter Lau">
  <option value="Eddie">
  <option value="Valentin">
</datalist>
Password:
<input type="password" />
<input type="submit" value="Login" />
</form>


</body>
</html></pre> 
<datalist> 標簽當前只是 Firefox 和 Opera 瀏覽器支持，希望其他瀏覽器能盡快支持。


<datalist> 最終的運行效果如下：


新的 HTML5 Datalist 元素
 本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！