Checkbox HTML: Cách chèn và tùy chỉnh checkbox trong HTML

Nội dung bài viết

Checkbox HTML giúp người dùng lựa chọn một hoặc nhiều tùy chọn cùng lúc, thường gặp nhiều trong các biểu mẫu (form). Có nhiều cách để chèn checkbox vào HTML, từ cách cơ bản với thẻ <input> đến các phương pháp nâng cao như sử dụng CSS và JavaScript để tùy chỉnh giao diện và chức năng.

Đọc bài viết sau đây để được giải đáp chi tiết hơn về:

Checkbox trong HTML là gì?
Cách định dạng chekcbox HTML bao gồm các thao tác tạo mới, tùy chỉnh và thiết lập kích thước
Cách để thêm checkbox vào bảng tính trong HTML
Hướng dẫn cách cài đặt checkbox HTML ở chế độ readonly
Một số câu hỏi thường gặp khi sử dụng checkbox trong HTML

Tổng quan về checkbox HTML

Cú pháp cơ bản của checkbox trong HTML:

<input type="checkbox">

Thẻ này tạo ra một phần tử đầu vào của checkbox, hiển thị dưới dạng một hộp vuông và được đánh dấu khi được nhấn vào. Checkbox cho phép người dùng chọn một hoặc nhiều tùy chọn từ một tập hợp các lựa chọn giới hạn.

Ví dụ sau đây sẽ trình bày cách sử dụng checkbox HTML:

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML Input Type Checkbox
    </title>

    <style>
        h2 {
            text-align: center;
        }

        fieldset {
            width: 250px;
            margin: auto;
        }
    </style>
</head>

<body>
    <h2>HTML &lt;input type="checkbox"&gt;</h2>

    <form action="#">
        <fieldset>
            <legend>Select Your Subjects:</legend>

            <input type="checkbox" 
                   name="check" 
                   id="checkbox1" 
                   value="html" checked>
            <label for="checkbox1">HTML</label>
            <br>

            <input type="checkbox" 
                   name="check" 
                   id="checkbox2" 
                   value="css">
            <label for="checkbox2">CSS</label>
            <br>

            <input type="checkbox" 
                   name="check" 
                   id="checkbox3" 
                   value="javascript">
            <label for="checkbox3">JavaScript</label>
        </fieldset>
    </form>
</body>

</html>

Kết quả:

Đoạn mã trên là một trang HTML đơn giản hiển thị một biểu mẫu (form) với các checkbox để người dùng chọn môn học yêu thích.

<form>: Tạo biểu mẫu.
action=”#”: Dấu # nghĩa là biểu mẫu sẽ không gửi dữ liệu đi đâu (chỉ mang tính minh họa).
<fieldset>: Tạo khung nhóm các checkbox.
<legend>: Tiêu đề cho nhóm checkbox (“Select Your Subjects:”).
Mỗi checkbox được tạo bởi thẻ <input type=”checkbox”>, và đi kèm với một <label> giúp người dùng dễ dàng chọn checkbox bằng cách bấm vào văn bản.
name=”check”: Cùng một tên giúp nhóm các checkbox lại với nhau, nhưng checkbox vẫn có thể được chọn độc lập.
id=”checkbox1″, id=”checkbox2″, id=”checkbox3″: Mỗi checkbox có một id duy nhất, giúp liên kết với <label>.
value=”html”, value=”css”, value=”javascript”: Khi checkbox được chọn, giá trị này sẽ được gửi đi khi biểu mẫu được submit.
checked: Checkbox đầu tiên (HTML) được chọn mặc định.

Khi gửi biểu mẫu, dữ liệu sẽ bao gồm các giá trị (HTML, CSS, JavaScript) của những checkbox đã chọn. CSS trong ví dụ trên được dùng để căn chỉnh và định dạng giao diện.

Cách để thiết lập kích thước checkbox trong HTML và CSS

Bạn có thể thay đổi kích thước của checkbox trong HTML hoặc CSS bằng một số cách như sử dụng thuộc tính width – height, thuộc tính transform hoặc thuộc tính zoom.

Thuộc tính width – height

Bằng cách thiết lập các thuộc tính chiều rộng và chiều cao, bạn có thể trực tiếp xác định kích thước của checkbox. Để hiểu rõ hơn về cách thực hiện, bạn có thể tham khảo qua ví dụ sau:

<html>
<head>
    <style>
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox" name="option1">
        Option 1
    </label>
    <label>
        <input type="checkbox" name="option2">
        Option 2
    </label>
