Thẻ <button> tạo nút bấm trong form HTML, cho phép người dùng gửi dữ liệu. Kiểu dáng tùy chỉnh bằng CSS.
Mọi form cần nút submit. Ví dụ: form đặt hàng thương mại điện tử cần nút "Đặt hàng" sau khi nhập thông tin giao hàng.
Hướng dẫn này trình bày thẻ <button>, các thuộc tính tùy chỉnh và ví dụ.
Ôn Tập Form HTML
Form thu thập dữ liệu (tên, ngày sinh, thẻ tín dụng...). Dùng <form> bao quanh, chứa nhiều <input> và phải có <button> để submit.
<form> Tên: <input type="text"> </form>
Thẻ <button>
Tạo nút bấm có thể chứa văn bản hoặc HTML bên trong. Phải có thẻ đóng/mở và thuộc tính type.
<button type="submit" value="Đăng Ký">Đăng Ký</button>
Hỗ trợ tốt trên mọi trình duyệt. Lưu ý: IE cũ (trước v9) gửi nội dung văn bản bên trong thẻ, các trình duyệt khác gửi thuộc tính value.
Các Thuộc Tính Của <button>
autofocus
Tự động focus khi tải trang: <button type="submit" autofocus>Nút Test</button>
disabled
Vô hiệu hóa nút (mờ, không bấm được): <button type="submit" disabled>Nút Test</button>
form
Liên kết nút với form bên ngoài qua id của form:
<form id="pizza"> Món: <input type="text" name="flavor"> </form> <button type="submit" form="pizza">Đặt Món</button>
formaction
Ghi đè action của form (chỉ khi type="submit"): <button type="submit" formaction="/xu-ly.php">Gửi</button>
formenctype
Xác định mã hóa dữ liệu khi submit (chỉ với method="post"): <button type="submit" formenctype="text/plain">Gửi</button>
formmethod
Ghi đè method của form (chỉ với type="submit"): get hoặc post. Ví dụ: <button type="submit" formmethod="post">Gửi</button>
formnovalidate
Bỏ qua kiểm tra hợp lệ khi submit: <button type="submit" formnovalidate>Gửi</button>
formtarget
Đích mở phản hồi server: _blank, _self, _parent, _top hoặc tên iframe. Ví dụ: <button formtarget="_blank">Gửi</button>
name
Tên duy nhất của nút: <button name="submit_order">Đặt Hàng</button>
type
Loại nút: button (tùy chỉnh), submit (gửi form), reset (xóa form). Mặc định là submit.
value
Giá trị gửi kèm khi submit: <button type="submit" value="GoiMon">Gọi Món</button>
Kết Luận
Thẻ <button> linh hoạt, hỗ trợ nhiều thuộc tính để tùy chỉnh hành vi và giao diện. Bạn đã nắm vững cách tạo nút bấm HTML chuyên nghiệp!