Thẻ button trong HTML

457 lượt xem

     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]

 

Đánh giá post

Các kênh thông tin của chúng tôi

Disclaimer: Thông tin trong bài viết không phải là lời khuyên đầu tư từ Coin98 Insights. Hoạt động đầu tư tiền mã hóa chưa được pháp luật một số nước công nhận và bảo vệ. Các loại tiền số luôn tiềm ẩn nhiều rủi ro tài chính.

You cannot copy content of this page

Bạn muốn đọc tin riêng tư, hay hơn?
Đăng ký danh sách email của chúng tôi, chúng tôi sẽ gởi thêm tin theo xu hướng mới!
Cập nhật kiến thức và thông tin mới nhất về Affiliate & Tip kiếm tiền online hiệu quả .

PS: Cam kết bảo mật thông tin, không spam

Đăng ký bản tin

Không, cảm ơn, tôi không muốn đọc thêm tin
Contact Me on Zalo