</body>
</html>

Kết quả:

Ở ví dụ trên, có thể thấy:

Bộ chọn input[type=”checkbox”]: Nhắm mục tiêu đến tất cả các đầu vào checkbox.
Thiết lập width: 20px và height: 20px: Sẽ tăng kích thước checkbox lên 20×20 pixel.

Ngoài ra, bạn cần lưu ý là một số trình duyệt cũ có thể không hỗ trợ thay đổi kích thước checkbox trực tiếp, nhưng các trình duyệt hiện đại (Chrome, Edge, Safari) đều hỗ trợ tốt.

Thuộc tính transform

Thuộc tính transform: scale() sẽ thay đổi tỷ lệ của checkbox mà không làm thay đổi tỷ lệ của văn bản hoặc các thành phần xung quanh.

<html>
<head>
    <style>
        input[type="checkbox"] {
            transform: scale(1.5);
            margin: 10px;
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox" name="option1">
        Option 1
    </label>
    <label>
        <input type="checkbox" name="option2">
        Option 2
    </label>
</body>
</html>

Kết quả:

Ở ví dụ trên, ta có thể thấy:

Thuộc tính transform: scale(1.5) giúp phóng to checkbox lên 1,5 lần kích thước ban đầu của nó.
Thêm margin: 10px để đảm bảo khoảng cách thích hợp xung quanh checkbox. Vì khi phóng to, checkbox có thể bị chồng chéo với các phần tử khác nếu không có khoảng cách.

Thuộc tính zoom

Thuộc tính zoom có thể được sử dụng để điều chỉnh kích thước của checkbox, cụ thể như sau:

<html>
<head>
    <style>
        input[type="checkbox"] {
            zoom: 1.5;
            margin: 10px;
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox" name="option1">
        Option 1
    </label>
    <label>
        <input type="checkbox" name="option2">
        Option 2
    </label>
</body>
</html>

Kết quả:

Ở ví dụ trên, có thể thấy:

Thuộc tính zoom: 1.5 giúp tăng kích thước checkbox lên 1,5 lần.
Lưu ý rằng thuộc tính zoom không phải là chuẩn và có thể không được hỗ trợ trên tất cả các trình duyệt. Chẳng hạn như Firefox không hỗ trợ tốt thuộc tính này.

Hướng dẫn cách thêm checkbox vào bảng (table) trong HTML

Thêm checkbox vào table HTML (bảng HTML) cần thiết trong nhiều trường hợp khác nhau, chẳng hạn như chọn nhiều hàng để xử lý hàng loạt hoặc chuyển đổi trạng thái của từng mục. Để thêm checkbox vào mỗi hàng của bảng trong HTML, bạn có thể thực hiện như sau:

<!DOCTYPE html>
<html>

<head>
    <title>Table with Checkboxes</title>
    <style>
        table {
            margin: auto;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>XYZ</td>
            <td>xyz@itviec.com</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>ABC</td>
            <td>abc@itviec.com</td>
        </tr>
    </table>
</body>

</html>

Kết quả:

Ở ví dụ trên cho thấy cách thực hiện chèn checkbox vào mỗi hàng trong bảng HTML như sau:

Thêm một cột mới có tiêu đề “Chọn” (Select) để chứa các checkbox.
Bên trong mỗi hàng, bên dưới cột “Chọn”, chèn một phần tử <input> với thuộc tính type được đặt thành “checkbox”.
Thuộc tính name được đặt thành “select” cho tất cả các checkbox, nhưng bạn có thể sử dụng các tên khác nhau nếu cần để gửi biểu mẫu hoặc thao tác JavaScript.

Ngoài ra, bạn cũng có thể thực hiện thêm checkbox “Chọn tất cả” để chọn hoặc bỏ chọn tất cả tùy chọn trong bảng một cách linh hoạt bằng JavaScript. Cách thực hiện như sau:

<!DOCTYPE html>
<html>

<head>
    <title>Dynamic Table with Checkboxes</title>

    <style>
        table {
            margin: auto;
        }
    </style>

    <script>
        function toggle(source) {
            let checkboxes = document
                .querySelectorAll('input[type="checkbox"]');
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i] !== source)
                    checkboxes[i].checked = source.checked;
            }
        }
    </script>
</head>

<body>
    <table border="1">
        <tr>
            <th><input type="checkbox" onclick="toggle(this)"></th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>XYZ</td>
            <td>xyz@itviec.com</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>ABC</td>
            <td>abc@itviec.com</td>
        </tr>
    </table>
