(X)HTML forms

Derek Bridge

Department of Computer Science,
University College Cork

(X)HTML forms

Aims:

• to learn how to create (X)HTML forms
• to learn the details of submitting the user's data to the server
• to learn a little about making forms accessible
• to learn how to use CSS to style a form

Forms

• A form on a web page gathers data from the user
• The form contains controls, such as buttons, text fields, menus, etc.
• But the user's data is sent back to the server where it is processed by, e.g., a PHP script
• Guestbook example using
  • a form element with attributes method and action
  • one or more controls (input, textarea, select or button elements)
  • one of the controls is a submit button (an input element with attribute type="submit")

<form method="dummy.php" action="get">
 ...
</form>

The input and the type attribute

• Most controls are specified using the input element
• The type attribute specifies what kind of control we want:

  text, password, checkbox, radio, button
image, file, hidden, submit, reset

• The name attribute is also required for all types except submit and reset
  • It will later act as the key and the user's data will act as the value in an associative array

Text entry fields

Use an input element with type="text" if you want a text entry field (for a single line of text)

• By default, it is 20 chars wide, but use the size attribute to change this
• By default, the user can type as many characters as s/he wishes (it scrolls!), but use the maxlength attribute to restrict this
• By default, the field is initially empty, but use the value attribute to supply your own initial value

<input type="text" name="userid" size="25"
 maxlength="30" value="enter your user id" />

Submit and reset buttons

• To be useful, a form will contain a submit button:
  • an input element with attribute type="submit"
  • the user presses this to send the data to the server (or whatever): see next two slides
• A form might contain a reset button:
  • an input element with attribute type="reset"
  • the user presses this to clear the data s/he has typed
• The buttons have default labels (e.g. Submit Query and Reset) but you can supply a label using the value attribute

<input type="submit" value="GO!" />
<input type="reset" />

When the user presses submit...

• When the submit button is pressed, the browser arranges the data in name/value pairs
  • E.g. the user types Hugh and Jeegoh into the guestbook form
  • The data is arranged as follows

    first=Hugh&surname=Jeegoh

• It also encodes the data, e.g. replaces spaces by +
  • E.g. the user types Ann and O Domini into the guestbook form
  • The data is arranged and encoded as follows

    first=Ann&surname=O+Domini

And then...

• After the data is encoded, the browser creates an HTTP request
  • the command (method) is given by the method attribute
  • the URL is given by the action attribute
  • if method="get", the data is added to the end of the URL after a question mark, e.g.:

    GET guestbook.php?first=Hugh&surname=Jeegoh HTTP/1.1

  • if method="post", the data is included in the HTTP request body, not the header

    POST guestbook.php HTTP/1.1

    first=Hugh&surname=Jeegoh

GET or POST?

• When to use GET,
  • for a short form with few fields
  • to allow the URL (with the data) to be bookmarked, or used elsewhere
• When to use POST,
  • for a longer, more complex form
  • for security, because encryption of the data is possible using POST

Accessibility

• There are extra (X)HTML tags and attributes for accessibility
  • some are for grouping and labelling other elements
  • some are for keyboard alternatives for selecting/activating controls
• (These extra tags give good selectors for CSS rules too)

Accessibility: the label element

• Instead of this

  Surname: <input type="text" name="surname" />

• Give the input control an id attribute and use a label with a for attribute:

  <label for="surnameField">Surname:</label>
<input type="text" name="surname" id="surnameField" />

• Why? Voice browsers can use it
• Class exercise: What's the difference between the name and id attributes?

Accessibility: the fieldset and legend elements

• Group together related controls inside a fieldset element
• Include a legend element nested in the fieldset to describe the group of controls
• Why? Voice browsers may use these elements

<fieldset>
 <legend>Visitor's name</legend>
 <p>
  <label for="firstnameField">First name:</label>
  <input type="text" name="first" id="firstnameField" />
 </p>
 <p>
  <label for="surnameField">Surname:</label>
  <input type="text" name="surname" id="surnameField" />
 </p>
</fieldset>

Accessibility: the accesskey and tabindex attributes

• Attributes of the input elements to help users who rely on the keyboard, rather than a mouse, to move between controls
• With accesskey,
  • specify a character that can be used as a keyboard shortcut (with the Alt key)
  • but you must find a way of showing the user what shortcut to use
• With tabindex,
  • specify the order in which controls will be selected by a user who uses the tab key

<input type="text" name="first" accesskey="f" tabindex="1" />
<input type="text" name="surname" accesskey="s" tabindex="2" />

CSS for forms

• Use all the usual stuff to change fonts, change colours, add borders, etc.
• Many people use tables for layout
• But CSS can be used instead, e.g. checkout.html, checkout.css
  • put each label and its control in a paragraph (or div, or li)
  • give the labels a width in ems
  • float the labels to the left, right-align them (if you want), add some right margin

label {                            
 width: 12em;                       
 float: left;                       
 text-align right;                                        
 margin-right: 0.5em;
 display: block;
}