Check Boxes in HTML

By

 Create a Set of Checkboxes:

  • Forms commonly use checkboxes for questions that may have one or many answers.
  • Checkboxes are of type input.
  • Each of our checkboxes can be nested within its own label element.
  • By wrapping an input element inside of a label element it will automatically associate the checkbox input with the label element surrounding it.
  • All related checkbox elements should have the same name attribute.
  • It is considered best to define the relation between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element.
  • Here is an example of a checkbox:

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
  •  A real-time example of creating a checkbox is:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox</title>
</head>
<body>
<p> What kind of people do you love</p>
<label for="Loving"><input id="Loving" type="checkbox" name="personality" checked> Loving</label>
<label for="Funny"><input id="Funny" type="checkbox" name="personality"> Funny</label>
<label for="Serious"><input id="Serious" type="checkbox" name="personality">Serious</label>
<label for="Bodybuilder"><input id="Bodybuilder" type="checkbox" name="personality">Bodybuilder</label>
</body>
</html>
  • The output of this code in your browser looks like this:







No comments:

Post a Comment