Thẻ HTML <button>

Định nghĩa và cách sử dụng

<button> thẻ định nghĩa nút có thể nhấp.

Trong <button> Trong phần tử, bạn có thể đặt văn bản (và các thẻ như <i>, <b>, <strong>, <br>, <img> v.v.). Đây là <input> Những điều mà nút tạo phần tử không thể làm được!

Lưu ý:Luôn quy định cho <button> Đối tượng chỉ định Thuộc tính typeđể thông báo cho trình duyệt nó là loại nút nào.

Lưu ý:Bạn có thể dễ dàng thêm樣式 cho nút bằng CSS! Hãy xem ví dụ dưới đây hoặc truy cập vào Giáo trình nút CSS.

Giải thích chi tiết

<button> Thiết bị điều khiển với <input type="button"> cung cấp các chức năng mạnh mẽ hơn và nội dung phong phú hơn.<button> So với </button> Tất cả nội dung giữa các thẻ là nội dung của nút, bao gồm bất kỳ nội dung văn bản hoặc nội dung đa phương tiện nào có thể chấp nhận được. Ví dụ, chúng ta có thể bao gồm một hình ảnh và văn bản liên quan trong nút, để tạo ra một hình ảnh đánh dấu hấp dẫn trong nút.

Các phần tử cấm sử dụng duy nhất là image map, vì các hành động nhạy cảm với con trỏ và phím sẽ làm gián đoạn hành vi của nút biểu mẫu.

Luôn quy định cho nút Thuộc tính type.Giá trị mặc định của Internet Explorer là "button"mà trong các trình duyệt khác (bao gồm cả quy định W3C) giá trị mặc định là "submit".

Xin xem thêm:

Tài liệu tham khảo HTML DOM:Đối tượng Button

Giáo trình CSS:Đặt kiểu cho nút

Ví dụ

Như vậy đánh dấu nút có thể nhấn:

<button type="button">Nhấn tôi!</button>

Thử trực tiếp

Lưu ý:Cung cấp thêm ví dụ ở cuối trang.

Thuộc tính

Thuộc tính Giá trị Mô tả
autofocus autofocus Định nghĩa nút nên tự động nhận được sự tập trung khi trang được tải.
disabled disabled Định nghĩa nút nên bị vô hiệu hóa.
form form_id Định nghĩa nút thuộc biểu mẫu nào.
formaction URL

Định nghĩa nơi nào sẽ gửi dữ liệu biểu mẫu khi gửi biểu mẫu.

Chỉ áp dụng khi type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Định nghĩa cách mã hóa dữ liệu biểu mẫu trước khi gửi lên máy chủ.

Chỉ áp dụng khi type="submit".
formmethod
  • get
  • post

Định nghĩa cách gửi dữ liệu biểu mẫu (sử dụng phương pháp HTTP nào).

Chỉ áp dụng khi type="submit".
formnovalidate formnovalidate

Định nghĩa không nên kiểm tra dữ liệu biểu mẫu khi gửi.

Chỉ áp dụng khi type="submit".
formtarget
  • Tên khung

Định nghĩa nơi nào sẽ hiển thị phản hồi sau khi gửi biểu mẫu.

Chỉ áp dụng khi type="submit".
name Tên Định nghĩa tên của nút.
popovertarget element_id Định nghĩa phần tử cửa sổ bật lên cần gọi.
popovertargetaction
  • hide
  • show
  • toggle
 Định nghĩa hành động của元素 khi nút được nhấn.
type
  • button
  • reset
  • submit
 Định nghĩa loại của nút.
value Văn bản Định nghĩa giá trị mặc định của nút.

Các thuộc tính toàn cục

<button> Thẻ hỗ trợ Các thuộc tính toàn cục trong HTML.

Các thuộc tính sự kiện

<button> Thẻ hỗ trợ Các thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Không có.

Các ví dụ khác

Ví dụ 2

Đặt樣式 cho nút bằng CSS:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  biên: không;
  màu: trắng;
  mực: 15px 32px;
  canh giữa văn bản:;
  decoration văn bản: không;
  hiển thị: khối;
  cỡ chữ: 16px;
  khoảng cách: 4px 2px;
  con trỏ: ngón tay;
}
.button1 {màu nền: #4CAF50;} /* Xanh lục */
.button2 {màu nền: #008CBA;} /* Xanh dương */
</style>
</head>
<body>
<button class="button button1">Xanh lục</button>
<button class="button button2">Xanh dương</button>
</body>
</html>

Thử trực tiếp

Ví dụ 2

Đặt樣式 cho nút bằng CSS (với hiệu ứng khi trỏ):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  biên: không;
  màu: trắng;
  mực: 16px 32px;
  canh giữa văn bản:;
  decoration văn bản: không;
  hiển thị: khối;
  cỡ chữ: 16px;
  khoảng cách: 4px 2px;
  thời gian chuyển đổi: 0.4s;
  con trỏ: ngón tay;
}
.button1 {
  màu nền: trắng;
  màu: đen;
  biên: 2px đậm #4CAF50;
}
.button1:hover {
  màu nền: #4CAF50;
  màu: trắng;
}
.button2 {
  màu nền: trắng;
  màu: đen;
  biên: 2px đậm #008CBA;
}
.button2:hover {
  màu nền: #008CBA;
  màu: trắng;
}
</style>
</head>
<body>
<button class="button button1">Xanh lục</button>
<button class="button button2">Xanh dương</button>
</body>
</html>

Thử trực tiếp

Trình duyệt hỗ trợ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