Trong series này:

HTML Cấu trúc trang HTML Văn bản và định dạng Liên kết và điều hướng Hình ảnh và đa phương tiện Danh sách Bảng dữ liệu Form và input Phần tử Semantic HTML5 Audio, Video và Canvas Meta tags và phần head
Sửa trang này

Form và input

Thẻ <form>

Thẻ <form> bao bọc toàn bộ các trường nhập liệu và định nghĩa cách gửi dữ liệu:

<form action="/xu-ly" method="post">
  <!-- các trường nhập liệu -->
</form>
Thuộc tính Ý nghĩa
action URL nhận dữ liệu khi submit
method "get" (dữ liệu trên URL) hoặc "post" (dữ liệu trong body)

Thẻ <label> và <input>

<label> luôn đi kèm <input>. Kết nối bằng thuộc tính for trùng với id của input — khi nhấn label, input sẽ được focus:

<label for="ten">Họ và tên:</label>
<input type="text" id="ten" name="ten" placeholder="Nguyễn Văn A">

Các kiểu <input> phổ biến

type Hiển thị / Dùng cho
text Hộp nhập văn bản một dòng
email Email (validate định dạng)
password Mật khẩu (ẩn ký tự)
number Số (có mũi tên tăng/giảm)
checkbox Ô tick (nhiều lựa chọn)
radio Nút tròn (một lựa chọn duy nhất)
date Chọn ngày
range Thanh trượt
color Bộ chọn màu
file Tải file lên

Thuộc tính hữu ích

Thuộc tính Ý nghĩa
placeholder Gợi ý mờ trong ô trống
required Bắt buộc điền trước khi submit
disabled Vô hiệu hóa, không gửi được
readonly Chỉ đọc, không sửa được nhưng vẫn gửi
min, max Giới hạn giá trị (cho number, date, range)

<select>, <option> và <optgroup>

<label for="tinh">Tỉnh / Thành:</label>
<select id="tinh" name="tinh">
  <optgroup label="Miền Bắc">
    <option value="hn">Hà Nội</option>
    <option value="hp">Hải Phòng</option>
  </optgroup>
  <optgroup label="Miền Nam">
    <option value="hcm">TP. Hồ Chí Minh</option>
  </optgroup>
</select>

<textarea>

<label for="noidung">Nội dung:</label>
<textarea id="noidung" name="noidung" rows="4" cols="50" placeholder="Nhập nội dung..."></textarea>

Nút bấm <button>

type Hành động
submit Gửi form (mặc định)
reset Xóa tất cả về giá trị ban đầu
button Không làm gì — xử lý bằng JavaScript

<fieldset> và <legend>

Dùng để nhóm các trường liên quan:

<fieldset>
  <legend>Thông tin cá nhân</legend>
  <label for="hovaten">Họ và tên:</label>
  <input type="text" id="hovaten" name="hovaten">
</fieldset>

Ví dụ — Form liên hệ

    Kết quả 
    <form action="#" method="post">
  <fieldset>
    <legend>Thông tin liên hệ</legend>

    <div class="field">
      <label for="hoten">Họ và tên <span class="required">*</span></label>
      <input type="text" id="hoten" name="hoten" placeholder="Nguyễn Văn A" required>
    </div>

    <div class="field">
      <label for="email">Email <span class="required">*</span></label>
      <input type="email" id="email" name="email" placeholder="example@email.com" required>
    </div>

    <div class="field">
      <label for="chude">Chủ đề</label>
      <select id="chude" name="chude">
        <option value="">-- Chọn chủ đề --</option>
        <option value="hoi">Câu hỏi</option>
        <option value="gop">Góp ý</option>
        <option value="khac">Khác</option>
      </select>
    </div>

    <div class="field">
      <label for="tinnhan">Tin nhắn <span class="required">*</span></label>
      <textarea id="tinnhan" name="tinnhan" rows="4" placeholder="Nhập nội dung tin nhắn..." required></textarea>
    </div>

    <div class="field">
      <button type="submit">Gửi</button>
      <button type="reset">Xóa</button>
    </div>
  </fieldset>
</form>

    fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  max-width: 480px;
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

.field {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

label {
  font-size: 0.9rem;
  font-weight: 500;
}

.required {
  color: #c0392b;
}

input, select, textarea {
  padding: 0.4rem 0.6rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 0.95rem;
  width: 100%;
  box-sizing: border-box;
}

button[type="submit"] {
  background: #2980b9;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 0.5rem;
}

button[type="reset"] {
  background: #ecf0f1;
  border: 1px solid #bbb;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

    Ví dụ — Các kiểu input đa dạng

      Kết quả 
      <form>
  <div class="field">
    <label for="ngaysinh">Ngày sinh:</label>
    <input type="date" id="ngaysinh" name="ngaysinh">
  </div>

  <div class="field">
    <label for="mausac">Màu yêu thích:</label>
    <input type="color" id="mausac" name="mausac" value="#3498db">
  </div>

  <div class="field">
    <label for="doluong">Độ lượng đường (0–10):
      <span id="luong-val">5</span>
    </label>
    <input type="range" id="doluong" name="doluong" min="0" max="10" value="5"
           oninput="document.getElementById('luong-val').textContent = this.value">
  </div>

  <div class="field">
    <p>Ngôn ngữ bạn biết:</p>
    <label>
      <input type="checkbox" name="lang" value="html"> HTML
    </label>
    <label>
      <input type="checkbox" name="lang" value="css"> CSS
    </label>
    <label>
      <input type="checkbox" name="lang" value="js"> JavaScript
    </label>
  </div>

  <div class="field">
    <p>Bạn là:</p>
    <label>
      <input type="radio" name="vai" value="hocsinh"> Học sinh / Sinh viên
    </label>
    <label>
      <input type="radio" name="vai" value="lapdong"> Lập trình viên
    </label>
    <label>
      <input type="radio" name="vai" value="khac"> Khác
    </label>
  </div>
</form>

      form {
  max-width: 400px;
  font-family: sans-serif;
}

.field {
  margin-bottom: 1.2rem;
}

label {
  display: block;
  margin-bottom: 0.25rem;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.3rem;
}

input[type="date"],
input[type="color"],
input[type="range"] {
  display: block;
  margin-top: 0.25rem;
}

p {
  margin: 0 0 0.4rem;
  font-weight: 500;
}

      Bình luận