The HTML Checkbox Tag is used to select multiple options in a web application. This HTML element can be used to take input from users on the website. Beginners can start learning HTML Checkbox tag to set off their web development journey.
In this article, let us learn more about HTML Checkbox tag and its uses in web development.
What is HTML Checkbox Tag?
The HTML Checkbox tag is a type of radio element in HTML used to select one or more options from the given set of options. It is represented by a square box which on selecting gets a tick mark.
The HTML attribute “type” is used to define the checkbox attribute in a HTML document. This attribute is used with a <input> tag. You can also define other attributes like id, class, name and value of the input element.
HTML Checkbox Tag Key Takeaways
- The HTML Checkbox tag is used within the HTML document. The flow is <html>, <head>,<body><input type =”checkbox”>
- The HTML Checkbox Tag is supported on Google Chrome, Edge, Firefox, Safari, Opera and other browsers on the internet.
- You can select multiple options using the HTML Checkbox tag.
Syntax of HTML Checkbox Tag
HTML Checkbox tag is represented by a square box with a tick mark inside. The tick mark tells whether the option is selected or not. Check the syntax of HTML checkbox tag with some examples below.
| <input type =”checkbox” id = “car” name = “Ford” value=”First Checkbox” checked= “yes”> |
The type attribute is used to define the checkbox element in HTML and enclosed within the <input> tag. You can initialise the value of checkbox with default when you want to select any checkbox. Use the attribute with the “yes” value within the input element of the HTML document.
Value of HTML Checkbox Tag
The HTML Checkbox tags are represented using “STRING” using checkbox. The value of the Checkbox is not displayed on the users side but on the server side the value of the given form is submitted with the checkbox name.
| <form>
<div> <input type=”checkbox” id=”subscribeNews” name=”subscribe” value=”newsletter” /> <label for=”subscribeNews”>Subscribe to newsletter?</label> </div> <div> <button type=”submit”>Subscribe</button> </div> </form> |
Example of HTML Checkbox Tag
The HTML Checkbox Tag can be used to select one option from a set of Given options in an HTML document. You can display it on your user side with the help of HTML and get responses from the users.
For example, consider you have a number of cars as an option and you can select any number of cars which you want to buy for yourself. Let us implement it using the HTML checkbox tag.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Select Your Cars</title> </head> <body> <h1>Choose the Cars You Want to Buy</h1> <form> <label> <input type=”checkbox” name=”car” value=”BMW”> BMW </label><br> <label> <input type=”checkbox” name=”car” value=”Audi”> Audi </label><br> <label> <input type=”checkbox” name=”car” value=”Tesla”> Tesla </label><br> <label> <input type=”checkbox” name=”car” value=”Mercedes”> Mercedes </label><br> <label> <input type=”checkbox” name=”car” value=”Toyota”> Toyota </label><br><br> <button type=”submit”>Submit</button> </form> </body> </html> |
Output
HTML Checkbox tag is represented by a checkbox input with type=”checkbox” attribute. Users can select multiple car options by clicking the checkboxes. Click the “submit” button to send your response to the backend for saving. You can easily modify the Checkbox form elements with your choice in the box.
Applications of HTML Checkbox Tag
HTML Checkbox tag is used in various forms in HTML documents for creating an appealing user Some of the major applications of HTML Checkbox tag are mentioned below.
1. Multiple Selections
The HTML Checkbox tag can be used to select multiple options from a list. You can choose interests or hobbies during user registration.
| <label><input type=”checkbox” name=”hobby” value=”Reading”> Reading</label>
<label><input type=”checkbox” name=”hobby” value=”Traveling”> Traveling</label> |
2. Preferences and Settings
HTML Checkbox tag can be used for toggling various user experiences such as enabling or disabling email notifications, switching dark mode, etc.
| <label><input type=”checkbox” name=”notifications” checked> Enable Email Notifications</label> |
3. To Do List
Users can mark task completions in a to-do applications using the HTML checkbox tag.
| <label><input type=”checkbox” name=”task” value=”1″> Complete Homework</label>
<label><input type=”checkbox” name=”task” value=”2″> Buy Groceries</label> <label><input type=”checkbox” name=”task” value=”2″> Learning English </label> |
4. Apply Filter in Ecommerce
Users can easily apply filters on an Ecommerce website using HTML Checkbox tag where the filters can be based on various criterias such as size, brand, size or price range. You can select multiple checkbox tag in the filter application.
| <label><input type=”checkbox” name=”brand” value=”Nike”> Nike</label>
<label><input type=”checkbox” name=”brand” value=”Adidas”> Adidas</label> <label><input type=”checkbox” name=”brand” value=”Adidas”> Puma</label> <label><input type=”checkbox” name=”brand” value=”Adidas”> Baca buci</label> |
5. Used in Polls and Surveys
The HTML Checkbox tag is used to collect responses from users and users can also select multiple answers in a survey or polls online. You can apply the HTML Checkbox tag for polls and surveys in HTML documents.
| <H1>Online Surveys</H1>
<label><input type=”checkbox” name=”brand” value=”Adidas”> Feedback 1</label> <label><input type=”checkbox” name=”brand” value=”Adidas”> Feedback 2</label> <label><input type=”checkbox” name=”brand” value=”Adidas”> Feedback 3</label> |
6. Dynamic Forms
The HTML Checkbox tag is used in implementing dynamic and custom forms in . You can enable or disable additional inputs based on the checkbox selected by the users. Users can also select the “other” and reveal a textbox for custom input from applicants in a HTML Form.
| <label><input type=”checkbox” id=”other”> Other</label>
<input type=”text” id=”customInput” style=”display:none;” placeholder=”Specify”> <script> document.getElementById(‘other’).addEventListener(‘change’, function() { const input = document.getElementById(‘customInput’); input.style.display = this.checked ? ‘block’ : ‘none’; }); </script> |
Learn Full Stack Web Development With PW Skills
Become a Full Stack Developer with PW Skills Full Stack Web Development Course. Learn HTML, CSS, Javascript, React and other frameworks of web development. Get industry oriented curriculum and learn with industry led live sessions and recorded lectures.
Build scalable web applications using real world projects and prepare for job interviews under the guidance of top mentors on pwskills.com
FAQs
Q1. What is a HTML Checkbox tag?
Ans: HTML Checkbox tags are square boxes which can be used to select multiple options in a html document. Users can prompt their users to get input using HTML checkbox tags.
Q2. How to Pre-check a HTML Checkbox tag by default?
Ans: You can select a HTML checkbox option using default by choosing checked attribute value to “yes”.
Q3. Can I Style HTML Checkbox Tag with CSS?
Ans: You can style HTML checkbox tag using CSS but you need to apply the CSS elements in style tags in HTML documents. You can hide the default checkbox and use a label with custom styles.
Q4. How to detect HTML checkbox tag using Javascript?
Ans: HTML Checkbox tag can be checked using the “checked” property in HTML documents.
