Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Thuộc tính biểu mẫu HTML


Chương này mô tả các thuộc tính khác nhau cho <form>phần tử HTML.


Thuộc tính hành động

Thuộc actiontính xác định hành động sẽ được thực hiện khi biểu mẫu được gửi.

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

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

Thí dụ

Khi gửi, hãy gửi dữ liệu biểu mẫu tới "action_page.php":

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Mẹo: Nếu actionthuộc tính bị bỏ qua, hành động được đặt thành trang hiện tại.


Thuộc tính mục tiêu

Thuộc targettính chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu.

Thuộc targettính có thể có một trong các giá trị sau:

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

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

Thí dụ

Tại đây, kết quả đã gửi sẽ mở ra trong một tab trình duyệt mới:

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

Thuộc tính phương pháp

Thuộc methodtính chỉ định phương thức HTTP sẽ được sử dụng khi gửi dữ liệu biểu mẫu.

Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (với method="get") hoặc dưới dạng giao dịch bài đăng HTTP (với method="post").

Phương thức HTTP mặc định khi gửi dữ liệu biểu mẫu là GET. 

Thí dụ

Ví dụ này sử dụng phương thức GET khi gửi dữ liệu biểu mẫu:

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

Thí dụ

Ví dụ này sử dụng phương thức POST khi gửi dữ liệu biểu mẫu:

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

Lưu ý về GET:

  • Thêm dữ liệu biểu mẫu vào URL, trong các cặp tên / giá trị
  • KHÔNG BAO GIỜ sử dụng GET để gửi dữ liệu nhạy cảm! (dữ liệu biểu mẫu đã gửi hiển thị trong URL!)
  • Độ dài của một URL bị giới hạn (2048 ký tự)
  • Hữu ích cho việc gửi biểu mẫu trong đó người dùng muốn đánh dấu kết quả
  • GET tốt cho dữ liệu không an toàn, chẳng hạn như chuỗi truy vấn trong Google

Ghi chú về BÀI ĐĂNG:

  • Thêm dữ liệu biểu mẫu bên trong nội dung của yêu cầu HTTP (dữ liệu biểu mẫu đã gửi không được hiển thị trong URL)
  • POST không có giới hạn về kích thước và có thể được sử dụng để gửi một lượng lớn dữ liệu.
  • Không thể đánh dấu các bài gửi biểu mẫu bằng POST

Mẹo: Luôn sử dụng POST 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!


Thuộc tính tự động hoàn thành

Thuộc autocompletetính chỉ định xem biểu mẫu có nên bật hay tắt tính năng tự động hoàn thành hay không.

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

Thí dụ

Một biểu mẫu có tính năng tự động điền vào:

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

Thuộc tính Novalidate

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

Khi xuất hiện, nó chỉ định rằng dữ liệu biểu mẫu (đầu vào) sẽ không được xác thực khi được gửi.

Thí dụ

Biểu mẫu có thuộc tính novalidate:

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

Bài tập HTML

Kiểm tra bản thân với các bài tập

Bài tập:

Thêm nút gửi và chỉ định rằng biểu mẫu sẽ được chuyển đến "/action_page.php".

<hình thức = "/ action_page.php">
Tên: <input type = "text" name = "name">
<>
</form>


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

Thuộc tính Sự miêu tả
bộ ký tự chấp nhận Chỉ định các mã hóa ký tự được sử dụng để gửi biểu mẫu
hoạt động Chỉ định nơi gửi dữ liệu biểu mẫu khi biểu mẫu được gửi
tự động hoàn thành Chỉ định xem biểu mẫu có nên bật hay tắt tính năng tự động hoàn thành hay không
enctype Chỉ định cách dữ liệu biểu mẫu sẽ được mã hóa khi gửi đến máy chủ (chỉ dành cho method = "post")
phương pháp Chỉ định phương thức HTTP để sử dụng khi gửi dữ liệu biểu mẫu
Tên Chỉ định tên của biểu mẫu
vô hiệu Chỉ định rằng biểu mẫu sẽ không được xác thực khi được gửi
quan hệ Chỉ định mối quan hệ giữa tài nguyên được liên kết và tài liệu hiện tại
Mục tiêu Chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu