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ínhGiá trịSự miêu tả
autofocusautofocusChỉ định rằng nút phải có tiêu điểm đầu vào khi trang tải.
disableddisabledChỉ định nút bị tắt.
formform_idChỉ định các biểu mẫu mà nút thuộc về.
formactionURLChỉ định liên kết nơi biểu mẫu được gửi.
formenctypeapplicationmultipart/form-datatext/plainChỉ định cách dữ liệu biểu mẫu được mã hóa trước khi gửi đến máy chủ.
formmethodget
post
Chỉ định cách gửi dữ liệu biểu mẫu.
formnovalidateformnovalidateChỉ đị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.
namenameChỉ định tên nút.
typebutton
reset
submit
Chỉ định loại nút.
valuevalueChỉ đị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

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *