Thuộc tính placeholder của HTML DOM Input URL

Thuộc tính placeholder của đối tượng Input URL trong HTML DOM đặt hoặc trả về chuỗi gợi ý (hiển thị mờ trong ô khi rỗng) hướng dẫn người dùng định dạng URL mong đợi. Không phải giá trị thực, biến mất khi user focus/gõ.

Cú pháp

Lấy giá trị placeholder

inputURLObject.placeholder

Thiết lập placeholder

inputURLObject.placeholder = 'chuỗi_gợi_ý'

Ví dụ minh họa

Ô URL trống. Nhấn nút đặt placeholder ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Input URL placeholder</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>URL-placeholder</legend>
    <label for="URLSelect">URL: <input type="url" id="URLSelect"> </label> 
    <input type="button" value="Lấy ví dụ" onclick="datPlaceholder()"> 
  </fieldset> 
</form> 
<script> 
  var inputURL = document.getElementById("URLSelect"); 
  function datPlaceholder() { 
    inputURL.placeholder = 'https://www.google.com'; 
  } 
</script> 
</body> 
</html>

Kết quả

• Ban đầu: ô URL trống, không có placeholder.
• Nhấn Lấy ví dụ: ô URL hiển thị mờ "https://www.google.com" làm gợi ý.

Mẹo UX: Placeholder không thay thế <label>. Dùng label cho accessibility, placeholder cho ví dụ định dạng.