</body>

</html>

Kết quả:

Ở ví dụ trên, bạn có thể thấy:

Thêm checkbox “Chọn tất cả” vào hàng tiêu đề của bảng bằng cách chèn phần tử <input> có thuộc tính kiểu được đặt thành “checkbox” trong phần tử <th> đầu tiên.
Định nghĩa một hàm JavaScript toggle(source) lấy checkbox “Chọn tất cả” làm tham số nguồn. Hàm này lặp lại tất cả các checkbox trong bảng và đặt thuộc tính checked của chúng để khớp với thuộc tính checked của hộp kiểm nguồn.
Thuộc tính onclick của checkbox “Chọn tất cả” được đặt để gọi hàm toggle(this), truyền chính hộp kiểm làm đối số.

Cách tùy chỉnh checkbox ở chế độ chỉ đọc (readonly) trong HTML

Để cài đặt chế độ chỉ đọc (readonly) cho checkbox, bạn không thể thực hiện bằng các thuộc tính HTML chuẩn. Do đó, sẽ cần sử dụng những cách tiếp cận thay thế như sử dụng thuộc tính disabled hoặc các thuộc tính CSS như pointer-events có thể mô phỏng hành vi chỉ đọc cho hộp kiểm.

Sử dụng tùy chọn bị vô hiệu hóa (disabled option)
Sử dụng phương thức onclick.
Sử dụng thuộc tính pointer-events.

Sử dụng thuộc tính disabled

Thuộc tính disabled sẽ sử dụng tùy chọn bị vô hiệu hóa với thẻ đầu vào biểu diễn các hộp kiểm. Khi tùy chọn bị vô hiệu hóa được thêm vào thẻ đầu vào, checkbox sẽ bị vô hiệu hóa để bạn có thể xem hộp kiểm nhưng không thể tương tác với nó. Bạn cũng có thể sử dụng tùy chọn ‘đã chọn’ và lấy hộp kiểm chỉ đọc đã được chọn nhưng không thể bỏ chọn.

<input name="example" type="checkbox" disabled value="1" />

Ví dụ sau đây sẽ cho thấy cách hiển thị hai hai checkbox chỉ đọc bằng cách sử dụng disabled:

<!DOCTYPE html>
<html lang="en">

<head>
<title>checkboxes be set to readonly</title>
</head>

<body>
<h1 style="color: red; margin: 2rem">
ITviec
</h1>
<h3 style="margin: 2rem; margin-top: -1.5rem">
Có thể cài đặt checkbox ở chế độ chỉ đọc (readonly)?
</h3>
<div style="margin: 2rem;">
<input name="chkBox_1" type="checkbox"
disabled value="1" />
<label for="chkBox_1">
Disabled unchecked option
</label>
</div>
<div style="margin: 2rem;">
<input name="chkBox_2" type="checkbox"
disabled checked value="1" />
<label for="chkBox_2">
Disabled checked option
</label>
</div>
</body>

</html>

Kết quả:

Đoạn code trên hiển thị hai checkbox trong trạng thái chỉ đọc (không thể thay đổi) và được thực hiện bằng disable option.

<input type=”checkbox” name=”chkBox_1″ disabled value=”1″>: Đây là một checkbox với name là chkBox_1. Thuộc tính disabled khiến checkbox bị vô hiệu hóa (người dùng không thể tương tác).
value=”1″: Nếu checkbox có thể chọn, giá trị của nó sẽ là “1”.
<label for=”chkBox_1″>Disabled unchecked option</label>: Nhãn hiển thị dòng chữ “Disabled unchecked option”. for=”chkBox_1″ giúp nhấp vào nhãn sẽ chọn checkbox, nhưng vì checkbox bị disabled, nên không có tác dụng.
Có thêm checked: Checkbox này mặc định được chọn (checked).
Vẫn có disabled: Người dùng không thể thay đổi trạng thái checkbox này.

Checkbox với disabled không thể thay đổi trạng thái, người dùng không thể tích hoặc bỏ tích. Không có readonly cho checkbox trong HTML, readonly chỉ hoạt động với <input type=”text”>, <textarea>. Checkbox chỉ có thể vô hiệu hóa bằng disabled.

Sử dụng phương pháp onclick

