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 ChromeMS EdgeFirefoxSafariOpera

Thuộc tính

Thuộc tínhGiá trịMô tả
autofocusautofocusChỉ định rằng một nút sẽ tự động lấy làm tiêu điểm (focus) khi trang load
disableddisabledChỉ định rằng một nút sẽ bị vô hiệu hóa
formform_idChỉ định dạng nút thuộc về
formactionURLChỉ đị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"
formenctypeapplication/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"
formmethodget
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"
formnovalidateformnovalidateChỉ đị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"
namenameChỉ định tên cho nút
typebutton
reset
submit
Chỉ định loại nút
valuetextChỉ đị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ứ Tư, 01/06/2022 08:34
558 👨 897
0 Bình luận
Sắp xếp theo