Thẻ <nút> HTML
Ví dụ
Một nút có thể nhấp được đánh dấu như sau:
<button type="button">Click Me!</button>
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thẻ <button> xác định nút có thể nhấp được.
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 đó 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.
Mẹo: Bạn có thể dễ dàng tạo kiểu cho các nút bằng CSS! Hãy xem các ví dụ bên dưới hoặc truy cập hướng dẫn về Nút CSS của chúng tôi.
Hỗ trợ trình duyệt
| Element | |||||
|---|---|---|---|---|---|
| <button> | Yes | Yes | Yes | Yes | Yes |
Thuộc tính
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that a button should automatically get focus when the page loads |
| disabled | disabled | Specifies that a button should be disabled |
| form | form_id | Specifies which form the button belongs to |
| formaction | URL | Specifies where to send the form-data when a form is submitted. Only for type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how form-data should be encoded before sending it to a server. Only for type="submit" |
| formmethod | get post |
Specifies how to send the form-data (which HTTP method to use). Only for type="submit" |
| formnovalidate | formnovalidate | Specifies that the form-data should not be validated on submission. Only for type="submit" |
| formtarget | _blank _self _parent _top framename |
Specifies where to display the response after submitting the form. Only for type="submit" |
| popovertarget | element_id | Specifies a which popover element to invoke |
| popovertargetaction | hide show toggle |
Specifies what happens to the popover element when the button is clicked |
| name | name | Specifies a name for the button |
| type | button reset submit |
Specifies the type of button |
| value | text | Specifies an initial value for the button |
Thuộc tính chung
Thẻ <button> cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <button> cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Thêm ví dụ
Ví dụ
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:
#04AA6D;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button
button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html> Hãy tự mình thử »Ví dụ
Sử dụng CSS để tạo kiểu cho các nút (có 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 #04AA6D;
}
.button1:hover {
background-color:
#04AA6D;
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> Hãy tự mình thử »Trang liên quan
Tham chiếu DOM HTML: Đối tượng nút
Hướng dẫn CSS: Tạo kiểu cho các nút
Cài đặt CSS mặc định
Không có.
