Thuộc tính của phần tử form

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

Khi bấm nút gửi, trình duyệt thu thập mọi trường có thuộc tính name bên trong form, ghép thành các cặp name=giá trị, rồi gửi tới địa chỉ trong action theo phương thức method. Trường không có name hoặc đang disabled sẽ không được gửi.

method="get": dữ liệu trên URL

<form action="https://www.google.com/search" method="get" target="_blank">
  <label for="q">Tìm trên Google:</label>
  <input type="search" id="q" name="q" value="học HTML tuhoctin">
  <button type="submit">Tìm</button>
</form>

Bấm Tìm: tab mới mở địa chỉ dạng https://www.google.com/search?q=học+HTML+tuhoctin. Tên trường q chính là tham số mà Google đọc. Cách này phù hợp tìm kiếm, lọc, phân trang vì người dùng có thể lưu, chia sẻ đường dẫn.

method="post": dữ liệu ẩn trong thân yêu cầu

<form action="/dang-nhap.php" method="post">
  <input type="email" name="email">
  <input type="password" name="mat_khau">
  <button type="submit">Đăng nhập</button>
</form>

enctype khi tải tệp

<form action="/tai-len.php" method="post" enctype="multipart/form-data">
  <input type="file" name="bai_nop" accept=".pdf,.docx">
  <button type="submit">Nộp bài</button>
</form>

Thiếu enctype="multipart/form-data", máy chủ chỉ nhận được tên tệp chứ không nhận nội dung tệp.

autocomplete và novalidate

<form autocomplete="on" novalidate onsubmit="alert('Gửi được dù email sai vì có novalidate'); return false;">
  <input type="email" name="email" placeholder="Nhập thử chữ sai định dạng" required>
  <button>Gửi</button>
</form>

novalidate thường dùng khi bạn tự viết kiểm tra bằng JavaScript và muốn hiển thị thông báo lỗi theo thiết kế riêng.