coding180 icon

Coding180

HTML Element: Form - input type="checkbox"

HTML Element: Form - input type="checkbox"

Tutorials > HTML > HTML Form Elements


The checkbox is another type of input element that can be inserted into a form
A checkbox is a form type that can take two values ​​(checked/unchecked)

To see how it works, we will implement a form that requests the entry of a person's name and 4 checkbox-type elements so that they can select the programming languages ​​they know:

<!DOCTYPE html>
<html>
<head>
  <title>Form checkbox - coding180.com</title>
  <meta charset="UTF-8">
</head>
<body>
<form action="registration.php" method="post">
  Enter your name:
  <input type="text" name="name" size="30"><br>
  Select the languages ​​you know:
  <br>
  <input type="checkbox" name="java">Java<br>
  <input type="checkbox" name="cplusplus">C++<br>
  <input type="checkbox" name="c">C<br>
  <input type="checkbox" name="csharp">C#<br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The result in the browser is:

html checkbox form example

Syntax to define checkbox type form:

<input type="checkbox" name="java">Java<br>

As we can see, we also use the HTML input element, where we initialize the type property with the checkbox value.

A checkbox inpute type does not display text, just a box that the user can check or uncheck.

If we want a message to appear next to the checkbox, we just add it to the input element.

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel