1. Mô tả:
Thẻ <button> trong HTML được sử dụng để tạo một nút trong biểu mẫu HTML. Bạn có thể đặt nội dung như văn bản hoặc hình ảnh trong thẻ <button> …….. </button>
Bạn phải luôn chỉ định thuộc tính type cho thẻ <button>. Vì các trình duyệt khác nhau sẽ sử dụng kiểu mặc định khác nhau cho phần tử nút.
Thẻ HTML Button có thể được sử dụng bên trong và bên ngoài biểu mẫu.
- Nếu bạn sử dụng nó trong biểu mẫu , nó hoạt động như nút gửi. Bạn cũng có thể sử dụng nó làm nút đặt lại.
- Nếu bạn sử dụng nó bên ngoài biểu mẫu , bạn có thể gọi hàm JavaScript trên nó.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Thẻ button trong HTML</title>
</head>
<body>
<form>
<button name = "button" value = "OK" type = "button">Hãy nhấn vào đây !!!</button>
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”wvGBmWo” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/wvGBmWo’>wvGBmWo</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
2. Thuộc tính:
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| autofocus | autofocus | Chỉ định rằng nút phải có tiêu điểm đầu vào khi trang tải. |
| disabled | disabled | Chỉ định nút bị tắt. |
| form | form_id | Chỉ định các biểu mẫu mà nút thuộc về. |
| formaction | URL | Chỉ định liên kết nơi biểu mẫu được gửi. |
| formenctype | applicationmultipart/form-datatext/plain | Chỉ định cách dữ liệu biểu mẫu được mã hóa trước khi gửi đến máy chủ. |
| formmethod | get post |
Chỉ định cách gửi dữ liệu biểu mẫu. |
| formnovalidate | formnovalidate | Chỉ định rằng dữ liệu biểu mẫu không được xác thực. |
| formtarget | _blank _self _parent _top |
Chỉ định nơi phản hồi sẽ được xác thực. |
| name | name | Chỉ định tên nút. |
| type | button reset submit |
Chỉ định loại nút. |
| value | value | Chỉ định giá trị ban đầu của nút. |
3. Một số ví dụ:
3.1 Ví dụ về nút HTML: Gọi hàm JavaScript
Hãy xem đoạn mã để gọi hàm JavaScript khi nhấp vào nút.
<button name="button" value="OK" type="button" onclick="hello()">Nhấn vào đây !!!</button>
<script>
function hello(){
alert("Xin chào!!! Bạn vừa thao tác click thành công");
}
</script>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”RwaNMJa” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/RwaNMJa’>RwaNMJa</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
3.2 Ví dụ về nút HTML: Gửi biểu mẫu
Hãy xem mã để gửi biểu mẫu khi nhấp vào nút.
<form> Nhập tên:<input type="text" name="name"/><br/> <button>Nộp</button> </form>[codepen_embed height=”265″ theme_id=”dark” slug_hash=”WNwbzMZ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/WNwbzMZ’>WNwbzMZ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
3.3 Ví dụ về nút HTML: Đặt lại biểu mẫu
Hãy xem mã để gửi biểu mẫu khi nhấp vào nút.
<form> Nhập tên:<input type="text" name="name"/><br/> <button type="reset">Đặt lại</button> </form>[codepen_embed height=”265″ theme_id=”dark” slug_hash=”abNzYYx” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/abNzYYx’>abNzYYx</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
