HTML

Everything you 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:

hidden type for inputs

(you can’t see this one, since it’s hidden! 😁)

text type for inputs

This is for any text input

password type for inputs

Anything entered here will be a password.

submit type for inputs

This produces a submit button.

<input type="submit" value="Submit" />

button type for inputs

This produces a button, which does not submit the form.

<input type="button" value="My Button" />

search type for inputs

This will show a little x when you start typing in it.

radio type for inputs

The radio type is for a set of items, where we can only select one. We can differentiate different sets of radio buttons by giving them matching name attributes. For example, below, the first two inputs have the name radio-set, so we can only select one from that set.

Note: that the value is the value submitted when we click submit. If we want to give these a label, we need to add text beside the input or use the label html tag.

<form>
    <input type="radio" name="radio-set" value="Some Radio" />
    <input type="radio" name="radio-set" value="Another Radio" />
    <input type="radio" name="radio-set-2" value="Another Radio" />
    <input type="radio" name="radio-set-2" value="One Radio" />
</form>

checkbox type for inputs

The checkbox type is similar to radio, only we can select multiple items here. Again, we can split them into sets, but you’ll still be able to select multiple inputs.

<form>
    <input type="checkbox" name="checkbox-set" value="Some Checkbox" />
    <input type="checkbox" name="checkbox-set" value="Another Checkbox" />
    <input type="checkbox" name="checkbox-set-2" value="Another Checkbox" />
    <input type="checkbox" name="checkbox-set-2" value="One Checkbox" />
</form>

reset type for inputs

This will reset all other form input elements. It creates a button which simply says Reset:

<form>
    <input type="text" value="Some Value" />
    <input type="reset" />
</form>

Try changing the value of the input below, and then click Reset:

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

tel type for inputs

In theory, this will produce an error if you provide an invalid telephone number after pressing submit - however in practice, it does not enforce any particular syntax. So tel is quite similar to text, only it can’t contain a carriage return or line feed.

<form>
    <input type="tel" />
    <input type="submit" value="Submit" />
</form>

url type for inputs

This will not allow anything which is not in URL format:

<form>
    <input type="url" />
    <input type="submit" value="Submit" />
</form>

email type for inputs

This will only allow valid emails:

<form>
    <input type="url" />
    <input type="submit" value="Submit" />
</form>

number type for inputs

This will validate that the input is a number.

<form>
    <input type="" />
    <input type="submit" value="Submit" />
</form>

range type for inputs

This will create a range bar. Since it lets us select a range, we can also use the min, max, and step attributes to set the minimum value, maximum value, and how much each step increases by respectively.

<form>
    <input type="range" min="1" max="10" step="1" />
    <input type="submit" value="Submit" />
</form>

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:

date type for inputs

month type for inputs

week type for inputs

time type for inputs

date type for inputs

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.

More Tips and Tricks for HTML

• How does enterkeyhint work in HTML?
• New HTML Native Modals, Without the Fuss
• RGB, HSL and Lab Color Codes
• How to wrap text in HTML Canvas
• Creating Shapes with HTML Canvas
• Everything you need to know about HTML Input Types
• How to save HTML Canvas as an Image
• Getting Started with HTML Canvas
• Sure Fire Ways to Speed up Your Website
• How to Add Images to HTML Canvas