Form Elements - Part 1

A form is made up of many individual elements, including areas in which to key text and buttons to trigger the form submission. In this post we will examine basic text boxes, radio buttons, and check boxes.

The text box form element is a box into which a user can key text. Text boxes are good for accepting data when a user must enter a value such as a name or address. To create a text box, as well as many of the other form elements, you will use the <input> tag. For a textbox, you will need to supply values for the type and name attributes. The type attribute should be set to text and the value supplied for the name attribute should be descriptive, without spaces.

<input type=”text” name=”lastName”>

Radio buttons are a form element that allows a user to choose an option from a series of choices. The user’s choice is mutually exclusive, meaning that only one item may be selected from the choices presented. As with text boxes, radio buttons are created with the <input> tag. The value of the type attribute is set to radio. The value of the value attribute, should match the option available to select (Nov, Dec, etc). Finally, the name attribute is EXTREMELY important. The value of the name attribute should be descriptive with no spaces. All selections that belong to the same group MUST have the same name.

<input type=”radio” name=”birthMonth” value=”dec”>

Check boxes are similar to radio buttons in that they provide a set of predefined choicesrom which the user may select. Unlike a radio button, with check boxes the user may select more than one option.  The type attribute is set to checkbox and the value attribute should match the option available to select. As with radio buttons, all check boxes that belong to the same group MUST have the same name attribute.

<input type=”checkbox” name=”musicGenre” value=”punk”>

The w3.org’s explanation of forms.

A quick, concise tutorial on forms.

Today’s Objectives:

• Identify the different kinds of text boxes
• Explain the uses of radio buttons and checkboxes
• Place text boxes, radio buttons, and checkboxes in a Web page.

Classwork: Lesson 6-1 and vocabulary.

Prep Questions:

• The <form> tag has several attributes, among them the method attribute. Explain the options that the get and post values provide for the method attribute.
• Can more than one form be placed on a Web page? Can a <form> tag be nested inside another form tag?