Continuing on last chapter, let’s talk about some more types you can set on the <input> element. These are less common, with the most specific (and thus least common) ones all the way at the end.
Selection
HTML distinguishes two ways to select something.
- Only one option is allowed (out of all possible options)
- Any number of options is allowed
The first is called a radio select and the second a checkbox select
Radio
By default, these show up as little circles. When selected, they have a dot inside. Otherwise, they’re empty.
How do you tell HTML that radio options belong together? By giving them the same name and id.
- When you select a new one, the browser automatically deselects the other. (As, remember, a radio select only has exactly ONE option selected at all times.)
- When the form is send off, the browser only sends the value that was actually selected.
Create it using type="radio".
It is common to group all the radio buttons inside a <fieldset> element, using the <legend> as the general label.
Checkbox
Checkboxes don’t care how many are selected. As such, they are not “connected”. In a sense, a checkbox doesn’t care about any other checkboxes that exist. They are toggled on/off individually.
It is up to you to give them sensible names, so you can use them properly once you receive the form data. (As always,this isn’t HTML, this is JavaScript.)
Create it using type="checkbox".
To keep the HTML clean and obvious, it’s also recommended to group these inside a <fieldset>.
It might be tempting to use checkboxes for everything. Less work, less restricted, right? I will answer the same thing I always do. It loses its meaning. Making something a radio button clearly signals that it’s a type of input that requires precisely ONE thing selected. Both to the user and to the computer reading the webpage. Don’t throw away these advantages: pick your elements wisely.
File
This input holds a file. For example, when a user registers an account, you allow them to upload a profile picture as well.
Use the multiple attribute to allow multiple files. Use the accept attribute to tell the browser which file types you accept. This is a comma-separated list.
Reset
This one is straightforward. It creates a button that, when clicked, automatically resets the whole form to their default values.
Try it in the example. Type something, click the reset.
Dates
Dates are always nasty, in any programming language. There are so many ways to enter them. Timezones exist. That’s why we have many types with subtle differences.
It’s highly recommended to use one of these, instead of a blank text field in which your user types. It will surely lead to confusion and users entering dates in the wrong format. When you use the right type, the browser will help you. It validates the input and usually displays an agenda or “date picker”.
| Attribute | Description |
|---|---|
date | Requires a date. |
datetime | Requires a date and a time (with timezone). |
datetime-local | Requires a date and a time (without timezone). |
month | Requires a month and a year. |
week | Requires a week. |
time | Requires a time (no timezone). |
Why is there no “year”? Because a year picker is nothing more than a number picker, or more commonly a dropdown list with the last 100 or so years.
Other
Finally, we have the last set of input types, for very specific use cases.
| Attribute | Description |
|---|---|
color | Requires a color. |
email | Requires a valid email address. |
tel | Requires a valid telephone number. |
url | Requires a valid URL. |
search | Means this input will be used for searching. |
Want to support me?
Buy one of my projects. You get something nice, I get something nice.
Donate through a popular platform using the link below.
Simply giving feedback or spreading the word is also worth a lot.