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.
Giới thiệu về Button trong HTML
Button là một phần tử HTML được sử dụng để tạo các nút tương tác trên trang web. Nó cho phép người dùng thực hiện các hành động như gửi biểu mẫu, chuyển trang, kích hoạt các sự kiện JavaScript và nhiều hơn nữa. Button là một phần quan trọng của giao diện người dùng, giúp cung cấp trải nghiệm tương tác tốt hơn cho người dùng.
Trong HTML, có ba cách chính để tạo button:
- Sử dụng thẻ
<button>: Đây là cách thông thường để tạo button trong HTML. Bạn có thể định nghĩa nội dung của button bên trong thẻ<button>, ví dụ:<button>Click me</button>. - Sử dụng thẻ
<input>vớitype="button": Bạn có thể sử dụng thẻ<input>và đặt thuộc tínhtypethành “button” để tạo một button. Ví dụ:<input type="button" value="Click me">. - Sử dụng thẻ
<a>và CSS: Bạn cũng có thể tạo button bằng cách sử dụng thẻ<a>và áp dụng CSS để tạo giao diện button. Ví dụ:<a href="#" class="button">Click me</a>, với CSS:.button { /* styles here */ }.
Button cung cấp nhiều thuộc tính và sự kiện cho phép bạn tùy chỉnh hành vi và giao diện của button. Bằng cách sử dụng các thuộc tính như disabled, name, value, id và các sự kiện như onclick, bạn có thể tạo ra các button phong phú và đáp ứng nhu cầu của trang web của mình.
Button là một phần quan trọng trong việc xây dựng giao diện người dùng tương tác. Bằng cách sử dụng đúng cách và tùy chỉnh phù hợp, bạn có thể cung cấp trải nghiệm tốt hơn cho người dùng và tăng khả năng tương tác trên trang web của mình.
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.
Xem thêm Buttons & Controls trong UI Design là gì ?
Cách tạo và sử dụng Button trong HTML
Để tạo và sử dụng một button trong HTML, bạn có thể sử dụng thẻ <button> hoặc thẻ <input> với thuộc tính type="button". Dưới đây là cách tạo và sử dụng button trong HTML:
- Sử dụng thẻ
<button>:
<button>Click Me</button>
- Sử dụng thẻ
<input>vớitype="button":
<input type="button" value="Click Me">
Bên cạnh đó, bạn cũng có thể thêm các thuộc tính và sự kiện để tùy chỉnh button theo nhu cầu của bạn. Dưới đây là một ví dụ về cách tạo và sử dụng button với thuộc tính và sự kiện:
<button id="myButton" class="myClass" onclick="myFunction()">Click Me</button>
Trong ví dụ trên, button có một ID là “myButton” và một lớp CSS là “myClass”. Khi button được nhấp chuột, nó sẽ gọi hàm “myFunction()” để thực hiện một hành động nào đó.
Bên cạnh đó, bạn có thể sử dụng CSS để tùy chỉnh giao diện của button. Ví dụ:
<style>
.myClass {
background-color: blue;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
</style>Trên đây là một cấu trúc cơ bản để tạo và sử dụng button trong HTML. Bạn có thể tùy chỉnh và thêm các thuộc tính và sự kiện khác theo nhu cầu của bạn.
Xem thêm Selenium webdriver – Xử lý các nút Radio
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:
- 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>- 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>- 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>- 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>
- 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.
Xem thêm Hướng dẫn về Linear Layout
