Rate this post

Các bài viết liên quan:

Trong HTML, thẻ <button> được sử dụng để tạo một nút bấm. Nút có thể có văn bản hoặc các thành phần HTML khác trong nó, và có thể được tạo kiểu bằng CSS. Nút cũng có thể được gán thuộc tính id hoặc class để tùy chỉnh hoặc sử dụng với JavaScript. Một ví dụ của một nút cơ bản trong HTML sẽ như thế này:

<button>Nhấn vào tôi</button>

Bạn cũng có thể sử dụng <input type=”button”> để tạo một nút trong HTML.

Các thuộc tính của button trong html

Trong HTML, có một số thuộc tính có thể sử dụng cho thẻ <button> để tùy chỉnh nút:

  • type: Kiểu của nút, có thể là “submit”, “reset” hoặc “button”.
  • name: Tên của nút, có thể sử dụng với JavaScript hoặc mã hóa dữ liệu khi gửi form.
  • value: Giá trị của nút, có thể sử dụng với JavaScript hoặc mã hóa dữ liệu khi gửi form.
  • disabled: Nếu thiết lập là “disabled”, nút sẽ không thể bấm.
  • form: ID của form mà nút này thuộc về.
  • formaction: URL mà dữ liệu form sẽ được gửi đến khi nút được nhấn.
  • formenctype: Kiểu mã hóa dữ liệu form sẽ được gửi đi khi nút được nhấn.
  • formmethod: Phương thức gửi dữ liệu form khi nút được nhấn.
  • formnovalidate: Nếu thiết lập là “formnovalidate”, form sẽ không được kiểm tra khi nút được nhấn.
  • formtarget: Cửa sổ hoặc khung mà dữ liệu form sẽ được gửi đến khi nút được nhấn.

Ngoài ra, bạn cũng có thể sử dụng các thuộc tính chung như id, class, style để tùy chỉnh giao diện và sự hoạt động của button.

Và còn một số thuộc tính khác của button trong HTML:

  • accesskey: Phím tắt để truy cập nút này.
  • tabindex: Vị trí của nút trong thứ tự duyệt của tab.
  • onfocus: Sự kiện được gọi khi nút được nhấn vào.
  • onblur: Sự kiện được gọi khi nút bị mất focus.
  • onclick: Sự kiện được gọi khi nút được bấm.
  • ondblclick: Sự kiện được gọi khi nút được nhấn hai lần.
  • onmousedown: Sự kiện được gọi khi chuột được nhấn xuống trên nút.
  • onmouseup: Sự kiện được gọi khi chuột được nhấn lên từ nút.
  • onmouseover: Sự kiện được gọi khi chuột di chuyển qua nút.
  • onmouseout: Sự kiện được gọi khi chuột di chuyển ra khỏi nút.

Các thuộc tính trên được sử dụng để tùy chỉnh sự hoạt động của nút và giúp cho người dùng truy cập nó dễ dàng hơn bằng cách sử dụng phím tắt hoặc sự kiện chuột.

Một số ví dụ button trong html

Dưới đây là một số ví dụ về cách sử dụng thẻ <button> trong HTML:

  1. Tạo một nút với văn bản “Submit” và gửi dữ liệu khi nút được nhấn:
<form action="submit.php">
    <button type="submit">Submit</button>
</form>
  1. Tạo một nút với văn bản “Reset” và reset dữ liệu form khi nút được nhấn:
<form>
    <input type="text" name="name">
    <button type="reset">Reset</button>
</form>
  1. Tạo một nút với văn bản “Click me” và thực hiện một hành động JavaScript khi nút được nhấn:
<button onclick="alert('Hello, World!')">Click me</button>
  1. Tạo một nút với văn bản “Delete” và thiết lập thuộc tính disabled để không cho phép nút được nhấn:
<button disabled>Delete</button>
  1. Tạo một nút với icon và văn bản “Print”
<button> <i class="fas fa-print"></i> Print</button>

Chú ý: các mã icon có thể sử dụng các thư viện icon như fontawesome, material-icons.

Những ví dụ trên chỉ là một số ví dụ cơ bản, bạn có thể tùy chỉnh nhiều hơn bằng cách sử dụng các thuộc tính khác của button.

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 *

Contact Me on Zalo
Call now