<input type="submit">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Các phần tử <input> kiểu submit được hiển thị dưới dạng nút. Khi sự kiện click xảy ra (thường là do người dùng nhấp vào nút), user agent cố gắng gửi biểu mẫu đến máy chủ.

Giá trị

Thuộc tính value của phần tử <input type="submit"> chứa một chuỗi được hiển thị làm nhãn của nút. Các nút không có giá trị thực chất khác. value cung cấp accessible description cho nút.

Đặt thuộc tính value

html

<input type="submit" value="Send Request" />

Bỏ qua thuộc tính value

Nếu bạn không chỉ định value, nút sẽ có nhãn mặc định, được chọn bởi user agent. Nhãn này có thể là "Submit" hoặc "Submit Query." Đây là ví dụ về nút gửi có nhãn mặc định trong trình duyệt của bạn:

html

<input type="submit" />

Thuộc tính bổ sung

Ngoài các thuộc tính được chia sẻ bởi tất cả các phần tử <input>, ô nhập nút submit hỗ trợ các thuộc tính sau.

formaction

Một chuỗi chỉ ra URL để gửi dữ liệu đến. Điều này được ưu tiên hơn thuộc tính action trên phần tử <form> sở hữu <input>.

Thuộc tính này cũng có sẵn trên các phần tử <input type="image"> và <button>.

formenctype

Một chuỗi xác định phương thức mã hóa để dùng khi gửi dữ liệu biểu mẫu đến máy chủ. Có ba giá trị được phép:

application/x-www-form-urlencoded: Giá trị mặc định này, gửi dữ liệu biểu mẫu dưới dạng chuỗi sau khi mã hóa phần trăm văn bản bằng thuật toán như encodeURI().
multipart/form-data: Dùng API FormData để quản lý dữ liệu, cho phép gửi tệp đến máy chủ. Bạn phải dùng kiểu mã hóa này nếu biểu mẫu của bạn bao gồm bất kỳ phần tử <input> nào của type file (<input type="file">).
text/plain: Văn bản thuần; chủ yếu hữu ích chỉ để gỡ lỗi, để bạn có thể dễ dàng xem dữ liệu sẽ được gửi.

Nếu được chỉ định, giá trị của thuộc tính formenctype ghi đè thuộc tính enctype của biểu mẫu sở hữu.

Thuộc tính này cũng có sẵn trên các phần tử <input type="image"> và <button>.

formmethod

Một chuỗi chỉ ra phương thức HTTP để dùng khi gửi dữ liệu biểu mẫu; giá trị này ghi đè bất kỳ thuộc tính method nào được đặt trên biểu mẫu sở hữu. Các giá trị được phép là:

get: URL được xây dựng bằng cách bắt đầu với URL được đưa ra bởi thuộc tính formaction hoặc action, thêm dấu chấm hỏi ("?"), sau đó thêm dữ liệu biểu mẫu, được mã hóa như được mô tả bởi formenctype hoặc thuộc tính enctype của biểu mẫu. URL này sau đó được gửi đến máy chủ bằng yêu cầu HTTP get. Phương thức này hoạt động tốt cho các biểu mẫu chỉ chứa ký tự ASCII và không có tác dụng phụ. Đây là giá trị mặc định.
post: Dữ liệu biểu mẫu được bao gồm trong nội dung yêu cầu được gửi đến URL được đưa ra bởi thuộc tính formaction hoặc action bằng phương thức HTTP post. Phương thức này hỗ trợ dữ liệu phức tạp và tệp đính kèm.
dialog: Phương thức này được dùng để chỉ ra rằng nút đóng hộp thoại mà ô nhập được liên kết và không truyền dữ liệu biểu mẫu chút nào.

Thuộc tính này cũng có sẵn trên các phần tử <input type="image"> và <button>.

formnovalidate

Thuộc tính Boolean, khi có mặt, chỉ định rằng biểu mẫu không nên được xác thực trước khi gửi đến máy chủ. Điều này ghi đè giá trị của thuộc tính novalidate trên biểu mẫu sở hữu của phần tử.

Thuộc tính này cũng có sẵn trên các phần tử <input type="image"> và <button>.

Một chuỗi chỉ định tên hoặc từ khóa chỉ ra nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Chuỗi phải là tên của ngữ cảnh duyệt web (tức là tab, cửa sổ hoặc <iframe>). Giá trị được chỉ định ở đây ghi đè bất kỳ mục tiêu nào được đưa ra bởi thuộc tính target trên <form> sở hữu ô nhập này.

Ngoài các tên thực tế của tab, cửa sổ hoặc khung nội tuyến, có một vài từ khóa đặc biệt có thể được dùng:

