Form Input Types

The <input > tag by itself has no functionality. It requires attributes to define the specifics of its function. The input tag is a self-closing tag (empty element), be sure to remember to add the space and slash before the closing carrot.

The three most commonly used attributes for the input tag are: type, name and value. In HTML it looks like this:

<input type="x" name="x" value="x" >

These three primary input attributes specify users options of some kind.

The value for the name attribute provides a unique identity for the input element. DO NOT use odd characters in the name value. They can cause problems.

name="x" - a unique name to identify the data from that entire input area. (group name)

value="x" - a unique name to identify each individual piece of data.

The type attribute is the most important. It specifies the kind of input device available to the use. There are many values available for type, but we will just look at the most commonly used ones.

Three most common ones:

• type="checkbox"
• type="radio"
• type="text"

Three used primarily on buttons:

• type="submit"
• type="reset"
• type="hidden"

Refer to the text for less common values and their uses.

1. Let's take a look at the type="checkbox" value.

Checkboxes allow more than one selection for each option.

What are your favorite foods?

Here is the code :

<input type="checkbox" name="food" value="tacos" > Tacos <br>
<input type="checkbox" name="food" value="burrito" > Burrito <br>
<input type="checkbox" name="food" value="pizza" > Pizza <br>
<input type="checkbox" name="food" value="spaghetti" > Spaghetti <br>
<input type="checkbox" name="food" value="hamburger" > Hamburger <br>

Notice that each <input type="checkbox" name="same name" value="different value"> name=" " has the same name so it links the checkboxes together as one group. The values are different - they are the data that is sent to your email if the box is checked or selected.
Note: I added a br tag - otherwise the boxes would have gone in a row instead of one under another.

2. Now let's take a look at the type="radio" value.

Radio buttons allow only one selection for each option. If you check one, any other selection will uncheck. Try it and see.

Select your age group:

The code looks like this:

<input type="radio" name="age" value="0 - 10" > 0 - 10 <br>
<input type="radio" name="age" value="11 - 20" > 11 - 20 <br>
<input type="radio" name="age" value="21 - 30" > 21 - 30 <br>
<input type="radio" name="age" value="31 - 40" > 31 - 40 <br>
<input type="radio" name="age" value="41 - 50" > 41 - 50 <br>
<input type="radio" name="age" value="50+" > 50+ <br>

Radio buttons with the same name are members of a group. Each one should have a different value so you know which button the user selected.

3. Let's take a look at the type="text" value.

The code looks like this:

What is your email address: <input type="text" name="email" size="40" >

There are two other attributes specific to type="text":

• size="x" determines the width (in characters) of the text box.
• maxlength="x" - the maximum number of characters allowed.