How to Set Checkboxes Readonly in HTML ?

Radio Button Vs Checkbox in HTML

Last Updated : 17 Jun, 2024

Radio buttons allow users to select only one option from a group, while checkboxes permit multiple selections. Use radio buttons when exclusive choices are needed, and checkboxes for multiple independent choices.

These are the following topics that we are going to discuss:

Table of Content

Radio button
Checkbox
Difference between radio button and checkbox

Radio button

It is generally used in HTML forms. HTML forms are required when you need to collect some data from site visitors. A radio button is used when you want to select only one option out of several available options.

Example: This example shows the use of Radio buttons.

html

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

<head>
    <title>GeeksfoGeeks</title>
</head>

<body>
    <form>
        Do you agree 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>

Output:

Radio_button — Output

Checkbox

Checkboxes are also mostly used in HTML forms. A checkbox allows you to choose one or many options to be selected from a list of options.

Example: This example shows the use of checkbox.

html

<!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>

Output:

checkbox — Output

Difference between radio button and checkbox

Radio button	Checkbox
It is used when only one option to be selected out of several available options.	Checkbox allows one or many options to be selected.
It is created by using HTML <input> tag but type attribute is set to radio.	It is also created using HTML <input> tag but type attribute is set to checkbox.
It is a single control unit.	It is a multiple control unit.
It is presented as a small circle on the screen.	Checkbox is presented as a small square box on the screen.
It has only 2 states namely- True & False.	Checkbox have 3 states namely- Checked, unchecked & indeterminate.
It is used when you want to limit the users choice to just one option from the range provided.	It is used when you want to allow user to select multiple choices.

How to Set Checkboxes Readonly in HTML ?

akshara_a

Improve

Article Tags :

Similar Reads

How to Disable Radio Button in HTML?

This article will show you how to disable Radio Button in HTML. The disabled attribute is used to disable a radio button in HTML. This attribute prevents the radio button from being selected by the user. Using the disabled AttributeThe disabled attribute is used to disable the input fields. To disab

Pure CSS Checkboxes and Radio Buttons

In Pure CSS, we do not have any particular layout for Checkboxes and Radio Button type inputs. But we can use those types of inputs by using the Pure CSS classes. The below-mentioned classes are used for checkboxes and radio buttons. Checkbox: To use checkboxes, we can apply the input tag inside of

How to add Radio Buttons in form using HTML ?

In this article, we will learn how to add Radio Buttons in form using HTML. We know that Radio Buttons are used to select only one option out of several options. It is generally used in HTML form. If we want to deselect any option we have to select another option in the case of a radio button. Appro

How to Set Checkboxes Readonly in HTML ?

In this article, we will learn whether it is possible to make checkboxes readonly in HTML or not. Checkboxes are commonly used to allow users to select multiple options from a set of choices. They are represented in HTML by the <input> tag with the type="checkbox" attribute. It is not possible

How to check a radio button with jQuery?

There are two methods by which one can dynamically change the currently selected radio button by changing the checked property of the input type. Method 1: Using prop method: The input can be accessed and its property can be set by using the prop method. This method manipulates the 'checked' propert

How to Add Checkbox in HTML Table ?

Adding checkboxes to an HTML table can be useful for various purposes, such as selecting multiple rows for batch processing or toggling the state of individual items. In this article, we will explore two methods to add checkboxes to an HTML table i.e. using basic HTML and JavaScript for dynamic inte

Bootstrap 5 Input group Checkboxes and Radios

Bootstrap 5 Input group Checkboxes and radios are used to pace the radios and checkboxes within an input groupâ€™s addon instead of text.Bootstrap 5 Input group Checkboxes and Radios Classes: There are no specific classes to add checkboxes and radios. To create the checkboxes and radios we use the for

HTML DOM Input Checkbox value Property

HTML DOMÂ Input Checkbox Value propertyÂ sets or return the value of the value attribute of an input checkbox field, however the contents of the value attribute does not shown to user. It manages their assigned value, reflecting their state when checked or unchecked. It retrieves or sets the value att

How to Create a Checkbox in HTML?

The checkbox is the HTML form element that lets users select one or more options from predefined choices. It can often be used when a user selects multiple items in the list. Checkboxes can be checked or unchecked, and they are created using the <input> tag with the type attributes set to the

Blaze UI Input Checkboxes and Radios

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to c