Last Updated on April 26, 2023 by Roshan Parihar
HTML input tag is used to get user input data to communicate with a website.
This tag comes in forms, which on submit, some action will perform to send the data. The HTML input control is of various types depending upon the kind of the entry field.
Syntax
|
1 |
<input type="enter type" class="enter class" name=""/> |
|
1 2 3 4 |
<label for="name">Enter Name</label> <input type="text" name="name"/> <label for="email">Enter Email</label> <input type="text" name="Email"/> |
Output
List of HTML input tag type attribute options
| Sr. No. | type attribute options | Description |
|---|---|---|
| 1 | text | This used to display one line input text. |
| 2 | password | used to show password input text |
| 3 | This is used to show input text which takes only email id as a valid value | |
| 4 | radio | This is used to show multiple radio buttons options for selection. |
| 5 | checkbox | This is used to show multiple checkbox options for single selection as well as multiple selections. |
| 6 | submit | This shows submit button used for submitting the form. |
| 7 | file | This is used to browse and take input as a file for attachment and uploading. |
| 8 | reset | This is used to reset form data to default values . |
This example is a password input field which takes the password as a contribution. The information entered in this area is not visible to the users.
|
1 2 3 4 |
<form> <label for="Enter Password">Enter Password</label> <input type="password" name="password"/> </form> |
Output
This example is email input field to get only email id as a valid value. The user must enter an email id as a valid value, otherwise it will not accept the given input.
|
1 2 3 4 |
<form> <label for="Enter Email">Enter Email</label> <input type="email" name="email"/> </form> |
Output
The radio buttons with multiple options which we can use in the form for user selection.
|
1 2 3 4 5 |
<form> <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <input type="radio" name="gender" value="others"/>Others </form> |
Output
Input type checkboxes with multiple options which we can use inside the form for user selection.
|
1 2 3 4 5 |
<form> <input type="checkbox" name="gender" value="male"/>Male <input type="checkbox" name="gender" value="female"/>Female <input type="checkbox" name="gender" value="others"/>Others </form> |
Output
The submit button inside forms for submission after entering the values of various inputs and options.
|
1 2 3 4 5 |
<form> <input type="text" name="firstname" value="First Name"/> <input type="text" name="lastname" value="Last Name"/> <input type="submit" name="submit" value="submit"/> </form> |
Output
The reset button inside the form for resetting the entered values to default.
|
1 2 3 4 5 |
<form> <input type="text" name="firstname" value="First Name"/> <input type="text" name="lastname" value="Last Name"/> <input type="reset" name="reset" value="reset"/> </form> |
Output
Resources and References
1. W3C Specification.
2. HTML living standard
3. W3C project using Github