Thuộc tính value của <input> trong HTML DOM

Thuộc tính value của phần tử <input> trong HTML DOM dùng để lấy hoặc đặt giá trị của ô nhập liệu. Đây là thuộc tính quan trọng nhất để tương tác với dữ liệu người dùng nhập vào.

Ví dụ: Thay đổi và đọc giá trị input type="url"

<!DOCTYPE html>
<html>
<head>
  <title>Demo input value</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>Demo URL value</legend>
      <label>URL: <input type="url" id="urlInput"></label><br>
      <button type="button" onclick="setGoogle()">Google</button>
      <button type="button" onclick="setBing()">Bing</button><br>
      <button type="button" onclick="goUrl()">Đi đến</button>
      <div id="msg"></div>
    </fieldset>
  </form>
  <script>
    var msg = document.getElementById("msg");
    var urlInput = document.getElementById("urlInput");

    function setGoogle() { urlInput.value = "https://www.google.com"; }
    function setBing() { urlInput.value = "https://www.bing.com"; }
    function goUrl() {
      if (urlInput.value) {
        msg.textContent = "Đang chuyển đến: " + urlInput.value;
        // window.location.href = urlInput.value; // Bỏ comment để chuyển hướng thật
      } else {
        msg.textContent = "Vui lòng nhập URL";
      }
    }
  </script>
</body>
</html>

Các tình huống thường gặp

Lưu ý theo loại input

• type="password": value trả về mật khẩu thật (không bị che), nhưng hiển thị vẫn là dấu chấm.
• type="file": value chỉ đọc (read-only), trả về đường dẫn giả C:\fakepath\tenfile vì bảo mật. Dùng files property để lấy File object.
• type="checkbox/radio": value là giá trị gửi đi khi được chọn (mặc định "on"), không phải trạng thái checked. Dùng checked property.
• type="hidden": value hoạt động bình thường, dùng truyền dữ liệu ẩn.

Hiểu rõ value là nền tảng để xử lý form, validate, và xây dựng ứng dụng web tương tác.