Input Type “checkbox”
This type allows users to toggle between checked and unchecked states for straightforward decision-making.
Example: The example illustrates the input type checkbox.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input type text</title> </head> <body> <form> <input type="checkbox" id="mern" name="mern"> <label for="mern"> MERN </label> <br> <input type="checkbox" id="mean" name="mean" value="mean"> <label for="mean"> Mean </label> <br> <input type="checkbox" id="mevn" name="mevn" value="mevn"> <label for="mevn"> Mevn </label> <br> <input type="submit" value="submit"> </form> </body> </html> |
Output:
Output
HTML Input Type
HTML Input Element has various types that play an important role in creating HTML Forms, and the element is efficient in collecting user data and adding interactivity to web pages. These elements provide the feature to create an interactive web page. In the Input Element, there is an attribute type having different values that help to create the form according to the requirements of the web page. The default value of type is “text” in the input element. The input elements can be customized by applying CSS to them and the elements can also be manipulated dynamically with JavaScript. Below is the list of various Input Types with their basic illustrations.
Table of Content
- Input Type “text”
- Input Type “password”
- Input Type “submit”
- Input Type “color”
- Input Type “date”
- Input Type “email”
- Input Type “file”
- Input Type “hidden”
- Input Type “image”
- Input Type “url”
- Input Type “time”
- Input Type “number”
- Input Type “radio”
- Input Type “range”
- Input Type “reset”
- Input Type “search”
- Input Type “button”
- Input Type “tel”
- Input Type “week”
- Input Type “month”
- Input Type “datetime-local”
- Input Type “checkbox”
We will explore each of them with their basic implementations.