Thẻ button trong HTML

Posted on by mtoplistChuyên mục:Top List

     

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

 

Đánh giá post

mtoplist