Input I

In the previous chapters, I already showed a few ways to use the <input> tag. For example, you use it for the submit button of a form, but also a basic empty text field. The only difference? The value of the type attribute.

There are many ways to provide input. As time goes on, even more are added to the HTML standard, if people deem them common enough. That’s why they chose to use the same <input> element for all of them, picking the exact type using the well-named type attribute.

As always, you want to be as precise as possible. Use the input tag that best describes the input it should contain. For example, if you want the user to enter an email, you can use a generic text field. But HTML also supports an email input, so use that! Not only does it describe your webpage better, you’ll also get help from browsers. They’ll automatically restrict input and check whether a valid email was entered.

As always, we move from “big” to “small”. This chapter starts with some attributes that apply to all (or most) input elements, changing them in crucial ways. Once you know these, we can dive into every specific type you can create. (And because you’ve already seen these attributes, you also already know how to manipulate each type to do exactly what you want.)

Attributes

Global

Below is a list of global attributes the <input> tag can take. This means they are applicable to all types!

Once you see the list, you’ll understand why they exist. Minimized attributes have an empty values cell.

Try enabling the submit button in the example below. And try submitting the form without filling in the required field(s).

Numeric Attributes

These work on any input field related to numbers.

Below is a form for a store that somehow only prices products in multiples of 10.

Text Attributes

These work on any input field related to text.

Hidden field

This might actually be the most common input. You just don’t know it, because you never see it :p

Remember how forms automatically collect and submit all data within them? Well, sometimes you need data that’s not directly input or seen by the user.

For example, the user might input some numbers, and then you calculate something behind the scenes. This result should be sent with the form, but you don’t want the user to see it.

That’s when you use type="hidden". Remember that you can always use the value attribute to set a (default) value on an input.

Text field

If not the hidden input, then the text input is surely the most common. A simple text field. The input is always on a single line. (If you want something else, remember the existence of the <textarea> element.)

Create it using type="text".

Password field

The second most common input. A text field … but all characters are changed into dots that don’t reveal your password to anybody spying your screen :p

Create it using type="password".

Number field

If the input must be a number, use this one. It allows text input, but also shows little arrows to click on.

Create it using type="number".

Slider

The input is still a number, but sometimes it feels much better to use a slider. A slider is less precise (it’s harder to place it on some exact number), but faster to use and more intuitive.

Create it using type="range".