Thẻ Button Trong HTML - Học Html Cơ Bản đến Nâng Cao - VietTuts

Có thể bạn quan tâm

HTML là gì? Định dạng HTML

Nội dung chính

Thẻ Button trong HTML
Ví dụ thẻ button trong HTML
Ví dụ thẻ button trong HTML: gọi hàm JavaScript
Ví dụ thẻ button trong HTML: Submit Form
Ví dụ thẻ button trong HTML: Reset Form
Các thuộc tính của thẻ button trong HTML
Trình duyệt hỗ trợ

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 đó.

Ví dụ thẻ button trong HTML

<button name="button" type="button">Click Here</button>

Kết quả:

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ả:

Click Here

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ả:

Enter Name: Submit

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ả:

Enter Name: reset

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.