Forms

Home     Building Blocks     HTML Documents     Tags     Hyperlinks     CSS     Forms
 

Constructing Forms

Constructing forms in HTML is very similar to creating any other part of a Web page. Forms can contain text boxes, special password boxes, radio buttons, checkboxes, drop-down menus, larger text areas, and even clickable images.

Parts of a Form

  • The form tag <form>....</form>
  • The form elements (like field and menus)
  • The submit button (which sends the data)

<form method="post" action="none.cgi">

<p>Name: <input type="text"
name="visitor_name" size="30" /></p>

<p>E-mail: <input type="text"
name="visitor_email" size="30" /></p>

<p>Computer: </p>

<p><input type="radio"
name="computer"value="Mac" />Macintosh</p>

<p><input type="radio"
name="computer" value="Win" />Windows</p>

<p><input type="submit"
name="submit" value="Send info" /></p>

</form>
Notice how each form element has a name attribute and some have a value. The value attribute determines the data that is sent to the server for that element. Form elements that work by checking or selecting must have the value specified in the value attribute. Text boxes do not have a value because they allow the visitor to type in any value.

See this Form

 

Processing the Data from Forms

CGI (Common Gateway Interface) is used to pass data from the user to the the server through forms. CGI script is a program that communicates with the server in a standard way. Each element on your form has a name and a value associated with it. The name identifies the data that is being sent and the value is the data. When a visitor clicks the submit button, each name-value pair is sent to the server.  See an example of how data from a form appears below:

 

Completed Form

Data Sent to CGI Script
visitor_name=Kerry+Rice&

visitor_email=krice@boisestate.edu.

com&computer=Win&submit

Send+info
When the visitor enters information in the text fields and chooses a radio button, the name-value pairs are set. Clicking the submit button (Send info) will send the name-value pairs to the CGI script on the server. This is what the data that is sent to the CGI script looks like.  Notice that each name is linked with its value with an equals sign (=). An ampersand separates each name-value pair and spaces are replaced with plus signs.

Sample Script