Carnegie Mellon University
Office of the CIO  ›  Computing Services  ›  Services  ›  Communication and Collaboration  ›  Websites  ›  Web Forms  ›  How to Use MailTo Forms  ›  Select Form Elements

Select Form Elements

You use input elements to request information on a form. They include text boxes, text areas, radio buttons, checkboxes, selection lists and submit buttons. Here is an example of a form with these input elements.

What is your name?
[This is a text box.]
 

What kind of sandwich would you like?
[These are radio buttons.]
 Ham
 Turkey
  Roast Beef
  Vegetarian

What condiments would you like on your sandwich?
[These are checkboxes.]
 Mustard
 Mayonnaise
 Ketchup
 Lettuce
 Pickle

Please select a side to go with your sandwich:
[This is a selection list.]

Comments:
[This is a text area.]

[This is a submit button.]

Below are HTML code snippets of the individual input elements shown above. You can copy and paste the snippets into your HTML source and modify them as needed.

A text box allows an individual to enter text freely. You can use it for single-line information such as name, email address, phone, and so on.

Example - Text Box

What is your name? 

Text Box HTML Code

<p>What is your name? <input name="Name" type="text" size="30"/></p>

Note: The size attribute (number of characters) is optional. In this example, the size of the text box is 30 characters.

A text area is similar to a text box, but it has a larger, multiline input area.  You can use a text area for information such as comments and questions.

Example - Text Area

Comments

Text Area HTML Code

<p>Comments<br />
  <textarea name="Comments" cols="45" rows="3"></textarea>
</p>

Note: The cols attribute (number of characters) and the rows attribute (number of text lines) designate the size of the text area. In this example, the size of the text area is 45 characters wide and 3 rows high.

A radio button allows an individual to select one item from a list.

Example - Radio Button

What kind of sandwich do you want?
 Ham
 Turkey
 Roast Beef
 Vegetarian

Radio Button HTML Code

<p>What kind of sandwich do you want?<br />
<input name="sandwich" type="radio" value="Ham" /> Ham<br />
<input name="sandwich" type="radio" value="Turkey" /> Turkey<br />
<input name="sandwich" type="radio" value="Roast Beef" /> Roast Beef<br />
<input name="sandwich" type="radio" value="Vegetarian" /> Vegetarian
</p

Note: The name attribute must be the same for all items grouped together (e.g., "sandwich"). The value attribute is specific to the relevant item (e.g., "Ham").

A checkbox allows an individual to select multiple items from a list.

Example - Checkbox

Which condiments do you want on your sandwich?
 Mustard
 Mayonnaise
 Ketchup
 Lettuce
 Pickle

Checkbox HTML Code

<p>Which condiments do you want on your sandwich?<br />
<input name="condiments" type="checkbox" value="Mustard" />Mustard<br />
<input name="condiments" type="checkbox" value="Mayonnaise" />Mayonnaise<br />
<input name="condiments" type="checkbox" value="Ketchup" />Ketchup<br />
<input name="condiments" type="checkbox" value="Lettuce" />Lettuce<br />
<input name="condiments" type="checkbox" value="Pickle" />Pickle<br />
</p>

Note: The name attribute must be the same for all items grouped together (e.g., "condiments"). The value attribute is specific to the relevant item (e.g., "Mustard").

A selection list allows an individual to chose one item from a drop-down menu.

Example - Selection List

Please select a side with your sandwich.

Selection List HTML Code

<p>Please select a side with your sandwich.<br />
  <select name="side">
    <option selected="selected">--Select One--</option>
    <option value="Potato Chips">Potato Chips</option>
    <option value="Fruit Salad">Fruit Salad</option>
    <option value="Chicken Soup">Chicken Soup</option>
  </select></p>

A submit button allows an individual to send the choices entered for processing.

Example - Submit Button

Submit Button

<p><input name="Submit" type="submit" value="Submit" /></p>

Note: The type attribute must be "submit", but the value can be another term, for example, "Order" or "Confirm".