Everything you'll ever need to know about HTML Input Types

Pretty much every application we develop using HTML uses input somewhere, but there's a bunch of input types 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 says reset. 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.

Comments

[Mahmoud Ahmed]

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!

[Andrew Baisden]

Good write up you covered a lot of features here.

[FJones]

1. "validates" is a bit of a misnomer. It ensures the UI element used to input the data on a supporting device (i.e. mobile) is appropriate for the type, and autocompletes are coerced into something sensible for the field. It doesn't (with a few exceptions, like the number type's supplementary attributes) actually validate the data (say, showing warnings on submit, or marking the fields as invalid for CSS/JS).
2. Nitpick: The range type isn't about the value being a range, but the value being within a range.

[Johnny Simpson]

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.