Forms Basics

Outline (Forms Basics)

Forms Basics [10]
Structuring Forms [3]
Anatomy of a Basic Web App [2]

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(4) HTTP Web Services

Services can be provided through URI/HTTP
- URI-based services need input from the user
- the question is how the user gets information to the server
HTML forms provide an interface for assembling this information
- users fill out a form providing several fields
- the browser submits the entered information by HTTP to a URI
- the result of the request is displayed to the user
HTTP has two different methods for submitting data
- GET [Forms and GET (1)] encodes the data as a URI query string
- POST [Forms and POST (1)] encodes the data as HTTP request entity

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(5) Forms Mechanics

HTML forms are normal Web pages (using form elements)
The process receiving the form data produces a result page

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(6) Forms Markup

All form elements must be inside a form element
- specifies the URI for submitting the form values (action="URI")
- specifies the method for submitting the form values (method="GET [Forms and GET (1)]|POST [Forms and POST (1)]")
form contains regular HTML markup and form elements
- the regular HTML markup creates the form's layout (table, list, texts)
- the form elements create the controls for acquiring input data
Each form should have a submit button
- when pressing this button, the form values are sent to the action URI
- without such a button, the form values cannot be submitted

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(7) Forms Elements (User View)

HTML provides a small set of form controls
Sufficient for many applications

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(8) Forms Elements (Source View)

<form action="http://stevex.net/dump.php" method="POST" enctype="multipart/form-data"><table>
	<tr><td>Text:</td><td><input type="text" name="text" value="text input"/></td></tr>
	<tr><td>Password:</td><td><input type="password" name="password" value="hidden text"/></td></tr>
	<tr><td>Checkbox:</td><td><input type="checkbox" name="check" value="1"/> <input type="checkbox" name="check" value="2"/> <input type="checkbox" name="check" value="3"/></td></tr>
	<tr><td>Radio Button:</td><td><input type="radio" name="radio" value="1"/> <input type="radio" name="radio" value="2"/> <input type="radio" name="radio" value="3"/></td></tr>
	<tr><td>Text Areas:</td><td><textarea name="textarea" rows="2" cols="20"/></td></tr>
	<tr><td>Selection:</td><td><select name="select"><option selected="selected">XML</option><option>SGML</option></select></td></tr>
	<tr><td>Multiple Selection:</td><td><select name="mselect" multiple="multiple"><option>242</option><option>290-3</option><option>290-13</option></select>
	<tr><td>File Upload:</td><td><input name="file" type="file"/></td></tr>
	<tr><td valign="top" align="right">Hidden:</td><td><input type="hidden" name="hidden" value="hidden input"/></td></tr>
	<tr><td>Submit:</td><td><input name="submit" type="submit"/></td></tr>
        </table></form>

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(9) Date Entry

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>JavaScript Datepicker</title>
  <script type="text/javascript" src="date-picker.js"></script>
  <link rel="stylesheet" type="text/css" href="date-picker.css">
 </head>
 <body>
  <form action="http://stevex.net/dump.php" method="GET">
   <input type="text" name="date">
   <input type="button" value="calendar" onclick="displayDatePicker('date');">
   <input type="submit" value="submit date">
  </form>
 </body>
</html>

date-picker.html

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(10) Forms and GET

Limited to string-oriented form values
- but HTML forms also allow file upload (this requires POST)
All values of all form input fields are collected
- for text and selection fields, this is one input field
- for checkboxes and radio buttons, this collects the selected fields
The browser composes a URI query string
- the form submission is a set of name/value pairs (names may appear more than once!)
- using URI query string notation, it is appended to the URI of the form's action
GET is good!
- URI-encoded queries can be bookmarked and otherwise reused (e.g., cached)
- use GET when implementing a form that isn't changing data

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(11) Forms and POST

GET encodes the values in the URI
- for file uploads, this is not possible
- HTTP's POST request method can upload data
POST sends a request containing an entity
- the HTTP request then looks similar to a response (header fields and entity)
- the receiving process (the Web server) accepts the POST body
Entities can use any format (it is specified in a header field)
- just like e-mails, entities can have multiple parts
- the parts are separated using the standard MIME mechanism

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(12) POST Form Processing

POST is used if the form specifies it
- it should be used for changing (inserting or updating) data
- it should be used for file upload forms (otherwise, only the name is uploaded)
File upload forms must specify the appropriate encoding
- application/x-www-form-urlencoded is the default (values in the entity)
- multipart/form-data is required for file upload (multipart form data)
The server side must be prepared to receive POST requests
- it must parse the entity rather than the URI's query string
- form values can then be extracted from the entity
- some environments (e.g., PHP) allow to handle GET/POST transparently

