Everything you'll ever need to know about HTML Input Types
Tags: html, webdev, tutorial, beginners
Published: 2022-08-07 15:14:00

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:
```html
<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:

{% codepen https://codepen.io/smpnjn/pen/abYKbQR %}

## 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.

{% codepen https://codepen.io/smpnjn/pen/XWEYWBq %}

## 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:

{% codepen https://codepen.io/smpnjn/pen/wvmXvXG %}

## 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:
```html
<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:
```html
<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](https://twitter.com/smpnjn), or check out [fjolt](https://fjolt.com/).