Web Programming Step by Step, 2nd Edition

Lecture 8: Forms & Submitting Data

Reading: 6.1–6.3.3

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Form controls: <input>

<!-- 'q' happens to be the name of Google's required parameter -->
<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" />

• input element is used to create many UI controls
  • an inline element that MUST be self-closed
• name attribute specifies name of query parameter to pass to server
• type can be button, checkbox, file, hidden, password, radio, reset, submit, text, ...
• value attribute specifies control's initial text

Text fields: <input>

<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In" />

• input attributes: disabled, maxlength, readonly, size, value
• size attribute controls onscreen width of text field
• maxlength limits how many characters user is able to type into field

Text boxes: <textarea>

a multi-line text input area (inline)

<textarea rows="4" cols="20">
Type your comments here.
</textarea>

• initial text is placed inside textarea tag (optional)
• required rows and cols attributes specify height/width in characters
• optional readonly attribute means text cannot be modified

Checkboxes: <input>

yes/no choices that can be checked and unchecked (inline)

<input type="checkbox" name="lettuce" /> Lettuce
<input type="checkbox" name="tomato" checked="checked" /> Tomato
<input type="checkbox" name="pickles" checked="checked" /> Pickles

• none, 1, or many checkboxes can be checked at same time
• when sent to server, any checked boxes will be sent with value on:

  • http://webster.cs.washington.edu/params.php?tomato=on&pickles=on
    

• use checked="checked" attribute in HTML to initially check the box

Radio buttons: <input>

sets of mutually exclusive choices (inline)

<input type="radio" name="cc" value="visa" checked="checked" /> Visa
<input type="radio" name="cc" value="mastercard" /> MasterCard
<input type="radio" name="cc" value="amex" /> American Express

• grouped by name attribute (only one can be checked at a time)
• must specify a value for each one or else it will be sent as value on

Text labels: <label>

<label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label>
<label><input type="radio" name="cc" value="amex" /> American Express</label>

• associates nearby text with control, so you can click text to activate control
• can be used with checkboxes or radio buttons
• label element can be targeted by CSS style rules

Reset buttons

Name: <input type="text" name="name" /> <br />
Food: <input type="text" name="meal" value="pizza" /> <br />
<label>Meat? <input type="checkbox" name="meat" /></label> <br />
<input type="reset" />

• when clicked, returns all form controls to their initial values
• specify custom text on the button by setting its value attribute

Hidden input parameters

<input type="text" name="username" /> Name <br />
<input type="text" name="sid" /> SID <br />
<input type="hidden" name="school" value="UW" />
<input type="hidden" name="year" value="2048" />

• an invisible parameter that is still passed to the server when form is submitted
• useful for passing on additional state that isn't modified by the user

Styling form controls

element[attribute="value"] {
	property : value;
	property : value;
	...
	property : value;
}

input[type="text"] {
	background-color: yellow;
	font-weight: bold;
}

• attribute selector: matches only elements that have a particular attribute value
• useful for controls because many share the same element (input)

Common UI control errors

• I changed the form's HTML code ... but when I refresh, the page doesn't update!
  • By default, when you refresh a page, it leaves the previous values in all form controls
  • it does this in case you were filling out a long form and needed to refresh/return to it
  • if you want it to clear out all UI controls' state and values, you must do a full refresh
    • Firefox: Shift-Ctrl-R
    • Mac: Shift-Command-R

Drop-down list: <select>, <option>

menus of choices that collapse and expand (inline)

<select name="favoritecharacter">
	<option>Jerry</option>
	<option>George</option>
	<option selected="selected">Kramer</option>
	<option>Elaine</option>
</select>

• option element represents each choice
• select optional attributes: disabled, multiple, size
• optional selected attribute sets which one is initially chosen

Using <select> for lists

<select name="favoritecharacter[]" size="3" multiple="multiple">
	<option>Jerry</option>
	<option>George</option>
	<option>Kramer</option>
	<option>Elaine</option>
	<option selected="selected">Newman</option>
