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?

Forms - Form Tag & Attributes

Forms are used to collect information over the Internet from a user. Forms are essential for communication between the user and the Webmaster. They can be utilized for many purposes. Some forms may be used for logging-in to a website while others may be significantly more complex allowing the user to shop or send Web mail.

In the following posts, we will look at the common form elements, their purpose, how to organize forms, and provide an opportunity to practice building simple, as well as more complex forms.

Let’s start with the first tag necessary to create a form, the form tag (<form></form>). All elements of a form must be placed in-between the opening and closing form tag. If a form element is not between these tags, it will not function as a part of the form.  Although a Web page may have more than one form tag on it, it is not recommended. Even though multiple forms may exist on a page, they must not be nested (one inside the other).

The form tag has three attributes that are important to understand. The first being the name or id, the second the  method attribute, and finally the action attribute.

The name or id attribute is used to identify one form from another. The value used should be descriptive of the forum and its purpose. It should NOT contain a space or reserved characters.

The second attribute that is rather important is the method attribute. The method attribute specifies the manner in which the form data is sent. There are two possible values the the method attribute can use: get and post. Get appends the form data to the URL of the page to which the data is sent. This is a severe privacy issue if telephone numbers, social security numbers, or other sensitive data is part of the form.

Post on the other hand, does not append the form information to the URL. Data is sent behind the scenes along with a request for the new Web page. Since the data is not visible in the URL, post is more secure than with the previously mentioned get method. In addition, post allow a larger amount of text to be sent to the corresponding action page than the get method.

The final attribute of significance, is the action attribute. This attribute specifies the action that will take place when the submit button is pressed. A form may accept user data, it cannot work alone. It needs a another file that will accept the data and process it in some way. The easiest way to process the data from a form is by giving an email address as the data’s destination (mailto:farmer@dairy.com). While this is easy, it is not practical for large amounts of data. Not to mention, their is no way to rapidly sort the data. This requires a database. The more practical solution is to select a Web page that is a .php or .asp script file.These programming languages can process the form data and properly insert it in a database.

The w3.org’s explanation of forms.

A quick, concise tutorial on forms.

Today’s Objectives:

• Understand what a form can be used for
• List and explain the purpose of the name, method, & action attributes (for the form tag)
• Place a form into a Web page

Classwork: Lesson 6-1 and vocabulary.

Prep Questions:

• A tool that accepts user data from a Web page.
• A text box designed to gather short bits of information.