Các kiểu input trong HTML: đủ 22 type của thẻ input

Thẻ input và các type của nó

<input> là một trường của form, và thuộc tính (attribute) type quyết định nó là loại trường nào. Cùng một thẻ có thể tạo ô văn bản, thanh trượt, bộ chọn ngày hay bộ chọn màu. Thử từng trường bên dưới rồi nhấn Submit để xem form gửi đi những gì:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> là phần tử rỗng nên không có thẻ đóng. name là khóa mà giá trị được gửi kèm, còn value là giá trị ban đầu. Thiếu type hoặc viết sai sẽ cho ra một ô văn bản bình thường.

Tất cả các kiểu input trong HTML

Các type văn bản và bàn phím điện thoại

email, url, tel, search và text trên máy tính đều trông như một ô văn bản. Khác biệt nằm ở cách kiểm tra hợp lệ và, trên điện thoại, ở bàn phím được mở ra. Trong ví dụ này, viền ô chuyển xanh hoặc đỏ tùy theo đánh giá của trình duyệt về giá trị:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

• Với trình duyệt, ada@example là email hợp lệ: nó chỉ kiểm tra có văn bản, có @ và có tên miền, chứ không kiểm tra tên miền có dấu chấm hay không. Việc kiểm tra thật sự diễn ra trên máy chủ.
• example.com không phải url hợp lệ vì thiếu scheme. https://example.com thì hợp lệ.
• tel chấp nhận mọi thứ. Định dạng số điện thoại giữa các nước quá khác nhau nên không có kiểm tra sẵn; thêm pattern nếu bạn cần.
• inputmode="numeric" yêu cầu điện thoại mở bàn phím số mà không gặp các vấn đề của type="number", nên đây là lựa chọn đúng cho mã bưu chính, mã dùng một lần và số thẻ.

number và range

Cả hai đều nhận min, max và step. number dành cho giá trị chính xác; range là thanh trượt cho những giá trị mà con số cụ thể không quá quan trọng. Thanh trượt range không hiển thị số, nên hãy đi kèm một thẻ <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

Với number, step mặc định là 1, nên một trường giá tiền không có step="0.01" sẽ từ chối 4.99 khi gửi form. Trong JavaScript, input.value luôn là chuỗi; dùng input.valueAsNumber để lấy một số.

Ngày và giờ

Các type ngày và giờ mở bộ chọn riêng của trình duyệt. Người đọc thấy định dạng theo khu vực của họ (09/24/2026, 24.09.2026), nhưng giá trị luôn có cùng một định dạng cố định:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Định dạng cố định đó là thứ máy chủ nhận được và JavaScript đọc được, nên bạn không bao giờ phải phân tích "24.09.2026". min và max cũng dùng định dạng này. datetime-local không có múi giờ: nếu múi giờ quan trọng, hãy chuyển đổi trên máy chủ theo múi giờ của người đọc.

color và file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" giới hạn bộ chọn tệp chỉ hiện ảnh (và cho phép dùng camera trên điện thoại); nó cũng nhận phần mở rộng, như accept=".pdf,.docx". Đây chỉ là gợi ý cho bộ chọn, nên hãy kiểm tra loại tệp trên máy chủ. multiple cho phép chọn nhiều tệp. Một lần tải lên thật sự còn cần method="post" và enctype="multipart/form-data" trên form.

Gợi ý với datalist

Thẻ <datalist> cung cấp cho ô văn bản một danh sách gợi ý mà vẫn cho phép nhập bất kỳ giá trị nào. Nối chúng với nhau bằng thuộc tính list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Gõ "ja" vào ô để xem các gợi ý khớp. Khác với select, người đọc có thể gõ một giá trị không có trong danh sách.

Các thuộc tính dùng được trên input

Lỗi thường gặp

• Dùng type="number" cho số điện thoại, mã bưu chính hay số thẻ. Chúng không phải số lượng. Dùng tel hoặc text kèm inputmode="numeric".
• Trường giá tiền không có step="0.01". Giá trị thập phân sẽ không qua được kiểm tra.
• Dùng placeholder làm nhãn. Nó biến mất ngay khi người đọc bắt đầu gõ.
• Dựa vào accept hoặc type="email" để bảo mật. Chúng chỉ giúp tiện hơn; máy chủ vẫn phải kiểm tra lại.
• Dùng type="month" hoặc type="week" mà không có phương án dự phòng. Một số trình duyệt chỉ hiện ô văn bản thường.
• Viết thẻ đóng </input>. <input> là phần tử rỗng.