</select>

• optional multiple attribute allows selecting multiple items with shift- or ctrl-click
  • must declare parameter's name with [] if you allow multiple selections
• option tags can be set to be initially selected

Option groups: <optgroup>

<select name="favoritecharacter">
	<optgroup label="Major Characters">
		<option>Jerry</option>
		<option>George</option>
		<option>Kramer</option>
		<option>Elaine</option>
	</optgroup>
	<optgroup label="Minor Characters">
		<option>Newman</option>
		<option>Susan</option>
	</optgroup>
</select>

• What should we do if we don't like the bold appearance of the optgroups?

Grouping input: <fieldset>, <legend>

groups of input fields with optional caption (block)

<fieldset>
	<legend>Credit cards:</legend>
	<input type="radio" name="cc" value="visa" checked="checked" /> Visa
	<input type="radio" name="cc" value="mastercard" /> MasterCard
	<input type="radio" name="cc" value="amex" /> American Express
</fieldset>

• fieldset groups related input fields, adds a border; legend supplies a caption

Styling form controls

element[attribute="value"] {
	property : value;
	property : value;
	...
	property : value;
}

input[type="text"] {
	background-color: yellow;
	font-weight: bold;
}

• attribute selector: matches only elements that have a particular attribute value
• useful for controls because many share the same element (input)

Problems with submitting data

<label><input type="radio" name="cc" /> Visa</label>
<label><input type="radio" name="cc" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option>James T. Kirk</option>
	<option>Jean-Luc Picard</option>
</select> <br />

• this form submits to our handy params.php tester page
• the form may look correct, but when you submit it...
• [cc] => on, [startrek] => Jean-Luc Picard

The value attribute

<label><input type="radio" name="cc" value="visa" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option value="kirk">James T. Kirk</option>
	<option value="picard">Jean-Luc Picard</option>
</select> <br />

• value attribute sets what will be submitted if a control is selected
• [cc] => visa, [startrek] => picard

URL-encoding

• certain characters are not allowed in URL query parameters:
  • examples: " ", "/", "=", "&"
• when passing a parameter, it is URL-encoded (reference table)
  • "Marty's cool!?" → "Marty%27s+cool%3F%21"
• you don't usually need to worry about this:
  • the browser automatically encodes parameters before sending them
  • the PHP $_GET and $_POST arrays automatically decode them
  • ... but occasionally the encoded version does pop up (e.g. in Firebug)

Submitting data to a web server

• though browsers mostly retrieve data, sometimes you want to submit data to a server
  • Hotmail: Send a message
  • Flickr: Upload a photo
  • Google Calendar: Create an appointment
• the data is sent in HTTP requests to the server
  • with HTML forms
  • with Ajax (seen later)
• the data is placed into the request as parameters

HTTP GET vs. POST requests

• GET : asks a server for a page or data
  • if the request has parameters, they are sent in the URL as a query string
• POST : submits data to a web server and retrieves the server's response
  • if the request has parameters, they are embedded in the request's HTTP packet, not the URL
• For submitting data to be saved, POST is more appropriate than GET
  • GET requests embed their parameters in their URLs
  • URLs are limited in length (~ 1024 characters)
  • URLs cannot contain special characters without encoding
  • private data in a URL can be seen or modified by users

Form POST example

<form action="http://foo.com/app.php" method="post">
	<div>
		Name: <input type="text" name="name" /> <br />
		Food: <input type="text" name="meal" /> <br />
		<label>Meat? <input type="checkbox" name="meat" /></label> <br />
		<input type="submit" />
	<div>
</form>

GET or POST?

if ($_SERVER["REQUEST_METHOD"] == "GET") {
	// process a GET request
	...
} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
	// process a POST request
	...
}

• some PHP pages process both GET and POST requests
• to find out which kind of request we are currently processing,
  look at the global $_SERVER array's "REQUEST_METHOD" element