Checkbox
A checkbox represents an item that can be in two states: checked and unchecked. A checkbox is created using an element input with the type =”checkbox” attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Checkbox</title>
</head>
<body>
<h2> Learning technologies </h2>
<form>
<div class="form-group" style="margin-bottom: 15px;">
<input type="checkbox" checked name="html5" /> HTML5
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="checkbox" name="php" />PHP
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="checkbox" name="mysql" /> MySQL
</div>
<div class="form-group" style="margin-bottom: 15px;">
<button type="submit"> Submit </button>
</div>
</form>
</body>
</html>
The checked attribute allows you to set the checkbox to the checked state.
Radio buttons
Switches or radio buttons are like checkboxes, they can also be in a checked or unchecked state. For radio buttons only, you can create one group in which only one radio button can be selected at a time. For instance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Radio Buttons</title>
</head>
<body>
<form>
<h2> Your Gender </h2>
<div class="form-group" style="margin-bottom: 15px;">
<input type="radio" value="male" checked name="gender" /> Male
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="radio" value="female" name="gender" />Female
</div>
<h2>Learning technologies</h2>
<div class="form-group" style="margin-bottom: 15px;">
<input type="radio" value="html5" checked name="tech" />HTML5
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="radio" value="PHP" name="tech" />php
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="radio" value="Nodejs" name="tech" />Node JS
</div>
<div class="form-group" style="margin-bottom: 15px;">
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
To create a radio button, you must specify an attribute type=”radio”. And now another attribute name points not to the element name, but to the name of the group to which the radio button element belongs. In this case, we have two groups of radio buttons: gender and tech. We can only select one radio button from each group. Again, to mark a radio button, its attribute is set checked:
An important attribute value is that, when the form is submitted, it allows the server to determine which radio button was checked:
