Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ button trong HTML, đây là thẻ rất quan trọng trong cấu trúc form html.
Thẻ button sẽ tạo ra một nút bấm, nó không tạo ra một hành động submit form như thẻ input. Vì vậy, ta thường sử dụng kết hợp với Javascript để tạo ra các hành động theo yêu cầu của bài toán.
Trong cặp thẻ <button></button>, người dùng có thể đặt nội dung là một đoạn văn bản hoặc một hình ảnh. Đây là điểm khác nhau giữa thẻ button và thẻ input có type = button.
1. Cách sử dụng thẻ button trong HTML
Ví dụ: tạo nút bấm để show ra lời chào khi click.
Bài viết này được đăng tại [kiso.vn]
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại kiso.vn</title>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại kiso.vn</h1>
<button type="button" onclick="alert('Hello Kiso.vn!')" >
Click để in ra lời chào kiso
</button>
</body>
</html>Trong ví dụ trên mình tạo sự kiện onclick cho thẻ button để khi nút được click sẽ alert ra dòng text ‘Hello world!‘.
2. Thuộc tính của thẻ button trong html
Dưới đây là một số thuộc tính thường sử dụng nhất.
- autofocus – tự động focus vào thẻ khi tải xong trang.
- type – sẽ quy điinh kiểu của nút, bao gồm: submit, reset, button.
- name – tên của nút.
- disabled – nút có bị vô hiệu hóa hay không.
Ví dụ: sử dụng thuộc tính type để tạo nút reset dữ liệu đã nhập.
<form>
<input type="text" name="username">
<input type="text" name="email">
<button type="reset">Reset</button>
</form>Trình duyệt hỗ trợ:
- Chrome
- Firefox
- IE
- Safari
- Opera
3. Thiết lập CSS cho thẻ button
Để thêm CSS cho button thì bạn có thể sử dụng hai cách:
- Cách 1 là thêm thuộc tính style và viết CSS ngay bên trong.
- Cách 2 là đặt cho thẻ input một class hoặc id, sau đó dựa vào thông tin này để tạo CSS.
<button class="color-red" id="btn" type="reset">Reset</button>
<style>
button{
color:red
}
.color-red{
color:red
}
#btn{
color:red
}
</style>Trong 3 cách trên thì bạn sử dụng cách nào cũng được.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Cách sử dụng thẻ button trong HTML2. Thuộc...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Cách sử dụng thẻ button trong HTML2. Thuộc tính của thẻ button trong html3. Thiết lập CSS cho thẻ button1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Cách sử dụng thẻ button trong HTML2. Thuộc tính của thẻ button trong html3. Thiết lập CSS cho thẻ buttonV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5....
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Cách sử dụng thẻ button trong HTML2. Thuộc tính của thẻ button trong html3. Thiết lập CSS cho thẻ buttonV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Cách sử dụng thẻ button trong HTML2. Thuộc tính của thẻ button trong html3. Thiết lập CSS cho thẻ buttonIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ...