Thẻ nút HTML được sử dụng để tạo nút có thể nhấp trong biểu mẫu HTML. Nó cho phép người dùng gửi thông tin dưới dạng biểu mẫu đến một trang web. Kiểu của nút có thể được kiểm soát bằng CSS.
Khi bạn đang tạo biểu mẫu trên một trang web, bạn sẽ cần tạo một nút có thể nhấp để người dùng có thể gửi biểu mẫu. Ví dụ:bạn có thể có một biểu mẫu đặt hàng trên một trang web thương mại điện tử thu thập thông tin giao hàng từ người dùng. Sau khi người dùng đã điền vào các biểu mẫu, sẽ có một nút để họ nhấp vào để gửi thông tin của họ.
Đó là nơi chứa HTML <button> thẻ vào. Thẻ nút được sử dụng trong HTML để tạo nút có thể nhấp trong biểu mẫu HTML và cho phép người dùng gửi thông tin trong biểu mẫu đến một trang web.
Trong hướng dẫn này, chúng ta sẽ thảo luận về cách sử dụng <button> thẻ trong HTML . Chúng tôi cũng sẽ thảo luận về các thuộc tính bạn có thể sử dụng để tạo nút tùy chỉnh và khám phá một vài ví dụ về các thuộc tính này trong thực tế.
Trình làm mới biểu mẫu HTML
HTML Biểu mẫu được sử dụng để thu thập các loại đầu vào khác nhau của người dùng, chẳng hạn như tên, số điện thoại hoặc địa chỉ, trên một trang web.
Mỗi biểu mẫu chứa các yếu tố đầu vào cho phép người dùng gửi thông tin đến trang web. Ví dụ:một trang web có thể có biểu mẫu đặt hàng chứa các thành phần biểu mẫu để thu thập tên người dùng, ngày sinh, thông tin thẻ tín dụng, v.v.
<form> được sử dụng để tạo biểu mẫu trong HTML . Đây là một ví dụ đơn giản về <form> đang được sử dụng để tạo biểu mẫu thu thập tên người dùng:
<form> Name: <input type="text"> </form>
Một thẻ biểu mẫu có thể bao gồm nhiều <input> hoặc các yếu tố đầu vào khác của người dùng, chẳng hạn như các hộp chọn. Ngoài ra, biểu mẫu phải bao gồm <button> khi được nhấp vào, thẻ này sẽ gửi thông tin của người dùng đến trang web.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Nút HTML
<button> cho phép bạn tạo một nút có thể nhấp trong HTML biểu mẫu. Ví dụ:nếu bạn có biểu mẫu thu thập thông tin thanh toán, bạn có thể có <button> ở cuối biểu mẫu để người dùng có thể gửi dữ liệu đó đến trang web của bạn.
<button> thẻ phải có thẻ bắt đầu và thẻ kết thúc, đồng thời phải bao gồm giá trị cho loại type thuộc tính. Loại type , như chúng ta sẽ thảo luận sau, cho biểu mẫu biết loại nút nào nên được hiển thị.
Đây là một ví dụ về HTML <button> thẻ đang hoạt động:
<button type="submit" value="Sign Up">Sign Up</button>
Đây là cách nút của chúng tôi xuất hiện trên một trang web:
Bây giờ chúng ta có một nút trên trang web của mình, người dùng có thể gửi thông tin họ đã nhập vào biểu mẫu mà họ đã điền.
<button> thẻ được hỗ trợ trong tất cả các trình duyệt chính, có nghĩa là bạn có thể sử dụng nó mà không cần lo lắng về khả năng tương thích của trình duyệt. Tuy nhiên, cần lưu ý rằng các trình duyệt khác nhau diễn giải <button> gắn thẻ khác nhau. Ví dụ:Internet Explorer, trước phiên bản 9, sẽ gửi văn bản giữa thẻ mở và thẻ đóng của <button> , trong khi các trình duyệt khác gửi nội dung của giá trị type thuộc tính.
Thuộc tính thẻ nút HTML
HTML <button> thẻ bao gồm một số thuộc tính có thể được sử dụng để tạo một nút tùy chỉnh. Ngoài ra, <button> thẻ hỗ trợ các thuộc tính toàn cục trong HTML5 . Hãy cùng khám phá HTML chính <button> chuyên sâu các thuộc tính thẻ.
Tự động lấy nét
autofocus thuộc tính được sử dụng để chỉ định rằng một nút sẽ tự động nhận tiêu điểm khi trang web được tải. Đây là cú pháp cho autofocus thuộc tính:
<button type="submit" autofocus>Test Button!</button>
Đã tắt
disabled thuộc tính vô hiệu hóa nút, có nghĩa là người dùng không thể tương tác với phần tử. Đây là cú pháp cho disabled thuộc tính:
<button type="submit" disabled>Test Button!</button>
Như bạn có thể thấy bên dưới, nút của chúng tôi chuyển sang màu xám và không thể nhấp vào được:
Biểu mẫu
form thuộc tính được sử dụng để liên kết một phần tử nút với một biểu mẫu. Giá trị của form thuộc tính phải bằng id của biểu mẫu mà biểu mẫu có liên quan. Dưới đây là một ví dụ về thuộc tính biểu mẫu liên kết nút gửi với pizza của chúng tôi hình thức:
<form id="pizza"> Flavor: <input type="text" name="flavor"> </form> <button type="submit" form="pizza">Submit Order</button>
form thuộc tính đã liên kết nút của chúng tôi với biểu mẫu bằng giá trị id pizza . Vì vậy, khi chúng tôi nhấp vào nút của mình, biểu mẫu của chúng tôi với id pizza sẽ được gửi.
Formaction
formaction chỉ định URL của một chương trình sẽ xử lý thông tin được gửi bởi nút. Thuộc tính này chỉ có thể được sử dụng nếu type thuộc tính trong nút của bạn bằng với submit .
Đây là một ví dụ về formaction thuộc tính đang sử dụng:
<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">Submit Order</button>
Formenctype
formenctype thuộc tính chỉ định cách dữ liệu biểu mẫu sẽ được mã hóa khi nó được gửi đến máy chủ. Thuộc tính này chỉ nên được sử dụng khi sử dụng “method=’post’ Thuộc tính ”trong biểu mẫu của bạn.
Đây là một ví dụ về formenctype thuộc tính được sử dụng để gửi văn bản thuần túy đến máy chủ khi nút của chúng tôi được nhấp vào:
<button type="submit" formenctype="text/plain">Submit Order</button>
Formmethod
formmethod được sử dụng để chỉ định HTTP phương pháp trình duyệt sẽ sử dụng để gửi biểu mẫu. Thuộc tính này chỉ nên được sử dụng với “type=’submit’ Thuộc tính ”.
Hai giá trị được chấp nhận cho formmethod thuộc tính get và post . Nếu bạn muốn truy xuất thông tin hoặc thực thi một HTTP GET , bạn nên sử dụng get; nếu bạn muốn gửi thông tin hoặc thực thi một HTTP POST , bạn nên sử dụng post .
Đây là cú pháp cho formmethod thuộc tính:
<button type="submit" formmethod="post">Submit Order</button>
Formnovalidate
formnovalidate được sử dụng để chỉ định rằng dữ liệu biểu mẫu sẽ không được xác thực khi nó được gửi. Ví dụ:nếu bạn muốn chấp nhận đầu vào của người dùng ngay cả khi họ chưa điền vào tất cả các trường, bạn nên sử dụng formnovalidate thuộc tính.
Đây là một ví dụ về formnovalidate đang hoạt động:
<button type="submit" formnovalidate>Submit Order</button>
Mục tiêu biểu mẫu
formtarget đặt vị trí đích cho phản hồi mà máy chủ gửi sau khi biểu mẫu đã được gửi. Các giá trị được chấp nhận cho thuộc tính này là:_blank , _self , _parent , _top hoặc tên của uframe của bạn.
Đây là cú pháp cho formtarget thuộc tính:
<button formtarget="_blank">Submit Order</button>
Tên
name được sử dụng để chỉ định tên của nút (phải là duy nhất so với tất cả các tên phần tử biểu mẫu khác) và sử dụng cú pháp sau:
<button name="submit_order">Submit Order</button>
Loại
Loại type chỉ định loại của nút. Có ba loại nút có thể được sử dụng:button , submit và reset . Đây là cú pháp cho type thẻ:
<button type="submit">Submit Order</button>
Giá trị
Giá trị type chỉ định giá trị ban đầu của nút. Đây là cú pháp cho giá trị type thẻ:
<button type="submit" value="Submit Order">Submit Order</button>
Kết luận
<button> có thể được sử dụng để tạo một nút có thể nhấp trong HTML biểu mẫu. Ví dụ:nếu bạn có biểu mẫu cho phép người dùng đặt hàng bánh pizza, bạn sẽ muốn có <button> cho phép người dùng gửi thông tin về đơn đặt hàng của họ khi họ đã sẵn sàng.
Trong hướng dẫn này, chúng tôi đã khám phá cách sử dụng <button> thẻ trong HTML . Chúng tôi cũng đã thảo luận về các thuộc tính chính có thể được sử dụng với thẻ để tạo các nút tùy chỉnh và khám phá một vài ví dụ về cách có thể sử dụng các thuộc tính đó.
Bây giờ, bạn đã sẵn sàng tạo các nút bằng HTML <button> gắn thẻ như một chuyên gia!