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 đượ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 đó. <button name="button" type="button">Click Here</button>
Kết quả:
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ả:
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ả:
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ả:
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.
|
Trình duyệt hỗ trợ
Thẻ
| Chrome
| IE
| Firefox
| Opera
| Safari
| <button>
| Yes
| Yes
| Yes
| Yes
| Yes
|
Thẻ button trong HTML cũng hỗ trợ các thuộc tính chung và thuộc tính sự kiện trong HTML.
- Trang chủ
- Tham khảo
- Tag html
- <button>
Định nghĩa và sử dụng- Tag <button> được dùng để tạo nút nhấn.
- Tag <button> có thể chứa text hay image,
đây là điểm khác biệt giữa tag này và <input />
Sự khác nhau giữa HTML và XHTML
HTML4.01 | XHTML1.0 | XHTML1.1 |
---|
Không có sự khác biệt
|
Cấu trúc<button type=""></button> Html viết:<button type="button">Click me!</button> Hiển thị trình duyệt:Trình duyệt hỗ trợ<button> được hỗ trợ trong đa số các trình duyệt. Tuy nhiên nếu chúng ta sử dụng <button> trong form HTML để submit giá trị, khi đó các trình duyệt khác nhau sẽ submit theo các cách khác nhau. VD: Internet Explorer sẽ submit
giá trị giữa <button> và </button>, còn các trình duyệt khác sẽ submit giá trị theo tham số value khai báo bên trong <button> Thuộc tínhCách sử dụng: <button thuoctinh="giatri"></button> Thuộc tính tùy chọn
Thuộc tính | Giá trị | Ví dụ | Mô tả |
---|
disabled
| disabled
| disabled="disabled"
| Chỉ định vô hiệu button
| name
| tên
| name="submitBtn"
| Chỉ định tên cho button
| type
| button reset submit
| type="submit"
| Chỉ định kiểu của button button: nút nhấn reset: nút reset form submit: nút submit form.
| value
| giá trị, có thể bằng chữ hay số
| value="Gửi"
| Chỉ định các giá trị cơ bản của button. Không hỗ trợ trong trình duyệt IE
|
Thuộc tính tổng quát (xem thêm)
Thuộc tính | Giá trị | Ví dụ | Mô tả |
---|
accesskey
| Ký tự
| accesskey="g"
| Xác định một phím tắc để truy cập vào một thành phần.
| class
| Tên class
| class="section"
| Tên class
| dir
| rtl
ltr
| dir="rtl"
| Xác định hướng văn bản cho các nội dung trong một thành phần.
| id
| Tên id
| id="layout"
| Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML
| lang
| Mã ngôn ngữ
| lang="vi"
| Xác định mã ngôn ngữ cho nội dung trong một thành phần.
| style
| Kiểu định dạng
| style="color: red"
| Xác định một định dạng cho một thành phần.
| tabindex
| Số
| tabindex="5"
| Xác định thứ tự tab của một thành phần.
| title
| Text
| title="Đây là title"
| Xác định thêm thông tin cho thành phần.
| xml:lang
| Mã ngôn ngữ
| lang="vi"
| Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.
|
Thuộc tính sự kiệnKhông được hỗ trợ trong DTD Strict
Thuộc tính | Giá trị | Ví dụ | Mô tả |
---|
onclick
| Code script
| onclick="code"
| Script chạy khi click chuột.
| ondblclick
| Code script
| ondblclick="code"
| Script chạy khi double click chuột.
| onmousedown
| Code script
| onmousedown="code"
| Script chạy khi button chuột được nhấn.
| onmousemove
| Code script
| onmousemove="code"
| Script chạy khi di chuyển con trỏ chuột.
| onmouseout
| Code script
| onmouseout="code"
| Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.
| onmouseover
| Code script
| onmouseover="code"
| Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần.
| onmouseup
| Code script
| onmouseup="code"
| Script chạy khi button chuột được thả ra.
| onkeydown
| Code script
| onkeydown="code"
| Script chạy khi nút trên bàn phím được nhấn.
| onkeypress
| Code script
| onkeypress="code"
| Script chạy khi nút trên bàn phím được nhấn và thả ra.
| onkeyup
| Code script
| onkeyup="code"
| Script chạy khi nút trên bàn phím được thả ra.
| |