_self: Tải phản hồi vào cùng ngữ cảnh duyệt web với ngữ cảnh chứa biểu mẫu. Điều này sẽ thay thế tài liệu hiện tại bằng dữ liệu nhận được. Đây là giá trị mặc định được dùng nếu không có giá trị nào được chỉ định.
_blank: Tải phản hồi vào ngữ cảnh duyệt web mới, không có tên. Thông thường đây là tab mới trong cùng cửa sổ với tài liệu hiện tại, nhưng có thể khác nhau tùy thuộc vào cấu hình của user agent.
_parent: Tải phản hồi vào ngữ cảnh duyệt web cha của ngữ cảnh hiện tại. Nếu không có ngữ cảnh cha, điều này hoạt động giống như _self.
_top: Tải phản hồi vào ngữ cảnh duyệt web cấp cao nhất; đây là ngữ cảnh duyệt web là tổ tiên cấp cao nhất của ngữ cảnh hiện tại. Nếu ngữ cảnh hiện tại là ngữ cảnh cấp cao nhất, điều này hoạt động giống như _self.

Thuộc tính này cũng có sẵn trên các phần tử <input type="image"> và <button>.

Sử dụng nút gửi

Các nút <input type="submit"> được dùng để gửi biểu mẫu. Nếu bạn muốn tạo nút tùy chỉnh rồi tùy chỉnh hành vi bằng JavaScript, bạn cần dùng <input type="button">, hoặc tốt hơn là phần tử <button>.

Nếu bạn chọn dùng các phần tử <button> để tạo các nút trong biểu mẫu, hãy nhớ điều này: Nếu <button> nằm trong <form>, nút đó sẽ được coi là nút "gửi". Vì vậy bạn nên có thói quen chỉ định rõ ràng nút nào là nút gửi.

Nút gửi cơ bản

Chúng ta sẽ bắt đầu bằng cách tạo biểu mẫu với nút gửi cơ bản:

html

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Send" />
  </div>
</form>

Điều này hiển thị như sau:

Hãy thử nhập một số văn bản vào trường văn bản, rồi gửi biểu mẫu.

Khi gửi, cặp tên/giá trị dữ liệu được gửi đến máy chủ. Trong trường hợp này, chuỗi sẽ là text=user-text, trong đó "user-text" là văn bản được người dùng nhập, được mã hóa để bảo toàn các ký tự đặc biệt. Nơi và cách dữ liệu được gửi phụ thuộc vào cấu hình của <form>; xem Gửi dữ liệu biểu mẫu để biết thêm chi tiết.

Thêm phím tắt bàn phím vào nút gửi

Phím tắt bàn phím, còn được gọi là phím truy cập và phím tương đương bàn phím, cho phép người dùng kích hoạt nút bằng cách nhấn phím hoặc tổ hợp phím trên bàn phím. Để thêm phím tắt bàn phím vào nút gửi—giống như bạn làm với bất kỳ <input> nào có nghĩa—bạn dùng thuộc tính toàn cục accesskey.

Trong ví dụ này, s được chỉ định là phím truy cập (bạn sẽ cần nhấn s cộng với các phím sửa đổi cụ thể cho tổ hợp trình duyệt/hệ điều hành của bạn). Để tránh xung đột với phím tắt của chính user agent, các phím sửa đổi khác nhau được dùng cho phím truy cập so với các phím tắt khác trên máy tính chủ. Xem accesskey để biết thêm chi tiết.

Đây là ví dụ trước với phím truy cập s được thêm vào:

html

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  </div>
</form>

Ví dụ, trong Firefox cho Mac, nhấn Control-Option-S kích hoạt nút Send, trong khi Chrome trên Windows dùng Alt+S.

Vấn đề với ví dụ trên là người dùng sẽ không biết phím truy cập là gì! Điều này đặc biệt đúng vì các phím sửa đổi thường không chuẩn để tránh xung đột. Khi xây dựng trang web, hãy đảm bảo cung cấp thông tin này theo cách không ảnh hưởng đến thiết kế trang web (ví dụ bằng cách cung cấp liên kết dễ tiếp cận trỏ đến thông tin về các phím truy cập của trang web). Thêm tooltip vào nút (dùng thuộc tính title) cũng có thể giúp ích, mặc dù nó không phải là giải pháp hoàn chỉnh cho mục đích khả năng tiếp cận.

Vô hiệu hóa và bật nút gửi

Để vô hiệu hóa nút gửi, hãy chỉ định thuộc tính disabled trên nó, như sau:

html

<input type="submit" value="Send" disabled />

Bạn có thể bật và vô hiệu hóa nút trong thời gian chạy bằng cách đặt disabled thành true hoặc false; trong JavaScript điều này trông như btn.disabled = true hoặc btn.disabled = false.

Note: Xem trang <input type="button"> để biết thêm ý tưởng về việc bật và vô hiệu hóa nút.

Giá trị	Một chuỗi được dùng làm nhãn của nút
Sự kiện	`click`
Thuộc tính chung được hỗ trợ	`type` và `value`
Thuộc tính IDL	`value`
Giao diện DOM	`HTMLInputElement`
Phương thức	Không có
Vai trò ARIA ngầm định	`button`