Học CNTT HTML

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ó.

Thứ Ba, 31/05/2022 10:03
5 ★ 59 👨 3.083

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
❖ HTML
HTML