In the last post we saw the email input type. In this post we’ll take a quick look at other types of inputs that we can have. You don’t really need to remember these. Once you start using some of these types they’ll become familiar. As always, you can find all these types in the MDN Reference.
A type=”radio” attribute allows a user to choose one item from a list of options. There must be the same number of <input> tags as there are options.
If you click on one of the options you will find that whatever was selected before gets de-selected. For this to work properly all inputs must have the same name=”” attribute. Below we’ll change the name value of option one to “radios”. We’ll find that now we can have option 1 and either option 2 OR option 3 selected.
A radio input type is good if you want the user to choose only one option. But what if we them to select any that apply? For that we use the type=”checkbox” attribute. Just like type=”radio” attribute, the type=”checkbox” attribute will need the same amount of <input> tags as the number of options we have and all the inputs have to have the same name=”” attribute.
The type=”date” attribute allows you to either type-in or pick a date from a calendar.
The Select Tag
You might think it a bit strange, but to make a drop-down menu we don’t use the <input> tag at all. We use the <select> tag. If we use the <select> tag by itself we’ll just get an empty menu. In order to have the appropriate menu items we must also use the <option> tag. Let’s make a simple drop-down menu where a user can select their favorite type of animal.
Don’t forget the closing tags. Both the <select> and <option> tags have to be closed. Here is what it looks like in the browser.
To use whatever item the user chooses we need to do two things. First, in the <select> tag we have to use the name attribute. The second thing we need to do is give each option a value attribute.
Let’s add a submit button to submit this small form. Since the action and method attributes were left out, the default values will be used which will allow us to see that what we named our <select> tag, in this case “animals”, will be equal to any value that we select from the drop-down menu.
When submitted, looking at the address bar we see:
We’ve covered <input type=”text”>. That gives us a one line text input. But what if we need more than one line? For that we use the <textarea> tag.
If we need more or less room, we can tell HTML how many rows and columns we want with the rows=”” and col=”” attributes.
As with all of our inputs, to use what was entered into the text box we have to give it a name by using the name=”” attribute in our <textarea> tag.
Tags To Remember