Form tags

There are also special form tags that will render in a browser elements useful to gather information from a user. A form is specied as

<form method="get" 
      action="http://wherever.com/cgi-bin/process.cgi"
      enctype="application/x-www-form-urlencoded">
<!-- Various form elements follow
-->
</form>

where the (optional) attributes illustrated are

• method: this is usually either get or post. The difference between these is that, with get, the form information is sent as part of the url (uniform resource locator) address, whereas in post, the information is sent within the content of the request.
• action: this gives the location of where the form data should be sent to - if not specified, the information is sent to the originating page.
• enctype: this specifies the type of encoding.

Some examples of form elements are listed below. For each such element there are two important aspects - the name of the element, which is used as a label for that piece of data, and the value, which is the value the user has filled out for that particular element.

• <input type="text" name="search" size="13" />
  This gives a one-line input box by which the user types in some data. If a value attribute is specified, this will be used as the default.
• <textarea rows="5" cols="72" name="comments"></textarea>
  This gives a multi-line input area, often used to enter comments. If a value attribute is specified, this will be used as the default.
• <input type="checkbox" name="fries" value="yes" />
  This is used to display a checkbox, which is used as the answer to some boolean (yes/no or true/false) question.

• <input type="radio" name="card" value="Visa" checked />Visa
  <input type="radio" name="card" value="Mastercard" />Master Card
  <input type="radio" name="card" value="AmEx" />American Express
  

  This is used to display a series of radio buttons. Each button is associated with the same name, but they have different values - if one gets selected, the others are deselected. The default value is denoted by checked.

• <select name="province">
  <option value="AB">Alberta</option>
  <option value="MB" selected>Manitoba</option>
  <option value="SK">Saskatchewan</option>
  <option value="BC">British Columbia</option>
  </select>
  

  This is used to display a pull-down list of choices. The default is denoted by selected.
• <input type="submit" value="Send it off!" />
  This is the submit button, used to send the form information off. value, if present, will be used as the text appearing on the button.
• <input type="reset" value="Restore defaults" />
  This is a reset button, used to set the form values back to their default values. value, if present, will be used as the text appearing on the button.

To see how form data gets sent (via the get method), visit http://www.google.ca/, type in some search term, and press the Google Search button. The page displaying the results will have in the address bar a location such as

http://www.google.ca/search?q=Perl+rules&ie=UTF-8&hl=en

which has been truncated to fit on one line. What this address means is that the script processing the data (http://www.google.ca/search), has received some form elements in the form of a query string, which is everything that appears after the ? in the address. The query string is a series of name=value pairs, separated by the & symbol (or, in some cases, a semicolon ;). In this case there are three form elements, q, ie, and hl, which for this search have taken on values Perl+rules, UTF-8, and en, respectively.