Thẻ HTML <button>
Định nghĩa và cách sử dụng
Thẻ <button>
xác định một nút có thể nhấp.
<button type="button">Click Me!</button>
Bên trong phần tử <button>
, bạn có thể đặt văn bản (và các thẻ như <i>
, <b>
, <strong>
, <br>
, <img>
, v.v...). Điều này là không thể với một nút được tạo bằng phần tử <input>
!
Mẹo: Luôn chỉ định thuộc tính type
cho phần tử <button>
, để cho trình duyệt biết đó là loại nút nào.
Bạn có thể dễ dàng tạo kiểu cho các nút bằng CSS! Xem các ví dụ bên dưới để biết thêm chi tiết.
Hỗ trợ trình duyệt
Phần tử <button> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
autofocus | autofocus | Chỉ định rằng một nút sẽ tự động lấy làm tiêu điểm (focus) khi trang load |
disabled | disabled | Chỉ định rằng một nút sẽ bị vô hiệu hóa |
form | form_id | Chỉ định dạng nút thuộc về |
formaction | URL | Chỉ định nơi gửi dữ liệu biểu mẫu khi biểu mẫu được gửi. Chỉ dành cho type="submit" |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Chỉ định cách dữ liệu biểu mẫu nên được mã hóa trước khi gửi đến máy chủ. Chỉ dành cho type="submit" |
formmethod | get post | Chỉ định cách gửi dữ liệu biểu mẫu (sử dụng phương thức HTTP nào). Chỉ dành cho type="submit" |
formnovalidate | formnovalidate | Chỉ định rằng dữ liệu biểu mẫu sẽ không được xác thực khi gửi. Chỉ dành cho type="submit" |
formtarget | _blank _self _parent _top framename | Chỉ định nơi hiển thị phản hồi sau khi gửi biểu mẫu. Chỉ dành cho type="submit" |
name | name | Chỉ định tên cho nút |
type | button reset submit | Chỉ định loại nút |
value | text | Chỉ định một giá trị ban đầu cho nút |
Thuộc tính Global
Thẻ <button>
cũng hỗ trợ thuộc tính Global trong HTML.
Thuộc tính sự kiện
Thẻ <button>
cũng hỗ trợ thuộc tính sự kiện trong HTML.
Các ví dụ khác
Sử dụng CSS để tạo kiểu cho các nút:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Sử dụng CSS để tạo kiểu cho các nút (với hiệu ứng di chuột):
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Cài đặt CSS mặc định
Không có.
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách hiển thị biểu tượng Bluetooth bị thiếu trên Taskbar Windows
Hôm qua -
Cách chọn kênh WiFi tốt nhất cho router
Hôm qua -
Spam là gì? Nó được hiểu như thế nào trong Zalo, LoL, Facebook…
Hôm qua -
Hướng dẫn mở rộng ảnh cực đơn giản không cần Photoshop
Hôm qua -
Lên đồ Ashe DTCL mùa 11, đồ Ashe mùa 11 DTCL
Hôm qua -
Sửa lỗi phím tắt Windows + Shift + S không hoạt động trên Windows 10
Hôm qua -
Cách dịch trang web sang tiếng Việt, tiếng Anh hoặc ngôn ngữ bất kỳ
Hôm qua 1 -
Cách khắc phục mã lỗi 0x80004005
Hôm qua -
Cách phân quyền cho người dùng trong MS SQL Server
Hôm qua -
Toán tử trong SQL
Hôm qua