<form>: Phần tử Form

Try it

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

Có thể sử dụng :valid và :invalid CSS pseudo-classes để tạo kiểu cho phần tử <form> dựa trên việc các elements bên trong form có hợp lệ hay không.

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

accept Đã lỗi thời

Các loại nội dung được server chấp nhận, cách nhau bởi dấu phẩy.

Note: Thuộc tính này đã bị loại bỏ và không nên sử dụng. Thay vào đó, hãy sử dụng thuộc tính accept trên các phần tử <input type=file>.

accept-charset

character encoding được server chấp nhận. Đặc tả cho phép một giá trị không phân biệt chữ hoa/thường là "UTF-8", phản ánh sự phổ biến của bộ mã hóa này (trước đây có thể chỉ định nhiều bộ mã hóa ký tự dưới dạng danh sách cách nhau bởi dấu phẩy hoặc khoảng trắng).

autocapitalize

Kiểm soát việc văn bản được nhập có tự động viết hoa hay không và nếu có thì theo cách nào. Xem trang thuộc tính toàn cục autocapitalize để biết thêm thông tin.

autocomplete

Cho biết các phần tử input có thể theo mặc định có giá trị được trình duyệt tự động điền hay không. Các thuộc tính autocomplete trên các phần tử form sẽ ghi đè nó trên <form>. Các giá trị có thể:

• off: Trình duyệt không thể tự động hoàn thành các mục nhập. (Trình duyệt có xu hướng bỏ qua điều này cho các form đăng nhập được nhận dạng; xem Quản lý tự động điền cho các trường đăng nhập.)
• on: Trình duyệt có thể tự động hoàn thành các mục nhập.

name

Tên của form. Giá trị không được là chuỗi rỗng, và phải là duy nhất trong số các phần tử form trong tập hợp form mà nó thuộc về, nếu có. Tên trở thành thuộc tính của các đối tượng Window, Document, và document.forms, chứa tham chiếu đến phần tử form.

rel

Kiểm soát các chú thích và loại liên kết mà form tạo ra. Các chú thích bao gồm external, nofollow, opener, noopener, và noreferrer. Các loại liên kết bao gồm help, prev, next, search, và license. Giá trị rel là danh sách cách nhau bởi khoảng trắng của các giá trị được liệt kê này.

Thuộc tính để gửi form

Các thuộc tính sau kiểm soát hành vi trong quá trình gửi form.

action

URL xử lý việc gửi form. Giá trị này có thể được ghi đè bởi thuộc tính formaction trên <button>, <input type="submit">, hoặc phần tử <input type="image">. Thuộc tính này bị bỏ qua khi method="dialog" được đặt.

enctype

Nếu giá trị của thuộc tính method là post, enctype là loại MIME của việc gửi form. Các giá trị có thể:

• application/x-www-form-urlencoded: Giá trị mặc định.
• multipart/form-data: Sử dụng điều này nếu form chứa các phần tử <input> với type=file.
• text/plain: Hữu ích cho mục đích gỡ lỗi.

Giá trị này có thể được ghi đè bởi các thuộc tính formenctype trên <button>, <input type="submit">, hoặc các phần tử <input type="image">.

method

Phương thức HTTP để gửi form. Các phương thức/giá trị được phép duy nhất (không phân biệt chữ hoa/thường):

• post: Phương thức POST; dữ liệu form được gửi dưới dạng nội dung yêu cầu.
• get (mặc định): GET; dữ liệu form được nối vào URL action với dấu phân cách ?. Sử dụng phương thức này khi form không có tác dụng phụ.
• dialog: Khi form nằm trong <dialog>, đóng hộp thoại và kích hoạt sự kiện submit khi gửi, mà không gửi dữ liệu hay xóa form.

Giá trị này bị ghi đè bởi các thuộc tính formmethod trên <button>, <input type="submit">, hoặc các phần tử <input type="image">.

novalidate

Thuộc tính Boolean này cho biết form không nên được xác thực khi gửi. Nếu thuộc tính này không được đặt (và do đó form được xác thực), nó có thể bị ghi đè bởi thuộc tính formnovalidate trên <button>, <input type="submit">, hoặc phần tử <input type="image"> thuộc form.

target

Cho biết nơi hiển thị phản hồi sau khi gửi form. Đây là tên/từ khóa cho một browsing context (ví dụ: tab, cửa sổ, hoặc iframe). Các từ khóa sau có ý nghĩa đặc biệt:

• _self (mặc định): Tải vào cùng browsing context hiện tại.
• _blank: Tải vào một browsing context mới chưa được đặt tên. Điều này cung cấp hành vi tương tự như đặt rel="noopener" không đặt window.opener.
• _parent: Tải vào browsing context cha của trang hiện tại. Nếu không có cha, hoạt động giống như _self.
• _top: Tải vào browsing context cấp cao nhất (tức là browsing context là tổ tiên của trang hiện tại và không có cha). Nếu không có cha, hoạt động giống như _self.
• _unfencedTop: Tải phản hồi từ một form bên trong fenced frame được nhúng vào frame cấp cao nhất (tức là vượt qua gốc của fenced frame, không giống như các đích đến dành riêng khác). Chỉ khả dụng bên trong fenced frames.

Giá trị này có thể bị ghi đè bởi thuộc tính formtarget trên <button>, <input type="submit">, hoặc phần tử <input type="image">.

Ví dụ

<!-- Form sẽ gửi yêu cầu GET đến URL hiện tại -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form sẽ gửi yêu cầu POST đến URL hiện tại -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form với fieldset, legend, và label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Hướng dẫn HTML forms
• Các phần tử khác được sử dụng khi tạo form: <button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.
• Lấy danh sách các phần tử trong form: HTMLFormElement.elements
• ARIA: Vai trò Form
• ARIA: Vai trò Search