Loading Please Wait...
Based on the data we want to collect from users, HTML form support different types of inputs such as dates, passwords, emails, url, phone, etc.
HTML input element have the following values for type attribute:
It defines a clickable button
<input type="button" value="Button">
It defines a checkbox to let users select one or multiple option.
<input type="checkbox" value="html" id="html">
<label for="html">HTML</label><br>
<input type="checkbox" value="html" id="html">
<label for="css">CSS</label>
It defines a color picker to let users select colors. It's visibility and layout depends on browser supports.
<input type="color">
It defines a date picker to let users select date. It's visibility and layout depends on browser supports.
<input type="date">
It defines a datetime picker with no time zone to let users select date. It's visibility and layout depends on browser supports.
<input type="datetime-local">
It defines an email. It is automatically validated for valid email depends on browser supports. Some mobile phone also support for email input and add ".com" or "@gmail.com" on keyboard.
<input type="email">
It defines a file input. Browser add a "Browse" button to select file. <form> element must include enctype="multipart/form-data" attribute when submitting files.
<input type="file">
It defines a hidden input that is not visible to user. When there is a need to send critical data along side the form such as token, use this filed.
<input type="hidden">
It defines an image as submit button
<input type="image" src="logo.png" width="40" height="40">
It defines a month and year picker. It's visibility and layout depends on browser supports.
<input type="month">
It defines a number input. It restrict user to enter only numbers (1, 2, 3, 1.2, etc.) characters and symbols are not allowed.
<input type="number">
It defines a password input. It's data is show ad dots.
<input type="password">
It defines a radio to let users select one option from set of multiple option.
<input type="radio" value="male" id="male">
<label for="male">Male</label><br>
<input type="radio" value="female" id="female">
<label for="female">Female</label>
It defines a range or slider.
<input type="range" min="1" max="100">
It defines a form reset button which reset all form values to defaults.
<input type="text">
<input type="reset">
It defines a search input similar to that of text field only a cross sign - "x" is added at the end.
<input type="search">
It defines a form submit button.
<input type="text">
<input type="submit">
It defines a telephonic input.
<input type="tel">
It defines a single line text input.
<input type="text">
It defines a time picker to let users select time (no time zone). It's visibility and layout depends on browser supports.
<input type="time">
It defines a URL input. It is automatically validated depending on the browser supports.
<input type="url">
It defines a week and year picker to let users select week and year. It's visibility and layout depends on browser supports.
<input type="week">
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved