Biểu mẫu (Form) trong HTML

Khái niệm và lý thuyết

Mỗi ô nhập cần name để dữ liệu được gửi đi và một <label> gắn với id của ô (bấm vào nhãn sẽ đưa con trỏ vào ô, rất quan trọng trên điện thoại). Trình duyệt tự kiểm tra các ràng buộc như required, type="email" trước khi gửi.

Form đăng ký

<form action="#" method="post" onsubmit="alert('Đã gửi!'); return false;">
  <fieldset>
    <legend>Thông tin sinh viên</legend>
    <p><label for="ho-ten">Họ tên:</label><br>
       <input type="text" id="ho-ten" name="ho_ten" required placeholder="Lò Văn A"></p>
    <p><label for="email">Email:</label><br>
       <input type="email" id="email" name="email" required></p>
    <p><label for="ngay-sinh">Ngày sinh:</label><br>
       <input type="date" id="ngay-sinh" name="ngay_sinh"></p>
    <p>Giới tính:
       <label><input type="radio" name="gioi_tinh" value="nam"> Nam</label>
       <label><input type="radio" name="gioi_tinh" value="nu"> Nữ</label></p>
    <p><label for="nganh">Ngành:</label>
       <select id="nganh" name="nganh">
         <option>Công nghệ thông tin</option>
         <option>Sư phạm Tin học</option>
       </select></p>
    <p><label for="gioi-thieu">Giới thiệu:</label><br>
       <textarea id="gioi-thieu" name="gioi_thieu" rows="3" cols="40"></textarea></p>
    <p><label><input type="checkbox" name="dong_y" required> Tôi đồng ý nội quy</label></p>
    <button type="submit">Đăng ký</button> <button type="reset">Nhập lại</button>
  </fieldset>
</form>

Bấm Đăng ký khi bỏ trống ô bắt buộc hoặc nhập email sai: trình duyệt tự báo lỗi.

Kiểm tra dữ liệu

<form onsubmit="alert('Hợp lệ!'); return false;">
  <input name="ma_sv" placeholder="Mã SV: 8 chữ số" pattern="[0-9]{8}" required>
  <input type="number" name="tuoi" min="16" max="60" placeholder="Tuổi">
  <input type="range" name="muc_do" min="1" max="5">
  <input type="color" name="mau" value="#2e7d32">
  <button>Kiểm tra</button>
</form>

GET và POST

Form cần chương trình phía máy chủ (PHP, Python, Node.js) để xử lý dữ liệu; hoặc dùng dịch vụ như Google Forms, Formspree khi làm trang tĩnh.

Học chi tiết về form

Bài này là phần tổng quan. Sáu bài tiếp theo đi sâu từng khía cạnh của form:

1. Thuộc tính của form: action, method, target, enctype, novalidate
2. Các phần tử của form: label, select, textarea, button, fieldset, datalist, output
3. Các kiểu input: hơn 20 type: email, tel, date, file, color, range...
4. Thuộc tính của input: readonly, disabled, pattern, min, max, autocomplete
5. Kiểm tra dữ liệu: validity, setCustomValidity, formaction
6. Định dạng và xử lý form: CSS, trợ năng, FormData, PHP