網頁

2019/8/6

HTML <input> placeholder屬性

HTML <input>元素的placeholder屬性作用如下。

<input>元素的placeholder屬性會在輸入欄位中顯示輸入提示(hint)。


可使用placeholder屬性的<input>類型(type)包括以下:

  • text:一般文字輸入欄位
  • search:搜尋欄位
  • tel:電話輸入欄位
  • url:URL輸入欄位
  • email:Email輸入欄位
  • password:密碼輸入欄位
  • number:數字輸入欄位

總之就是那些可用來輸入資料的欄位類型。


例如下面的欄位都使用了placeholder屬性來提示使用者此欄位應輸入什麼資料。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        <label>姓名:</label>
        <input type="text" placeholder="請輸入英文姓名">
    </div>
    <div>
        <label>電話:</label>
        <input type="tel" placeholder="e.g. 0932-333-333">
    </div>
    <div>
        <label>信箱:</label>
        <input type="email" placeholder="請輸入gmail信箱">
    </div>
    <div>
        <label>數量:</label>
        <input type="number" placeholder="請輸入購買數量">
    </div>

</body>
</html>

效果如下。


參考:

沒有留言:

張貼留言