How do we use checkbox buttons in HTML forms?

HTML Web Development Front End Technology

Using HTML forms, we can easily take user input. The <form> tag is used to get user input, by adding the form elements. Different types of form elements include text input, radio button input, submit button, text field area etc.

To use radio buttons in HTML forms to get user input. Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag and the type attribute is set to radio.

S.No.	Attribute & Description
1	type Indicates the type of input control and for checkbox input control it will be set to a radio.
2	name Used to give a name to the control which is sent to the server to be recognized and get the value.
3	value The value that will be used if the checkbox is selected
4	checked Set to checked if you want to select it by default

Syntax

Following is the syntax to create a radio button in HTML.

<form>
   <input type="radio" name="name… " value=" ">Male
</form>

Example 1

Let us look at how to use checkbox buttons in HTML forms in the example below −


<!DOCTYPE html>
<html>
<body>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<p>Branch</p>
<form>
   <input type="checkbox" id="CSE" name="Branch" value="CSE" >
   <label for="CSE">CSE</label>
   <input type="checkbox" name="Branch" value="IT" >
   <label for="CSE">IT</label>
   <input type="checkbox" name="Branch" value="ECE">
   <label for="CSE">ECE</label>
   <input type="checkbox" name="Branch" value="EEE">EEE
   <input type="checkbox" name="Branch" value="ivil">Civil
   <input type="checkbox" name="Branch" value="Mech">Mech
</form>
</body>
</html>

Example 2

Another example to use checkboxes in HTML forms is as follows −


<!DOCTYPE html>
<html>
<body>
<head>
   <title>HTML Checkbox Button</title>
</head>
<p>Which languages you work on:</p>
<form>
   <input type="checkbox" name="language1" value="java">Java
   <br>
   <input type="checkbox" name="language2" value="php">PHP
   <br>
   <input type="checkbox" name="language3" value="cpp">C++
   <br>
</form>
</body>
</html>

Example 3

Set to checked if you want to select it by default of any of the option. We use checked attribute value to true to select a option by default. Given below is an example to make the option to select it by default.


<!DOCTYPE html>
<html>
<body>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<p>Branch</p>
<form>
   <input type="checkbox" id="CSE" name="Branch" value="CSE" checked="true" >
   <label for="CSE">CSE</label>
   <input type="checkbox" name="Branch" value="IT" >
   <label for="CSE">IT</label>
   <input type="checkbox" name="Branch" value="ECE">
   <label for="CSE">ECE</label>
   <input type="checkbox" name="Branch" value="EEE" checked="true" >EEE
   <input type="checkbox" name="Branch" value="ivil">Civil
   <input type="checkbox" name="Branch" value="Mech">Mech
</form>
</body>
</html>