Thẻ Button trong HTML
Nút (button) là một phần không thể thiếu trên các trang web và ứng dụng, được thiết kế cho các mục đích khác nhau chẳng hạn như gửi hay reset lại biểu mẫu HTML, thực hiện các hành động tương tác như hiển thị hoặc ẩn nội dung nào đó trên trang web khi người dùng click chọn nút, chuyển hướng người dùng tới trang web khác. Để tìm hiểu về Thẻ Button trong HTML, mời bạn đọc tham khảo bài viết dưới đây của eLib
Mục lục nội dung
1. Thẻ Button trong HTML
Thẻ <button> trong HTML được sử dụng để tạo các nút có thể click bên trong form trên trang web của bạn. Bạn có thể đặt nội dung như văn bản hoặc hình ảnh vào bên trong thẻ <button>........</button>.
Bạn nên luôn chỉ định thuộc tính type cho một thẻ <button>. Vì các trình duyệt sử dụng kiểu mặc định khác nhau cho phần tử button.
Thẻ HTML Button có thể được sử dụng bên trong hoặc bên ngoài form.
Bên trong form, nó có tác dụng như một nút gửi hoặc reset form.
Bên ngoài form, nó có thể gọi hàm JavaScript để thực hiện một nhiệm vụ nào đó.
2. Ví dụ thẻ button trong HTML
<button name="button" type="button">Click Here</button>
Kết quả:
3. Ví dụ thẻ button trong HTML: gọi hàm JavaScript
Trong ví dụ này, khi bạn click nút click here trình duyệt sẽ hiển thị thông báo với nội dung "hello html button".
<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>
<script>
function hello(){
alert("hello html button");
}
</script>
Kết quả:
4. Ví dụ thẻ button trong HTML: Submit Form
Trong ví dụ này, khi bạn click nút Submit, các thông tin trong form sẽ được gửi đến máy chủ.
<form>
Enter Name:<input type="text" name="name"/><br/>
<button>Submit</button>
</form>
Kết quả:
5. Ví dụ thẻ button trong HTML: Reset Form
Trong ví dụ này, khi bạn click vào nút resut thì những phần tử trong form được reset về giá trị ban đầu.
<form>
Enter Name:<input type="text" name="name"/><br/>
<button type="reset">reset</button>
</form>
Kết quả:
6. Các thuộc tính của thẻ button trong HTML
Thẻ <button> hỗ trợ toàn bộ thuộc tính chung như các thẻ HTML khác và một số thuộc tính bổ xung trong bảng sau:
Thuộc tính | Mô tả |
---|---|
autofocus | Chỉ định rằng một nút sẽ tự động focus trong khi tải trang. |
disabled | Chỉ định một button sẽ bị vô hiệu hóa. |
form | Chỉ định button này thuộc về một hoặc nhiều form. |
formaction | Được sử dụng cho kiểu submit. Nó chị định rằng dữ liệu của form sẽ được gửi đi đâu khi form được submit. |
formmethod | Chỉ đinh dữ liệu của form được gửi như thế nào. |
formenctype | Nó chỉ định cách dữ liệu của form nên được mã hóa trước khi gửi nó tới máy chủ. |
formnovalidate | Chỉ định rằng dữ liệu của form nên được kiểm tra tính hợp lệ khi submit. |
formtarget | Chỉ định dữ liệu trả về sẽ được hiển thị ở đâu sau khi submit form. |
name | Chỉ định tên của button. |
type | Chỉ định kiểu của button. |
value | Chỉ định giá trị của button. |
7. Trình duyệt hỗ trợ
Chrome | Firefox | IE | Opera | Safari | Android |
---|---|---|---|---|---|
Có | Có | Có | Có | Có | Có |
Trên đây là bài viết của eLib.VN về Thẻ Button trong HTML. Thẻ button là một thẻ được dùng khá nhiều và tiện dụng trong HTML. Nó giúp ta có thể xác nhận liên kết với người dùng hiểu người dùng hơn. Mọi người hãy sử dụng thẻ tag này một cách hợp lí để có thể tạo được kêt nối và nhiều công dụng khác để có một trang web nhiều chức năng hỗ trợ người sử dụng nhất nhé.
Tham khảo thêm
- doc Thẻ Marquee trong HTML
- doc Thẻ Textarea trong HTML
- doc Doctype HTML
- doc Thẻ title trong HTML
- doc Thẻ meta trong HTML
- doc Thẻ Div trong HTML
- doc Thẻ pre trong HTML
- doc Thẻ code trong HTML
- doc Thẻ Label trong HTML
- doc Thẻ Input trong HTML
- doc Thẻ HR trong HTML
- doc Thẻ BR trong HTML
- doc Thẻ Script trong HTML
- doc Thẻ NoScript trong HTML
- doc Thẻ b trong HTML
- doc Thẻ Quotes trong HTML