Thẻ BUTTON trong HTML

• Trần Thị Vân
• 1756
• 06/07/2025

Chức năng của Thẻ BUTTON trong HTML

Thẻ BUTTON trong HTML dùng để hiển thị các nút giúp người dùng gửi yêu cầu, reset lại form hoặc một nút bình thường có thể tác động được.

Cú pháp của Thẻ BUTTON trong HTML

<button name="tennut" value="giatri" type="loai">vanban</button>

vanban: Văn bản hiển thị trên nút.

loai: Loại nút (reset, submit, button)

giatri: Giá trị của nút khi thực hiện POST hoặc GET dữ liệu.

tennut: Tên nút dùng để lấy dữ liệu thông qua tên đó.

Các loại type trong thẻ button

Type Submit trong thẻ button

<button name="btngui" value="gui" type="submit">GỬI</button>

Type Submit là nút sử dụng trong form, khi người dùng nhập thông tin xong sẽ nhấn vào nút submit để gửi đi.

Chạy Thử

Type Reset trong thẻ button

<button type="reset">NHẬP LẠI</button>

Trong trường hợp bạn muốn bỏ các thông tin đang nhập và muốn nhập lại từ đầu thì nhấn vào nút reset.

Chạy Thử

Type button trong thẻ button

<button name="button" value="OK" type="button" onclick="hello()">Click Here</button> 
<script> 
function hello(){ alert("hello html button"); } 
</script>

Chạy Thử

Nút loại button thường dùng kết hợp với script, dưới đây là các sự kiện:

Các thuộc tính quan trọng trong thẻ button HTML

Ngoài thuộc tính type, thẻ button trong HTML còn hỗ trợ nhiều thuộc tính khác giúp kiểm soát trạng thái, dữ liệu gửi đi và cách kết nối với biểu mẫu. Việc sử dụng đúng các thuộc tính này giúp nút bấm hoạt động linh hoạt hơn và cải thiện trải nghiệm người dùng.

Thuộc tính disabled trong thẻ button

Thuộc tính disabled dùng để vô hiệu hóa nút button, khiến người dùng không thể nhấn hoặc thực hiện hành động với nút đó. Thuộc tính này thường được sử dụng khi cần chờ xử lý dữ liệu, kiểm tra thông tin nhập hoặc tạm thời ngăn thao tác lặp lại.

Khi một button có thuộc tính disabled, trình duyệt sẽ hiển thị nút ở trạng thái không hoạt động và không gửi dữ liệu khi biểu mẫu được thực hiện.

<button disabled>Gửi thông tin</button>

Trong thực tế, thuộc tính này thường kết hợp với JavaScript để tự động bật lại nút sau khi người dùng hoàn thành một điều kiện nhất định.

Thuộc tính name và value của thẻ button

Thuộc tính name và value giúp xác định dữ liệu của button khi gửi biểu mẫu. Khi người dùng nhấn nút, giá trị tương ứng có thể được gửi đến máy chủ để xử lý.

Thuộc tính name đại diện cho tên dữ liệu, còn value chứa giá trị được truyền đi. Hai thuộc tính này thường được sử dụng với button có type="submit".

<button type="submit" name="action" value="save">Lưu dữ liệu</button>

Cách sử dụng này phù hợp với các biểu mẫu có nhiều nút xử lý khác nhau như lưu, cập nhật hoặc xóa dữ liệu.

Thuộc tính form liên kết button với biểu mẫu

Thuộc tính form cho phép button liên kết với một biểu mẫu thông qua thuộc tính id của thẻ form. Nhờ đó, button có thể nằm bên ngoài form nhưng vẫn thực hiện được chức năng gửi dữ liệu.

<form id="user-form">
  <input type="text" name="username">
</form>

<button type="submit" form="user-form">Gửi</button>

Thuộc tính này hữu ích khi thiết kế giao diện phức tạp, giúp bố trí nút bấm ở vị trí phù hợp mà không làm thay đổi cấu trúc biểu mẫu.

Cách kết hợp thẻ button với CSS để tạo giao diện đẹp

Thẻ button có thể kết hợp với CSS để thay đổi màu sắc, kích thước, kiểu chữ, đường viền và hiệu ứng khi người dùng tương tác. Đây là cách phổ biến để tạo ra các nút bấm phù hợp với giao diện website.

<button class="btn">Đăng ký ngay</button>

<style>
.btn {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

Khi thiết kế button, nên ưu tiên sự rõ ràng, kích thước dễ nhấn trên thiết bị di động và màu sắc có độ tương phản tốt để người dùng dễ nhận biết hành động cần thực hiện.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ BUTTON trong HTML.