Pretty much every application we develop using HTML uses input
somewhere, but there's a bunch of input type
s you might not know about. So let's take a look at everything you might not know about input
types.
Common HTML Input Types
In HTML, we can give an input a specific type. For example, a simple text
input, where the user can type text into a box, looks like this:
<input type="text" />
The most common input types we use are:
-
hidden
- a form input that is hidden, usually for storing values the user doesn't need to see -
text
- a simple text input. -
password
- an input where the text is starred out since it is a password. -
submit
- a submit button for submitting the form. -
button
- like a submit, but it doesn't submit the form! -
radio
- a button which can be selected, from a range of list items. -
checkbox
- a set of buttons which can be checked and unchecked.
As well as these basic types:
- there is also
search
- although not as commonly used, it can be used for a search input field, which shows a little cross when you type into it. - and we also have
reset
, which creates a button which does not submit the form, and saysreset
. It will reset all other form elements.
These common input
types are all over the place, and they look like this:
Basic HTML Inputs with Type Validation
As well as these simple types, there are a few others which can be quite useful, such as:
-
tel
- for a telephone number. -
url
- validates that the input is a url. -
email
- validates that the input is an email. -
number
- validates that the input is a number. -
range
- validates that the input is within a range.
Note: these input types do validate the input on the client side, but it should not be used as a method to ensure that an input only contains that type. For example, email
only accepts an email type, but a user can easily change the frontend to submit something which is not an email
. So make sure you check on the backend too.
Date HTML Input Types
Most of us are familiar with type="date"
, but there are a bunch of date types for HTML inputs, including:
-
date
- any date input. -
month
- lets you select a single month. -
week
- lets you select a single week. -
time
- lets you select a specific time. -
datetime-local
- lets you select date/time combination.
Each of these are shown below. These are pretty useful, although limited to the browser's implementation of the UI:
Other HTML Input Types
As well as all of these, we also have the following additional types:
-
file
- for uploading a file to the server. -
image
- the strangest of all, for graphical submit buttons!
file type for inputs
The file type for inputs creates a file upload interface:
<input type="file" />
image type for inputs
This is probably the one you are least likely to use. It lets you give an src
and alt
attribute to your input, which is used as the submit button for your form - ultimately making your input act like an image:
<input type="image" alt="Login" src="login-button.png" />
Conclusion
That covers every HTML input type you can use today. I hope you've learned something new, even if it's just the quirky type="image"
input type. If you want to learn more about web development, you can follow me on twitter, or check out fjolt.
Top comments (4)
Additional information for the “file” -
“enctype” attribute should be added to the form element with the value ‘multipart/form-data’ in order to upload the file(s) to the server.
Also, “multiple” attribute is added to the input element in order to allow uploading multiple files.
Thanks for sharing!
Good write up you covered a lot of features here.
It does show warnings on submit, but as mentioned you should do your own backend validation as well.
And yes true, the range one is fixed.