Thẻ HTML

Posted on by mtoplistChuyên mục:Top List

Đị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

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 loaddisableddisabledChỉ định rằng một nút sẽ bị vô hiệu hóaformform_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/plainChỉ đị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
postChỉ đị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
framenameChỉ đị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úttypebutton
reset
submitChỉ định loại nútvaluetextChỉ đị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ó.

mtoplist