Onclick method sẽ sử dụng phương thức onclick với thẻ input biểu diễn các checkbox. Khi phương thức on-click được thêm vào thẻ input và được đặt thành giá trị “return false” thì checkbox về cơ bản bị vô hiệu hóa để bạn có thể xem checkbox nhưng không thể tương tác với nó.

<input type="checkbox" onclick="return false"/>

Ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Checkbox Set to Readonly with onclick</title>
</head>

<body>
<h1 style="color: red; margin: 2rem">
ITviec
</h1>
<h3 style="margin: 2rem; margin-top: -1.5rem">
Có thể cài đặt chế độ chỉ đọc (readonly) cho checkbox?
</h3>
<div style="margin: 2rem;">
<input name="chkBox_1" type="checkbox"
onclick="return false" />
<label for="chkBox_1">
Disabled unchecked option with Onclick method
</label>
</div>
<div style="margin: 2rem;">
<input name="chkBox_2" type="checkbox"
onclick="return false" checked />
<label for="chkBox_2">
Disabled checked option with onclick method
</label>
</div>
</body>

</html>

Ví dụ trên đã tạo ra hai checkbox chỉ đọc bằng cách sử dụng JavaScript (onclick=”return false”). Không sử dụng thuộc tính disabled, do đó giá trị của checkbox vẫn sẽ được gửi khi form submit.

Không có disabled, nên giá trị checkbox vẫn được gửi khi form submit.
onclick=”return false”: Chặn sự kiện click dẫn đến người dùng không thể thay đổi trạng thái của checkbox.
<label for=”chkBox_1″> giúp nhãn liên kết với checkbox, nhưng do checkbox bị chặn click, nên nhấn vào nhãn cũng không thay đổi trạng thái.

Checkbox với onclick=”return false” hoạt động như readonly, không thể thay đổi trạng thái khi click nhưng giá trị vẫn được gửi khi form submit. So với disabled, onclick=”return false” linh hoạt hơn, vì giữ lại dữ liệu khi submit form.

Sử dụng thuộc tính pointer-events

Thuộc tính pointer-events sẽ sử dụng thuộc tính CSS pointer-events cho thẻ input biểu diễn các checkbox. Khi thuộc tính CSS này được đưa vào thiết kế cho thẻ input, checkbox về cơ bản là chỉ đọc để bạn có thể xem checkbox nhưng không thể tương tác với nó.

input[type="checkbox"]{
    pointer-events: none;
}

pointer-events được sử dụng để kiểm soát cách một phần tử phản hồi lại tương tác của người dùng với thiết bị trỏ, xác định xem nó có nên nhận các sự kiện con trỏ hay không.

<!DOCTYPE html>
<html lang="en">

<head>
<title>Checkbox Set to Readonly with pointer-events</title>
<style>
input[type="checkbox"] {
pointer-events: none;
}

.head1 {
color: red;
margin: 2rem;
}

.head2 {
margin: 2rem;
margin-top: -1.5rem;
}

.div1 {
margin-top: 2rem;
}

.div2 {
margin-top: 2rem;
}
</style>
</head>

<body>
<h1 class="head1">
ITviec
</h1>
<h3 class="head2">
Có thể cài đặt chế độ chỉ đọc (readonly) cho checkbox?
</h3>
<div class="div1">
<input name="chkBox_1" type="checkbox" />
<label for="chkBox_1">
Disabled unchecked option with 
Pointer-events
</label>
</div>
<div class="div1">
<input name="chkBox_2" type="checkbox"
checked />
<label for="chkBox_2">
Disabled checked option with 
Pointer-events
</label>
</div>
</body>

</html>

Ở ví dụ trên đã tạo giao diện với hai checkbox không thể nhấp vào bằng cách sử dụng CSS (pointer-events: none;). Bằng cách không dùng disabled hoặc onclick=”return false”, nhưng vẫn ngăn người dùng thay đổi trạng thái checkbox.

pointer-events: none: Chặn sự kiện click của checkbox, khiến nó trở thành “readonly”.
Các class .head1, .head2, .div1: Dùng để căn chỉnh vị trí các phần tử.
<input type=”checkbox” name=”chkBox_1″>: Đây là checkbox mặc định chưa được chọn. Vẫn gửi giá trị khi submit form vì không dùng disabled. Không thể nhấp vào do bị CSS pointer-events: none.

Sử dụng pointer-events: none; là một cách hay để làm checkbox chỉ đọc mà vẫn gửi dữ liệu. Nhưng nếu muốn chặn hoàn toàn, bạn có thể kết hợp với JavaScript.