Forms Basics Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(13) Processing of Form Data

Form data is always encoded
- as a query string when using GET
- in an encoded entity when using POST
- in a multipart entity when using POST with multipart/form-data
Parsing the form data should be done by existing software
- most Web-aware programming environments provide this functionality
- PHP allows access through different mechanisms

  <p>Query Parameter Test:</p>
  <p>test: <?php echo $_REQUEST["test"]; ?></p>
  <p>name: <?php echo $_REQUEST["name"]; ?></p>
  <p>field: <?php echo $_REQUEST["field"]; ?></p>

form-variables.php (line 8-11)

Structuring Forms

Outline (Structuring Forms)

Forms Basics [10]
Structuring Forms [3]
Anatomy of a Basic Web App [2]

Structuring Forms Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(15) Form Usability

HTML forms are very loosely structured
- form somewhere representing the container
- inside the form a random collection of HTML and form inputs
Visually, the structure often is (and should be) easy to see
- for non-visual access, more structure must be provided
- accessibility has become a major issue on the Web
Accessibility has many different facets
- voice browsers must be able to read aloud Web forms
- gateways should be able to intelligently re-structure Web forms

Structuring Forms Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(16) Labels

Label and form control are not connected by HTML

<tr><td>Text:</td><td><input type="text" name="text"/></td></tr>
        <tr><td>Password:</td><td><input type="password" name="password"/></td></tr>

The label element allows to make this connection
- it connects a form control with the describing label
- this association is now accessible to clients for processing

<tr>
        <td><label for="textctrl">Text:</label></td>
        <td><input type="text" name="text" id="textctrl"/></td>
        </tr>
        <tr>
        <td><label for="pwdctrl">Password:</label></td>
        <td><input type="password" name="password" id="pwdctrl"/></td>
        </tr>

Structuring Forms Erik Wilde and Ryan Shaw: Anatomy of a Basic Web Application

(17) Tabbing in Forms

Tabbing is a very convenient way of navigating a form
- after completing one field, users should be taken to the next
- the order should be defined by the form creator, not by accident
the tabindex attribute defines the tabbing order
- it contains a number which is interpreted relative to other numbers
- all form controls may carry a tabindex attribute
tabindex 1-9:

Anatomy of a Basic Web Application

Web Architecture and Information Management [./]
Spring 2010 — INFO 190-02 (CCN 42509)

Erik WildeUC Berkeley School of Information and UC Berkeley School of InformationRyan ShawUC Berkeley School of Information, UC Berkeley School of Information
2010-02-24

Contents

(2) Abstract

Forms Basics

Outline (Forms Basics)

(4) HTTP Web Services

(5) Forms Mechanics

(6) Forms Markup

(7) Forms Elements (User View)

(8) Forms Elements (Source View)

(9) Date Entry

(10) Forms and GET

(11) Forms and POST

(12) POST Form Processing

(13) Processing of Form Data

Structuring Forms

Outline (Structuring Forms)

(15) Form Usability

(16) Labels

(17) Tabbing in Forms

Anatomy of a Basic Web App

Outline (Anatomy of a Basic Web App)

(19) Our Favorite Color

(20) Application Flow

(21) Conclusions

Text:
Password:
Checkbox:
Radio Button:
Text Areas:
Selection:
Multiple Selection:
File Upload:
Hidden:
Submit:

Anatomy of a Basic Web Application

Web Architecture and Information Management [./]Spring 2010 — INFO 190-02 (CCN 42509)

Erik WildeUC Berkeley School of Information and UC Berkeley School of InformationRyan ShawUC Berkeley School of Information, UC Berkeley School of Information2010-02-24

Contents

(2) Abstract

Forms Basics

Outline (Forms Basics)

(4) HTTP Web Services

(5) Forms Mechanics

(6) Forms Markup

(7) Forms Elements (User View)

(8) Forms Elements (Source View)

(9) Date Entry

(10) Forms and GET

(11) Forms and POST

(12) POST Form Processing

(13) Processing of Form Data

Structuring Forms

Outline (Structuring Forms)

(15) Form Usability

(16) Labels

(17) Tabbing in Forms

Anatomy of a Basic Web App

Outline (Anatomy of a Basic Web App)

(19) Our Favorite Color

(20) Application Flow

(21) Conclusions

Web Architecture and Information Management [./]
Spring 2010 — INFO 190-02 (CCN 42509)

Erik WildeUC Berkeley School of Information and UC Berkeley School of InformationRyan ShawUC Berkeley School of Information, UC Berkeley School of Information
2010-02-24