HTML Syntax for Making a Checkbox

You need to use the code: <input type=”checkbox”> to create the checkbox. In this article what is the correct HTML for making a checkbox and Why should we create it?

What is a checkbox?

The checkbox is shown as a square box that is (checked) ticked when activated. It is not like the radio button, in the radio button where the user can select only one option, but checkbox user can select more than one option. If the candidate wants to select more than one option, use the check box. You can create a checkbox if the applicant wants to select more than one option.

Why do we need to create a checkbox?

If we want to get more than one value from users to we can create check boxes.

For example, if an application form wants to list the applicant’s software skills like C, C++, JAVA, C#, etc., there will be several options. And one may know C, and C++, and others may know HTML, CSS, and JS. So in that situation, we need to create checkboxes to get a list of capabilities and allow the user to make more than one choice.

Another example, if we want to get hobbies of an applicant like playing cricket, listening to music, drawing etc., to get list of hobbies or allowed the applicant to select more than one hobbies, in that situations also we need to create checkboxes. If you use a radio button, the user can select only one option, if you use a checkbox, the user can select more than one option. So, let’s see how to create checkboxes.

What is the correct HTML for making a checkbox

<p> Your Software Skills :</p>
<input type="checkbox" checked name="skills[]" value="C" > C
<input type="checkbox" name="skills[]" value="C++" > C++
<input type="checkbox" name="skills[]" value="JAVA" > Java
<input type="checkbox" name="skills[]" value="PYTHON" > Python

Output:

1. To create a checkbox you need to Use the <input> tag and add 3 important attributes in the <input> tag which are type, name, and value.
2. In the Type attribute, you must give the value as “checkbox” , then the checkbox will be created.
3. In the name attribute, you should give the same “name” with an array, as in the above code. If you give the name in the array, the values ​​​​selected by the applicant are stored in the same array instead of being stored separately. For example in the code above all values ​​​​are stored in a skills[] array.
4. And to find the option selected by the user in the backend, give the option in the value attribute. The value attribute is only shown in the backend, if you want it to be shown in the frontend, you have to give your options outside the <input> tag, like the above code.

In the above code, the checkbox is created to select the applicant’s software skills. And I have created C, C++, JAVA, and C# options using the <input> tag. If you want the checkbox to be checked by default, you must add the input “checked” attribute.

Conclusion

So I hope you have learned the correct syntax to create a checkbox in this article