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 seetext- 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 saysreset. 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 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" />
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.