Checkout different input types that are available in HTML which we can use inside the form.
Prior to HTML5 there were only few input types which we could have used. In order to make custom input types we had to reuse them and then provide validations with javascript to make sure they work properly.
But after HTML5 we now have a amazing list of form input types which saves our lots of time as they do internal validations.
HTML form input types
Input type text
<input type="text" name="username"/> is a simple text field in which we can insert anything.
<form action="abc" method="post"> <label for="username">Username:</label> <br /> <input type="text" name="username" id="username" /> </form>
Input type password
<input type="password" name="password"/> is a password field in which data is securely displayed.
Anything entered will not be visible as it is, it will converted to special characters like * to indicate that you are entering data.
But while fetching we will get what we have originally entered.
<form action="abc" method="post"> <label for="password">Password:</label> <br /> <input type="password" name="password" id="password" /> </form>
Input type radio
<input type="radio" name="gender"/> is a radio field in which we can select only one data from the given choices.
Radio types can have different input element with same name but different values and we can only select any one of them.
<form action="abc" method="post"> <label >Gender:</label> <br /> Male: <input type="radio" name="gender" value="male"/> Female: <input type="radio" name="gender" value="female"/> </form>
Input type checkbox
<input type="checkbox" name="hobbies"/> is a checkbox field in which we can select multiple data from the given choices.
Checkbox types can have different input element with same name but different values and we can select multiple of them.
<form action="abc" method="post"> <label >Hobbies:</label> <br /> Swimming: <input type="checkbox" name="hobbies" value="swimming"/> Cycling: <input type="checkbox" name="hobbies" value="cycling"/> Singing: <input type="checkbox" name="hobbies" value="singing"/> Other: <input type="checkbox" name="hobbies" value="other"/> </form>
Input type hidden
<input type="hidden" name="hidden"/> creates a hidden input field.
A hidden field can be used to pass data that cannot be viewed or modified by end user.
<input type="hidden" name="hidden" value="secret" >
Input type button
<input type="button" name="btn"/> creates a new button. We can use this to handle user interactions and events.
<input type="button" name="btn" value="Click me" onclick="alert('I was clicked')"/>
Input type submit
<input type="submit" name="submit"/> creates a new submit button. It is used to submit the form.
<form method="post" action="/abc" id="userForm"> <label for="username">Username</label> <br /> <input type="text" name="username" id="username" placeholder="Enter your username" /> <br /> <label for="password">Password</label> <br /> <input type="password" name="password" id="password" placeholder="Enter your password" /> <br /> <input type="submit" value="submit" name="submit" /> </form>
Input type image
<input type="image" name="image"/> creates an image as submit button.
It sends the X and Y coordinates of the click that activated the image button.
<form method="post" action="/abc" id="userForm"> <label for="username">Username</label> <br /> <input type="text" name="username" > <input type="image" name="image" src="https://learnersbucket.com/wp-content/uploads/2019/03/icons8-bootstrap-48.png" alt="Submit" width="48" height="48"> </form>
Input type reset
<input type="reset" name="reset"/> creates a new reset button. It is used to reset the data of all the input fields inside the form.
<form method="post" action="/abc" id="userForm"> <label for="username">Username</label> <br /> <input type="text" name="username" id="username" placeholder="Enter your username" /> <br /> <label for="password">Password</label> <br /> <input type="password" name="password" id="password" placeholder="Enter your password" /> <br /> <input type="reset" value="reset" name="reset" /> </form>
HTML5 Form Input Types
New html form input types which are not supported in older browsers will behave as type="text".
Input type color
<input type="color" name="color"/> creates a color picker. We can use this to choose different colors. It returns the color code in hexadecimal format.
The style of the color picker is browser specific.
<input type="color" name="color"/>
Input type date
<input type="date" name="date"/> creates a date picker. We can use this to choose date. It returns the date yyyy-dd-mm or other specified format.
The style of the date picker is browser specific.
Note: type="date" is not supported in Safari or Internet Explorer 11 and earlier versions.
<input type="date" name="date"/>
Input type month
<input type="month" name="month"/> creates a date picker. We can use this to select only month and the year.
It will open a date picker through which you can select month and year. The style of the date picker is native to the different browsers.
<input type="file" name="file"/>
Input type week
<input type="week" name="week"/> creates a date picker to select the week and year.
The style of the date picker will be default to browser.
<input type="week" name="week" />
Input type time
<input type="time" name="time"/> creates a time picker. It allows user to select a time.
A time picker will be shown to pick a time in 24hr or 12hr format depending upon the browser.
<input type="time" name="time" />
Input type datetime-local
<input type="datetime-local" name="dateandtime"/> creates a date-time picker. We can use this to choose date and time together. It returns the date an time in the specified format.
The style of the date time picker is browser specific.
Note: type="datetime-local" is not supported in Firefox, Safari or Internet Explorer 12 and earlier versions.
<input type="datetime-local" name="dateandtime"/>
Input type email
<input type="email" name="email"/> creates a email field. We can use this to validate email without any additional validations.
<input type="email" name="email"/>
Input type file
<input type="file" name="file"/> creates a file picker. We can use this to select and upload single or multiple files.
The file picker will open a pop up and will allow us to search any file inside the local computer. The style of the file picker is native to the different browsers.
<input type="file" name="file"/>
Input type number
<input type="number" name="number"/> creates a numeric input field. We can use this to restrict user to input only numbers.
We can also provide restrictions to add numbers in a given range only. If the numbers are greater then it will throw validation error while submitting the form
<input type="number" name="number" min="1" max="10" />
Input type range
<input type="range" name="range"/> creates a horizontal scroll bar. We can use this to select a number in the given range provided.
The design of the scroll bar will native to the browser
<input type="range" name="range" min="1" max="10" />
Input type search
<input type="search" name="search"/> creates a text fields. It is used to separate it from regular text fields.
<input type="search" name="search"/>
Input type tel
<input type="tel" name="tel"/> creates a text fields. It is used to get the telephone number.
We can provide the pattern attribute to force the user to add telephone number in particular format. It will throw error while submitting the form if input is not in correct format.
<input type="tel" name="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
Input type url
<input type="url" name="url"/> creates a input fields in which user can add the url.
url field can be automatically validated depending upon the browser when form is submitted.
Smartphones which recognize URL field adds .com to their keyboard.
<input type="url" name="url" />