Tóm Tắt
Thẻ Button là gì
Thẻ button là một thẻ dùng để định nghĩa một nút nhấn trong HTML. Khi bạn tạo một trang web cần sự xác nhận của người dùng như đăng ký, đăng nhập,… chúng ta cần nút button để xác nhận, truyền thông tin đến cơ sở dữ liệu. Và thẻ tag button thường đi kèm với thẻ form.
Đây là ví dụ:
1
<
button
type
=
“button”
onclick
=
“alert(‘Bạn đã nhấn nút OK’)”
>
OK
<
/
button
>
Và đây là kết quả
Như mọi người đã thấy, chúng ta đã tạo ra một nút nhấn “OK” , và gọi thuộc tính Alert để xuất thông báo” bạn đã nhấn vào nút OK”
Nếu như không gọi thuộc tính thông báo thì khi nhấn vào nút OK sẽ không xuất hiện sự kiện gì. Bạn cũng có thể gọi thuộc tính khác như truyền vào một đường dẫn , gọi cơ sở dữ liệu,…. Để khi nhấn vào thì thông tin sẽ được hiển thị lên.
Cú pháp
<button type=’button”>Tên hiển thị nút nhấn</button>
Những trình duyệt hỗ trợ thẻ <button>
HTML Tag
”<button>”
Yes
Yes
Yes
Yes
Yes
Hiện tại các trình duyệt đều hỗ trợ thẻ tag button nên hỗ trợ mọi người rất nhiều trong việc tạo ra những sản phẩm, trang web đẹp nhất.
Thuộc tính hỗ trợ thẻ tag button trong HTML5
Hiện có nhiều thuộc tính mới được hỗ trợ trong HTML5 như <autofocus>, <disabled>, <form>, <type>, <name>,…..
Xem thêm: tạo form đăng ký thành viên đẹp
Sự kiện của thẻ button trong HTML
Thẻ tag button đều hỗ trợ các thuộc tính sự kiện nên mọi người có thể sử dụng để tạo đưuọc trang web đẹp hơn và ổn định hơn nha.
Lưu ý:
Có một cách nhanh hơn giúp mọi người khi sử dụng thẻ button đó là sử dụng button bootstrap:
Khi khai báo mọi người cần khai báo thêm thư viện bootstrap là có thể dùng được. bootstrap giúp mọi người có thể tạo được nút nhấn đẹp nhất nhưng không tốn quá nhiều thời gian định dạng css hay gì khác.
>>Những thẻ buton boostrap đẹp
Dưới đây mình sử dụng CSS Boostrap để trang trí cho button đẹp hơn.
>>Tìm hiểu về boostrap
1
2
3
4
5
6
7
8
9
10
11
12
13
<
div
class
=
“container”
>
<
h2
>
Button
Styles
<
/
h2
>
<
button
type
=
“button”
class
=
“btn”
>
OK
<
/
button
>
<
button
type
=
“button”
class
=
“btn btn-default”
>
OK
<
/
button
>
<
button
type
=
“button”
class
=
“btn btn-primary”
>
OK
<
/
button
>
<
button
type
=
“button”
class
=
“btn btn-success”
>
OK
<
/
button
>
<
button
type
=
“button”
class
=
“btn btn-info”
>
OK
<
/
button
>
<
button
type
=
“button”
class
=
“btn btn-warning”
>
OK
<
/
button
>
<
button
type
=
“button”
class
=
“btn btn-danger”
>
OK
<
/
button
>
<
button
type
=
“button”
class
=
“btn btn-link”
>
OK
<
/
button
>
<
/
div
>
<
/
body
>
Và đây là kết quả
Như mọi người đã thấy chúng ta chỉ cần gọi thư viện bootstrap thì đã có nhiều kiểu nút nhấn khác nhau. Rất đẹp và nhanh đúng không mọi người.
Cú pháp
<button type=”button” class=”tên loại nút cần tạo có trong thư viện”>Tên hiển thị nút nhấn</button>
Hôm nay mình chỉ giới thiệu sơ về bootstrap, mình sẽ nói rõ hơn ở một bài đăng khác nhé.
>> Thuộc tính button bootstrap trong html
Kết luận
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é.
Cuộc thảo luận về thẻ button xin được dừng ở đây, hẹn mọi người ở một thảo luận khác nhé. Mình sẽ nói rõ hơn về bootstrap và các vấn đề khác về HTML nha. Mọi thắc mắc và góp ý kiến mọi người comment bên dưới nhé. Cảm ơn mọi người đã đọc bài….
Xem thêm: Hướng Dẫn Thẻ Canvas Là Gì? Công Dụng Của Thẻ Canvas
Thẻ Button Là Gì? Công Dụng Của Thẻ Button
5
(100%)
3
votes
