Thuộc tính hình thức đầu vào HTML

Chương này giới thiệu HTML <form> Các thuộc tính khác nhau của phần tử.

Thuộc tính Action

action Thuộc tính định nghĩa hành động sẽ được thực hiện khi gửi biểu mẫu.

Thường thì khi người dùng nhấn nút "Gửi", dữ liệu biểu mẫu sẽ được gửi đến tệp trên máy chủ.

Trong ví dụ dưới đây, dữ liệu biểu mẫu được gửi đến tệp có tên "action_page.php". Tệp này chứa các script máy chủ xử lý dữ liệu biểu mẫu:

Mô hình

Sau khi gửi, dữ liệu biểu mẫu sẽ được gửi đến "action_page.php":

<form action="/action_page.php">
  <label for="fname">Tên:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Họ:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

Thử ngay

Lưu ý:Nếu bỏ qua thuộc tính action, thì action sẽ được đặt thành trang hiện tại.

Thuộc tính Target

target Thuộc tính xác định nơi hiển thị phản hồi sau khi gửi biểu mẫu.

target Thuộc tính có thể được thiết lập với một trong các giá trị sau:

Giá trị Mô tả
_blank Phản hồi hiển thị trong cửa sổ hoặc thẻ mới.
_self Phản hồi hiển thị trong cửa sổ hiện tại.
_parent Phản hồi hiển thị trong khung cha.
_top Phản hồi hiển thị trong toàn bộ body của cửa sổ.
framename Phản hồi hiển thị trong iframe được chỉ định tên.

Giá trị mặc định là _selfnghĩa là phản hồi sẽ mở trong cửa sổ hiện tại.

Mô hình

Ở đây, kết quả gửi sẽ mở trong thẻ trình duyệt mới:

<form action="/action_page.php" target="_blank">

Thử ngay

Thuộc tính Method

Thuộc tính method xác định phương pháp HTTP cần sử dụng để gửi dữ liệu biểu mẫu.

Dữ liệu biểu mẫu có thể được sử dụng như các biến URL (sử dụng method="get"）hoặc như một giao dịch HTTP POST (sử dụng method="post"）gửi.

Phương pháp HTTP mặc định khi gửi dữ liệu biểu mẫu là GET。

Mô hình

Ví dụ này sử dụng phương pháp GET để gửi dữ liệu biểu mẫu:

<form action="/action_page.php" method="get">

Thử ngay

Mô hình

Ví dụ này sử dụng phương pháp POST để gửi dữ liệu biểu mẫu:

<form action="/action_page.php" method="post">

Thử ngay

Lưu ý về GET:

  • Chú thích dữ liệu biểu mẫu dưới dạng đối tượng/nhân (value)
  • Chắc chắn đừng sử dụng GET để gửi dữ liệu nhạy cảm！（Dữ liệu biểu mẫu gửi trong URL có thể nhìn thấy！）
  • Kích thước URL bị giới hạn (2048 ký tự)
  • Rất hữu ích cho việc gửi biểu mẫu mà người dùng muốn thêm kết quả vào dấu trang
  • GET phù hợp với dữ liệu không an toàn, chẳng hạn như chuỗi tìm kiếm trong Google

Lưu ý về POST:

  • Chú thích dữ liệu biểu mẫu vào phần nội dung yêu cầu HTTP (không hiển thị dữ liệu biểu mẫu gửi trong URL)
  • POST không có giới hạn về kích thước, có thể sử dụng để gửi lượng dữ liệu lớn.
  • Biểu mẫu gửi với POST không thể thêm vào dấu trang

Lưu ý:Nếu dữ liệu biểu mẫu chứa thông tin nhạy cảm hoặc thông tin cá nhân, hãy chắc chắn sử dụng POST!

Thuộc tính Autocomplete

autocomplete Thuộc tính xác định biểu mẫu có nên mở chức năng tự động hoàn thành hay không.

Khi kích hoạt chức năng tự động hoàn thành, trình duyệt sẽ tự động điền giá trị dựa trên giá trị mà người dùng đã nhập trước đó.

Mô hình

Kích hoạt biểu mẫu tự động điền:

<form action="/action_page.php" autocomplete="on">

Thử ngay

Thuộc tính Novalidate

novalidate Thuộc tính là một thuộc tính boolean.

Nếu đã thiết lập, nó định nghĩa không nên xác thực dữ liệu biểu mẫu khi gửi.

Mô hình

Biểu mẫu không thiết lập thuộc tính novalidate:

<form action="/action_page.php" novalidate>

Thử ngay

Danh sách tất cả các thuộc tính <form>

Thuộc tính Mô tả
accept-charset Định nghĩa mã ký tự mã hóa để gửi biểu mẫu.
action Định nghĩa nơi gửi dữ liệu biểu mẫu khi gửi biểu mẫu.
autocomplete Định nghĩa liệu biểu mẫu có nên mở chức năng tự động hoàn thành (điền) hay không.
enctype Định nghĩa cách mã hóa dữ liệu biểu mẫu khi gửi lên máy chủ (chỉ áp dụng cho method="post").
method Định nghĩa phương pháp HTTP để gửi dữ liệu biểu mẫu.
name Định nghĩa tên biểu mẫu.
novalidate Định nghĩa không nên xác thực biểu mẫu khi gửi.
rel Định nghĩa mối quan hệ giữa tài nguyên liên kết và tài liệu hiện tại.
target Định nghĩa nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu.