HTML forms I

Derek Bridge

Department of Computer Science,
University College Cork

HTML forms I

Aims:

• to learn how to create HTML forms
• to learn the details of submitting the user's data to the server

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

The form tag and its attributes

• The form element has two attributes, action and method:

  <form action="process.php" method="get">
      …
  </form>

The input tag and the type and name attributes

• Most controls are specified using the input element (which is a void element)
• The type attribute specifies what kind of control we want:

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

  New to HTML5 are:

  email, url, date, time, datetime, month,
  week, number, range, search, tel, color

• The name attribute is also required for all types except submit and reset
  • Its value will later be used in the PHP script

Text entry fields

• If you want a text entry field (for a single line of text), use an input element with type="text":
  <input type="text" />
• But it's useless unless you give it a name:
  <input type="text" name="surname" />
• By default, it is 20 chars wide, but optionally use the size attribute to change its width:
  <input type="text" name="surname" size="25" />
  
• By default, the user can type as many chars as s/he wishes (it scrolls horizontally!), but optionally use the maxlength attribute to restrict this:
  <input type="text" name="surname" size="25" maxlength="25" />
• By default, the field is initially empty, but optionally use the value attribute to supply your own initial value:
  <input type="text" name="town" size="25" maxlength="25" value="Cork" />
• By default, the field is enabled, which is what we want. If you want to use a field only for output, then include disabled="disabled"

Reset buttons

• A form might contain a reset button, which the user can press to clear the data s/he has typed
• Use an input element with attribute type="reset":
  <input type="reset" />
• By default in Chrome, the button has Reset written on it but you can supply your own label using the value attribute:
  <input type="reset" value="CLEAR" />

Submit buttons

• To be useful, a form will contain a submit button, which the user can press to send the data to the server (or whatever)
• Use an input element with attribute type="submit":
  <input type="submit" />
• By default in Chrome, the button has Submit written on it but you can supply your own label using the value attribute:
  <input type="reset" value="GO!" />

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 form
  • The data is arranged as follows

    firstname=Hugh&surname=Jeegoh

…and behind the scenes

• Not only is the data arranged in name/value pairs, behind the scenes the browser also encodes the data using standard URL encoding:
  • This replaces spaces, slashes and other chars that are not allowed in URLs by their hexadecimal equivalents
  • E.g. spaces are replaced by %20 (which may display as '+'); slashes by %2F
  • E.g. the user types Ann and O Domini into the form
  • The data is arranged and encoded as follows

    firstname=Ann&surname=O%20Domini

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 process.php?firstname=Hugh&surname=Jeegoh

Handling a form

Do we really need forms?

• If method="get", you can submit your data directly without using a form
• E.g. the user can type in the URL with the data added to the end:
  http://www.cs.ucc.ie/~dgb/courses/pwd/19/process.php?firstname=Hugh&surname=Jeegoh
• You can even include such a URL as a hyperlink in a web page:
  <a href="http://www.cs.ucc.ie/~dgb/courses/pwd/19/process.php?firstname=Hugh&amp;surname=Jeegoh">Click here</a>