Các câu hỏi thường gặp về checkbox HTML

Làm thế nào để hiển thị văn bản khi Checkbox được chọn?

Bạn có thể sử dụng JavaScript để kiểm tra xem checkbox có được chọn hay không. Nếu checkbox được chọn, một đoạn văn bản sẽ hiển thị; nếu bỏ chọn, văn bản sẽ ẩn đi.

Đầu tiên, kiểm tra xem hộp kiểm có được chọn không:

Checkbox:

<input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox is CHECKED!</p>

Sau đó, thêm đoạn mã JavaScript:

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox is CHECKED!</p>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>

</body>
</html>

Kết quả:

Đoạn code trên tạo ra một checkbox và khi người dùng tích vào checkbox, một đoạn văn bản sẽ hiển thị. Nếu bỏ tích, đoạn văn bản sẽ ẩn đi.

<label for=”myCheck”>Checkbox:</label>: Gán nhãn “Checkbox:” cho checkbox. Khi người dùng nhấp vào nhãn, checkbox sẽ được chọn hoặc bỏ chọn (nhờ thuộc tính for=”myCheck”).
type=”checkbox”: Tạo một ô checkbox.
id=”myCheck”: Định danh checkbox để có thể thao tác bằng JavaScript.
onclick=”myFunction()”: Khi checkbox được nhấp, hàm myFunction() sẽ chạy để kiểm tra trạng thái của checkbox và thay đổi hiển thị của đoạn văn bản.
function myFunction(): Kiểm tra trạng thái checked của checkbox và thay đổi display của <p id=”text”> từ none sang block hoặc ngược lại.

Sự khác biệt giữa Checkbox và Radio Button là gì?

Radio button cho phép người dùng chỉ chọn một tùy chọn từ một nhóm, trong khi các checkbox cho phép nhiều lựa chọn. Nhìn chung, bạn có thể sử dụng radio button khi cần lựa chọn một tùy chọn và checkbox cho nhiều lựa chọn độc lập hơn.

Radio button	Checkbox
Được sử dụng khi chỉ có một tùy chọn được chọn trong số nhiều tùy chọn có sẵn	Cho phép chọn một hoặc nhiều tùy chọn
Được tạo bằng cách sử dụng thẻ HTML <input> nhưng thuộc tính loại được đặt thành radio	Được tạo bằng cách sử dụng thẻ HTML <input> nhưng thuộc tính loại được đặt thành checkbox
Một đơn vị điều khiển duy nhất	Một đơn vị điều khiển nhiều tùy chọn
Được trình bày dưới dạng vòng tròn nhỏ trên màn hình	Được trình bày dưới dạng ô vuông nhỏ
2 trạng thái là True/False	3 trạng thái là Đã chọn (checked), chưa chọn (unchecked) và không xác định (indeterminate).
Được sử dụng khi muốn giới hạn lựa chọn của người dùng chỉ một tùy chọn trong phạm vi được cung cấp	Được sử dụng khi bạn muốn cho phép người dùng chọn nhiều lựa chọn

Radio Button

Radio Button thường được sử dụng trong các biểu mẫu HTML. Biểu mẫu HTML được yêu cầu khi bạn cần thu thập một số dữ liệu từ khách truy cập trang web. Nút radio được sử dụng khi bạn chỉ muốn chọn một tùy chọn trong số nhiều tùy chọn có sẵn.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>ITviec</title>
</head>

<body>
    <form>
        Do you agree with this statement?
        <br>
        <input type="radio" 
               name="agree" 
               value="yes">Yes
        <br>
        <input type="radio" 
               name="agree" 
               value="no">No
        <br>
        <input type="Submit">
    </form>
</body>

</html>

Kết quả:

Ở ví dụ trên, có thể thấy:

Đây là một trang HTML đơn giản với một biểu mẫu (form) chứa hai nút radio (Yes/No) và một nút gửi (Submit).
<input type=”radio”>: Đây là các nút radio, cho phép người dùng chọn một trong hai tùy chọn.
name=”agree”: Cả hai radio button đều có cùng tên (agree), điều này đảm bảo rằng chỉ có thể chọn một trong hai lựa chọn.
value=”yes” và value=”no”: Giá trị gửi khi biểu mẫu được submit.

Khi chọn một tùy chọn, tùy chọn kia tự động bị bỏ chọn. Nếu không chọn gì, không có giá trị nào được gửi.

Checkbox

