Home / amazing-forms
Amazing Forms
Learning Resources
Choose the best input types
The appropriate input types enables the layout change in the on-screen keyboard. This will help user to fill the form very quickly.
Here are the new HTML5 input types that we should use:
| Input type | Use case |
|---|---|
| url | For URI scheme http:// ftp:// or mailto: |
| tel | For entering phone number |
| For email, shows @ on keyboard | |
| search | For Go button |
| number | any rational integer(not for iOS) |
| range | slider control |
| datetime-local | for entering date and time with local timezone |
| date | For entering date only* |
| time | For entering time only* |
| week | For entering a week only* |
| month | For entering a month only* |
*No timezone
Codepen Examples
See the Pen Amazing Forms by Aditya Agarwal (@aditya81070) on CodePen.