Thẻ HTML <button>

Hà Nguyễn

Đị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
Phần tử <button>	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>