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>
效果如下。
參考:
沒有留言:
張貼留言