Thí dụ
Một nút có thể nhấp được đánh dấu như sau:
Nhấp vào đây!
Hãy tự mình thử »
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Thẻ <button> xác định một nút có thể nhấp.
Bên trong một 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 với phần tử <input>!
Mẹo: Luôn chỉ định thuộc tính type cho phần tử <button>, để cho các trình duyệt biết đó là loại nút nào. Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
Mẹo: Bạn có thể dễ dàng tạo kiểu cho các nút với CSS! Nhìn vào các ví dụ dưới đây hoặc truy cập hướng dẫn nút CSS của chúng tôi. You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.
Hỗ trợ trình duyệt
Đúng | Đúng | Đúng | Đúng | Đúng |
Thuộc tính
lấy nét tự động | lấy nét tự động | Chỉ định rằng một nút sẽ tự động lấy lấy nét khi tải trang |
Vô hiệu hóa | Vô hiệu hóa | Chỉ định rằng một nút nên bị vô hiệu hóa |
hình thức | form_id | Chỉ định hình thành nút nào thuộc về |
hình thành | URL | Chỉ định nơi gửi dữ liệu biểu mẫu khi một biểu mẫu được gửi. Chỉ cho loại = "Gửi" |
Formtype | Ứng dụng/X-www-form-urlencoded mult multipart/form-data text/plain | Chỉ định cách mã hóa biểu mẫu nên được mã hóa trước khi gửi nó đến máy chủ. Chỉ cho loại = "Gửi" |
Formmethod | được đăng tải post | Chỉ định cách gửi dữ liệu biểu mẫu (phương thức HTTP nào sẽ sử dụng). Chỉ cho loại = "Gửi" |
Formnovalidate | Formnovalidate | Chỉ định rằng dữ liệu hình thức không nên được xác nhận khi nộp. Chỉ cho loại = "Gửi" |
mục tiêu hình thành | _blank _Self _parent _top framename _self _parent _top framename | Chỉ định nơi hiển thị phản hồi sau khi gửi biểu mẫu. Chỉ cho loại = "Gửi" |
Tên | Tên | Chỉ định tên cho nút |
loại hình | Đặt lại đặt lại reset submit | Chỉ định loại nút |
giá trị | chữ | Chỉ định giá trị ban đầu cho nút |
Thuộc tính toàn cầu
Thẻ <button> cũng hỗ trợ các thuộc tính toàn cầu trong HTML.
Thuộc tính sự kiện
Thẻ <button> cũng hỗ trợ các thuộc tính sự kiện trong HTML.
Nhiều ví dụ hơn
Thí dụ
Sử dụng các nút CSS để tạo kiểu:
.Button {& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-Block; & nbsp; kích thước phông chữ: 16px; & nbsp; Biên độ: 4px 2px; & nbsp; con trỏ: con trỏ;}
.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;
}
.
.button2 {background-color: #008CBA;} /* Blue */
Màu xanh xanh
Blue
Hãy tự mình thử »
Thí dụ
Sử dụng các nút CSS để tạo kiểu (có hiệu ứng di chuột):
.Button {& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 16px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-Block; & nbsp; kích thước phông chữ: 16px; & nbsp; Biên độ: 4px 2px; & nbsp; Thời gian chuyển tiếp: 0,4S; & nbsp; con trỏ: con trỏ;}
.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 {& nbsp; Màu nền: Trắng; & nbsp; màu đen; & nbsp; Biên giới: 2px rắn #4caf50;}
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1: di chuột {& nbsp; màu nền: #4caf50; & nbsp; màu trắng;}
background-color: #4CAF50;
color: white;
}
.Button2 {& nbsp; Màu nền: Trắng; & nbsp; màu đen; & nbsp; Biên giới: 2px rắn #008cba;}
background-color: white;
color: black;
border: 2px solid
#008CBA;
}
.Button2: di chuột {& nbsp; màu nền: #008cba; & nbsp; màu trắng;}
background-color: #008CBA;
color: white;
}
Sử dụng các nút CSS để tạo kiểu (có hiệu ứng di chuột):
Blue
Hãy tự mình thử »
Đúng
Thuộc tính
Thuộc tính
Giá trị
None.
Lưu ý: Nếu bạn sử dụng phần tử <button> ở dạng HTML, Internet Explorer, phiên bản trước 8, sẽ gửi văn bản giữa các thẻ <button>3 và <button>6, trong khi các trình duyệt khác sẽ gửi nội dung của thuộc tính <button>7.
Cú pháp
Giá trị thuộc tính
Giá trị
Choose your favorite subject:
HTML
CSS
Hãy tự mình thử »
Định nghĩa và cách sử dụng
Thuộc tính <button>2 chỉ định giá trị ban đầu cho <button>3 ở dạng HTML.
Lưu ý: Trong một biểu mẫu, nút và giá trị của nó chỉ được gửi nếu chính nút được sử dụng để gửi biểu mẫu. In a form, the button and its value is only submitted if the button itself was used to submit the form.
Hỗ trợ trình duyệt
giá trị | Đúng | Đúng | Đúng | Đúng | Đúng |
Lưu ý: Nếu bạn sử dụng phần tử <button> ở dạng HTML, Internet Explorer, phiên bản trước 8, sẽ gửi văn bản giữa các thẻ <button>3 và <button>6, trong khi các trình duyệt khác sẽ gửi nội dung của thuộc tính <button>7. If you use the <button> element in an HTML form, Internet Explorer, prior version 8, will submit the text between the <button>3 and <button>6 tags, while the other browsers will submit the content of the <button>7 attribute.
Cú pháp
Giá trị thuộc tính
giá trị | Đúng |
Lưu ý: Nếu bạn sử dụng phần tử <button> ở dạng HTML, Internet Explorer, phiên bản trước 8, sẽ gửi văn bản giữa các thẻ <button>3 và <button>6, trong khi các trình duyệt khác sẽ gửi nội dung của thuộc tính <button>7.