Check box

In this article we are going to learn about checkbox buttons in html, how to create buttons that provides lists of more than one choices for users to choose or select.

We learnt about html in general, learning the structure of hypertext markup language, text in html, lists in html, links in html, inputs in html, buttons in html, forms in html, html elements, tables in html, marquee in html, horizontal line in html, textarea in html and tradio buttons in html so, now we will be focusing on checkbox buttons.

Checkbox

Checkbox is a button that a user can use to choose or select one possible choice on limited list of choices in webpages.

Let us create two checkbox buttons, copy and paste below code.

<!DOCTYPE html>

<body>

<input type="checkbox" name="me"/>

<br/>

<input type="checkbox" name="me"/>

</body>

</html>


So, we should have the following results and if you click on each of them the button will be selected with a ticked color.



Let us create another two checkbox buttons with text label, copy and paste below code.

<!DOCTYPE html>

<body>

<label>

<input type="checkbox"/> HTML tutorial

</label>

<br/>

<label>

<input type="checkbox" name="CSS"/> CSS tutorial

</label>

</body>

</html>


So, we should have the following results and the checkbox buttons have text labels that a user can choose and click on them.



Let us create a list of items with checkbox buttons labeled, copy and paste below code.

<!DOCTYPE html>

<body>

<ol>

<li>

<label>

<input type="checkbox" name="HTML"/> HTML tutorial

</label>

</li>

<li>

<label>

<input type="checkbox" name="CSS"/> CSS tutorial

</label>

</li>

<li>

<label>

<input type="checkbox" name="PHP"/> PHP tutorial

</label>

</li>

<li>

<label>

<input type="checkbox" name="JAVA"/> JAVA tutorial

</label>

</li>

</ol>

</body>

</html>


So, we should have the following results and we have a list with four checkbox buttons labeled and a user can click a text label.


Let us create a form with checkbox buttons labeled, copy and paste below code.

<!DOCTYPE html>

<body>

<form>

<div>

<label>

Name:

<input type="text" name="name" placeholder="type name"/>

</label>

</div>

<div>

<label>

Surname:

<input type="text" name="surname" placeholder="type surname"/>

</label>

</div>

<div>

<label>

Gender:

<input type="checkbox" name="male"/> Male

<input type="checkbox" name="female"/> Female

</label>

</div>

</form>

</body>

</html>


So, we should have the following results and we have a form with checkbox buttons labeled and a user can click a text label.


Conclusion

In this article we learnt about checkbox buttons in html with examples, how to create buttons that provides lists of more than one choices for users to choose or select.