Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
URL?name=value&name=value...
http://example.com/student_login.php?username=stepp&sid=1234567
username
has value stepp
, and sid
has value 1234567
<form>
(6.1.2)
<form action="web service URL"> form controls </form>
action
attribute gives the URL of the server web service that will process this form's data<form action="http://www.google.com/search"> <div> Let's search Google: <input name="q" /> <input type="submit" /> </div> </form>
div
<input>
<input type="text" name="q" value="Colbert Report" /> <input type="submit" value="Booyah!" />
input
element is used to create many UI controls
name
attribute specifies name of query parameter to pass to servertype
can be button
, checkbox
, file
, hidden
, password
, radio
, reset
, submit
, text
, ...value
attribute specifies control's initial text<input>
(6.2.1)
<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 fieldmaxlength
limits how many characters user is able to type into field<textarea>
(6.2.2)
a multi-line text input area (inline)
<textarea rows="4" cols="20"> Type your comments here. </textarea>
textarea
tag (optional)rows
and cols
attributes specify height/width in charactersreadonly
attribute means text cannot be modified<input>
(6.2.3)
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" /> Pickles
on
:
http://webster.cs.washington.edu/params.php?tomato=on&pickles=on
checked="checked"
attribute in HTML to initially check the box<input>
(6.2.4)
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
name
attribute (only one can be checked at a time)value
for each one or else it will be sent as value on
<label>
(6.2.5)
<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>
label
element can be targeted by CSS style rules<select>
,
<option>
(6.2.6)
menus of choices that collapse and expand (inline)
<select name="favoritecharacter"> <option>Jerry</option> <option>George</option> <option>Kramer</option> <option>Elaine</option> </select>
option
element represents each choiceselect
optional attributes: disabled
, multiple
, size
value
for each option
on IE6<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>
multiple
attribute allows selecting multiple items with shift- or ctrl-click
[]
if you allow multiple selections
option
tags can be set to be initially selected
<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>
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" />
value
attribute<fieldset>
,
<legend>
(6.2.8)
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; legend
supplies an optional captionI changed the checkbox'schecked
property, thetextarea
's inner text, the text box'svalue
... but when I refresh, the page doesn't reflect this change!
element[attribute="value"] { property : value; property : value; ... property : value; }
input[type="text"] { background-color: yellow; font-weight: bold; }
input
)<textarea rows="3" cols="40"></textarea>
body { height: 100%; } textarea { position: absolute; width: 50%; height: 15%; }
rows
and cols
on a textarea
textarea
at a specific width/height in pixels or %, you must specify rows
/cols
in the XHTML and width
/height
in the CSS
rows
/cols
will be ignored but must be there anyway...height
on the page's body
helpstextarea
helps<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 />
[cc] => on, [startrek] => Jean-Luc Picard
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 controls what will be submitted if a control is selected[cc] => visa, [startrek] => picard
" "
, "/"
, "="
, "&"
"Marty's cool!?"
→ "Marty%27s+cool%3F%21"
<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="quarter" value="48sp" />
GET
vs. POST
requests
(6.3.3)
GET
: asks a server for a page or data
POST
: submits data to a web server and retrieves the server's response
POST
request is more appropriate than a GET
GET
requests embed their parameters in their URLs<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>
<form action="http://webster.cs.washington.edu/params.php" method="post" enctype="multipart/form-data"> Upload an image as your avatar: <input type="file" name="avatar" /> <input type="submit" /> </form>
input
tag with type
of file
enctype
attribute of the formpost
(an entire file can't be put into a URL!)enctype
(data encoding type) must be set to multipart/form-data
or else the file will not arrive at the serverArray | Description |
---|---|
$_GET ,
$_POST
|
parameters passed to GET and POST requests |
$_REQUEST
|
parameters passed to any type of request |
$_SERVER ,
$_ENV
|
information about the web server |
$_FILES
|
files uploaded with the web request |
$_SESSION ,
$_COOKIE
|
"cookies" used to identify the user (seen later) |
$blackbook = array(); $blackbook["marty"] = "206-685-2181"; $blackbook["stuart"] = "206-685-9138"; ... print "Marty's number is " . $blackbook["marty"] . ".\n";
"marty"
maps to value "206-685-2181"
print "Marty's number is {$blackbook['marty']}.\n";
$name = array(); $name["key"] = value; ... $name["key"] = value;
$name = array(key => value, ..., key => value);
$blackbook = array("marty" => "206-685-2181", "stuart" => "206-685-9138", "jenny" => "206-867-5309");
print_r($blackbook);
Array ( [jenny] => 206-867-5309 [stuart] => 206-685-9138 [marty] => 206-685-2181 )
if (isset($blackbook["marty"])) { print "Marty's phone number is {$blackbook['marty']}\n"; } else { print "No phone number found for Marty Stepp.\n"; }
isset
, array_key_exists
: whether the array contains value for given keyarray_keys
, array_values
: list of all keys or all values in the arrayasort
, arsort
: sorts by value, in normal or reverse orderksort
, krsort
: sorts by key, in normal or reverse orderforeach
loop and associative arraysforeach ($blackbook as $key => $value) { print "$key's phone number is $value\n"; }
jenny's phone number is 206-867-5309 stuart's phone number is 206-685-9138 marty's phone number is 206-685-2181
$_REQUEST
(6.4.2)
$user_name = $_REQUEST["username"]; $student_id = (int) $_REQUEST["sid"]; $eats_meat = FALSE; if (isset($_REQUEST["meat")) { $eats_meat = TRUE; }
$_REQUEST["parameter name"]
returns param's value as a string
isset
<?php
$name = $_REQUEST["name"];
$email = $_REQUEST["emailaddress"];
...
print("Thank you, $name, for creating
an account with address $email.\n");
?>
<?php $name = $_REQUEST["name"]; $email = $_REQUEST["emailaddress"]; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Account Creation</title></head> <body> <h1>New account created.</h1> <p> Thank you, <?= $name ?>, for creating an account with address <?= $email ?>. </p> </body> </html>
print
statement in previous example<?php $base = $_REQUEST["base"]; $exp = $_REQUEST["exponent"]; $result = pow($base, $exp); ?> <?= $base ?> ^ <?= $exp ?> = <?= $result ?>
http://example.com/exponent.php?base=3&exponent=4
<?php foreach ($_REQUEST as $param => $value) { ?> <p>Parameter <?= $param ?> has value <?= $value ?></p> <?php } ?>
http://example.com/print_params.php?name=Marty+Stepp&sid=1234567
Parameter name has value Marty Stepp
Parameter sid has value 1234567
if ($_SERVER["REQUEST_METHOD"] == "GET") { # process a GET request ... } elseif ($_SERVER["REQUEST_METHOD"] == "POST") { # process a POST request ... }
"REQUEST_METHOD"
key of the global $_SERVER
array$_FILES
, not $_REQUEST
$_FILES
is itself an associative array, containing:
name
- the local filename that the user uploadedtype
- the MIME type of data that was uploaded, such as image/jpeg
size
- file's size in bytestmp_name
- a filename where PHP has temporarily saved the uploaded file
<input type="file" name="avatar" />
borat.jpg
as a parameter named avatar
,
$_FILES["avatar"]["name"]
will be "borat.jpg"
$_FILES["avatar"]["type"]
will be "image/jpeg"
$_FILES["avatar"]["tmp_name"]
will be something like "/var/tmp/phpZtR4TI"
$username = $_REQUEST["username"]; if (is_uploaded_file($_FILES["avatar"]["tmp_name"])) { move_uploaded_file($_FILES["avatar"]["tmp_name"], "$username/avatar.jpg"); print "Saved uploaded file as $username/avatar.jpg\n"; } else { print "Error: required file not uploaded"; }
is_uploaded_file(filename)
TRUE
if the given filename was uploaded by the user
move_uploaded_file(from, to)
is_uploaded_file
, then do move_uploaded_file