HTML Checkbox - How to Create Custom Check Box in HTML

HTML Checkbox - How to Create Custom Check Box in HTML

Learn about HTML Checkbox - Various types of checkbox and their attributes, How to define multiple checkboxes, use CSS and javascript for checkboxes in HTML.

Welcome back to DataFlair HTML Tutorial Series. In this article, we are going to learn about HTML Checkbox and various types and attributes of the same. So let’s start!!!

html checkbox

HTML Checkbox

HTML checkboxes are of the utmost importance when a user wants to select more than one option for a limited number of choices. For example, in a form, suppose you have to select your preferred social media handle. If checkboxes are used, you can select multiple preferences, unlike radio buttons.

The checkboxes are also defined using the tag, like the radio button, as we have discussed in the previous article.

Syntax-

Attributes of HTML CheckBox

NameDefinitiontypeSpecifies the type of input, in this case set as ‘checkbox’.valueSpecifies the value that will be sent to the server, if the checkbox is checked.nameSpecifies the name of the control that is delivered to the server.checkedDefines a by default checked checkbox. It is a boolean value.

Adding Multiple Checkbox in HTML

We can add multiple checkboxes to an HTML document using the above syntax.

<!DOCTYPE html>
<html>
<body>
<h1>Preferred Social Media Handle</h1>
<form>
  <input type="checkbox" id="one" name="vehicle1" value="LinkedIn">
  <label for="one">LinkedIn</label><br>
  <input type="checkbox" id="two" name="vehicle2" value="Instagram">
  <label for="two">Instagram</label><br>
  <input type="checkbox" id="three" name="vehicle3" value="Facebook">
  <label for="three">Facebook</label>
  <br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output

We use the

Adding CSS in CheckBox

We can style checkboxes using CSS3 and make them more aesthetic.

<!DOCTYPE html>
<html>
<head><style>
  p,
label {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: .4rem;
}
</style></head>
<body>
<h1>Preferred Social Media Handle</h1>
<form>
  <input type="checkbox" id="one" name="vehicle1" value="LinkedIn">
  <label for="one">LinkedIn</label><br>
  <input type="checkbox" id="two" name="vehicle2" value="Instagram">
  <label for="two">Instagram</label><br>
  <input type="checkbox" id="three" name="vehicle3" value="Facebook">
  <label for="three">Facebook</label>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output

html tutorials html checkbox html

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag.

HTML Introduction - HTML Tutorial For Beginners - DataFlair

HTML Introduction - Learn what is HTML, History of HTML, its benefits and limitations, HTML applications, HTML5 and its features, what's new in HTML5.

HTML Basics to Learn HTML for Web Development

HTML is the mark-up language most websites are written in. In this article, we will delve into the most basics of HTML like tags and elements that are of utmost importance while writing any code in HTML. These tags help in the structuring and display of content on the web pages.

All You Need To Know About HTML Forms

This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.