DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Everything you'll ever need to know about HTML Input Types
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
mahmoudai1 profile image
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!

Collapse
andrewbaisden profile image
Andrew Baisden

Good write up you covered a lot of features here.

Collapse
fjones profile image
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.
Collapse
smpnjn profile image
Johnny Simpson Author

It does show warnings on submit, but as mentioned you should do your own backend validation as well.
Image description

And yes true, the range one is fixed.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.