Checkbox cũng được sử dụng nhiều nhất trong các biểu mẫu HTML. Checkbox cho phép bạn chọn một hoặc nhiều tùy chọn từ danh sách các tùy chọn.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Checkboxes</title>
</head>

<body>
    <form>
        Choose languages you know:
        <br>
        <input type="checkbox" 
               name="C" 
               value="yes">C
        <br>
        <input type="checkbox" 
               name="C++" 
               value="yes">C++
        <br>
        <input type="checkbox" 
               name="Java" 
               value="yes">Java
        <br>
        <input type="checkbox" 
               name="Python" 
               value="yes">Python
        <br>
        <input type="Submit">
    </form>
</body>

</html>

Kết quả:

Ví dụ trên là một trang HTML đơn giản với một biểu mẫu (form) chứa nhiều ô checkbox cho phép người dùng chọn nhiều ngôn ngữ lập trình mà họ biết, cùng với một nút gửi (Submit).

<input type=”checkbox”>: Các checkbox cho phép người dùng chọn nhiều tùy chọn cùng lúc.
name=”C”, name=”C++”, name=”Java”, name=”Python”: Xác định tên của từng checkbox để khi dữ liệu được gửi đi, mỗi checkbox có thể được nhận diện riêng biệt.
value=”yes”: Giá trị gửi nếu checkbox được chọn.
Người dùng có thể chọn nhiều checkbox cùng lúc và dữ liệu từ các checkbox được chọn sẽ được gửi khi submit.

Khi hiển thị trên trang web, bạn sẽ thấy câu hỏi “Choose languages you know:” và có thể chọn nhiều checkbox để đánh dấu những ngôn ngữ lập trình mà bạn biết. Nhấn vào nút Submit, dữ liệu từ checkbox được chọn sẽ được gửi đi.

Tổng kết về checkbox HTML

Checkbox HTML là một yếu tố phổ biến trong thiết kế biểu mẫu (form), giúp thu thập thông tin từ người dùng một cách trực quan và hiệu quả. Bạn có thể dễ dàng chèn checkbox bằng thẻ <input type=”checkbox”> và tùy chỉnh bằng CSS để tạo giao diện chuyên nghiệp hơn. Hy vọng bài viết này đã giúp bạn hiểu rõ cách chèn và tùy chỉnh checkbox trong HTML để ứng dụng vào dự án của mình nhé!

Xem thêm: Giải đáp “tất tần tật” những điều cần biết về HTML

Checkbox HTML: Cách chèn và tùy chỉnh checkbox trong HTML

Tổng quan về checkbox HTML

Cách để thiết lập kích thước checkbox trong HTML và CSS

Thuộc tính width – height

Thuộc tính transform

Thuộc tính zoom

Hướng dẫn cách thêm checkbox vào bảng (table) trong HTML

Cách tùy chỉnh checkbox ở chế độ chỉ đọc (readonly) trong HTML

Sử dụng thuộc tính disabled

Sử dụng phương pháp onclick

Sử dụng thuộc tính pointer-events

Các câu hỏi thường gặp về checkbox HTML

Làm thế nào để hiển thị văn bản khi Checkbox được chọn?

Sự khác biệt giữa Checkbox và Radio Button là gì?

Radio Button

Checkbox

Tổng kết về checkbox HTML

Nguyễn Trường Nguyên

IoT Platform là gì? Lập trình IoT Platform thì dùng ngôn ngữ gì?

Icon HTML là gì: Hướng dẫn cách chèn icon vào website từ A-Z

Shell vs Bash: Phân biệt và lựa chọn công cụ phù hợp

Dart tutorial: Các bước đầu tiên làm quen với lập trình Dart

JSON to Dart: Phương pháp và công cụ chuyển đổi hiệu quả

Tổng quan về checkbox HTML

Cách để thiết lập kích thước checkbox trong HTML và CSS

Thuộc tính width – height

Thuộc tính transform

Thuộc tính zoom

Hướng dẫn cách thêm checkbox vào bảng (table) trong HTML

Cách tùy chỉnh checkbox ở chế độ chỉ đọc (readonly) trong HTML

Sử dụng thuộc tính disabled

Sử dụng phương pháp onclick

Sử dụng thuộc tính pointer-events

Các câu hỏi thường gặp về checkbox HTML

Làm thế nào để hiển thị văn bản khi Checkbox được chọn?

Sự khác biệt giữa Checkbox và Radio Button là gì?

Radio Button

Checkbox

Tổng kết về checkbox HTML

Chia sẻ bài viết