Thuộc tính placeholder của phần tử <input> được dùng để đặt gợi ý (hint) cho ô nhập liệu, cho biết ngắn gọn những gì mong đợi ở ô nhập liệu đó. Thuộc tính này hoạt động cho các kiểu input sau: text, url, search, email, password và tel. Được giới thiệu trong HTML5.
Cú pháp như sau:
<input placeholder="placeholder_text">
Ở đây, placeholder_text là gợi ý ngắn hiển thị cho người dùng mỗi khi họ truy cập trang web đó.
Ví dụ
<!DOCTYPE html> <html> <body> <h2>Đăng ký</h2> <form action="" method="get"> ID − <input type="text" name="id" placeholder="Nhập UserId tại đây..."><br> Mật khẩu − <input type="password" name="pwd" placeholder="Nhập mật khẩu tại đây..."><br> Ngày sinh − <input type="date" name="dob"><br> Điện thoại − <input type="tel" name="tel" placeholder="Nhập số di động tại đây..."><br> Email − <input type="email" name="email" placeholder="Nhập email tại đây..."><br><br> <button type="submit" value="Submit">Gửi</button> </form> </body> </html>
Kết quả
Trong ví dụ trên, chúng ta có một form với một số trường:
<form action="" method="get"> ID − <input type="text" name="id" placeholder="Nhập UserId tại đây..."><br> Mật khẩu − <input type="password" name="pwd" placeholder="Nhập mật khẩu tại đây..."><br> Ngày sinh − <input type="date" name="dob"><br> Điện thoại − <input type="tel" name="tel" placeholder="Nhập số di động tại đây..."><br> Email − <input type="email" name="email" placeholder="Nhập email tại đây..."><br><br> <button type="submit" value="Submit">Gửi</button> </form>
Placeholder được đặt cho tất cả các trường như:
<input type="password" name="pwd" placeholder="Nhập mật khẩu tại đây...">
Chỉ cần dùng thuộc tính placeholder và đặt gợi ý ngắn:
placeholder="Nhập mật khẩu tại đây..."