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.
Text Box and Text Area
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 /> |
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.
Radio Button
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 /> |
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").
Checkbox
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 /> |
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").
Selection List
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 /> |
Submit Button
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".