Thẻ button trong HTML

     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>

See the Pen wvGBmWo by DavidKhai (@davidkhai) on CodePen.dark

 

     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>  

See the Pen RwaNMJa by DavidKhai (@davidkhai) on CodePen.dark

 

          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>   

See the Pen WNwbzMZ by DavidKhai (@davidkhai) on CodePen.dark

 

          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>   

See the Pen abNzYYx by DavidKhai (@davidkhai) on CodePen.dark

 

TẶNG BẠN EBOOK HƯỚNG DẪN LÀM AFFILIATE TỪ CƠ BẢN ĐẾN NÂNG CAO

Học cách làm thế nào kiếm $ từ số vốn 0 đồng với affiliate 

Những người muốn làm tiếp thị liên kết chuyên nghiệp
đều phải đọc bài viết này !. 

Không, cảm ơn tôi không muốn kiếm $ từ Internet
Chúng tôi làm gì? Liên hệ hỗ trợ qua Zalo Liên hệ hỗ trợ qua Fanpage Tham gia group Facebook hỗ trợ