Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.
<form>
<form action="web service URL" method="get or post"> <fieldset> form controls </fieldset> </form>
action
attribute gives the URL of the server web service that will process this form's datamethod
attribute specifies whether the server should use an HTTP get
or post
request<form action="http://www.foo.com/app.php" method="get"> <fieldset> <label>Name: <input type="text" name="name" /></label> <label>Meal: <input type="text" name="meal" /></label> <label>Meat? <input type="checkbox" name="meat" /> </label> <input type="submit" /> <fieldset> </form>
fieldset
ssubmit
and reset
buttons<form action="http://www.foo.com/app.php" method="get"> <fieldset> ... <input type="submit" /> <input type="reset" /> </fieldset> </form>
input
element with a submit
attribute is displayed as a button that, when clicked, will send the parameters to the server and show the responseinput
element with a reset
attribute is displayed as a button that, when clicked, will change the controls back to their original statename
attribute<form action="http://foo.com/app.php" method="get"> <fieldset> Name: <input type="text" name="name" /> Meal: <input type="text" name="meal" /> <label>Meat? <input type="checkbox" name="meat" /></label> <input type="submit" /> <fieldset> </form>
name
specifies the query string parameter to passhttp://foo.com/app.php?name=Sue&meal=pizza&meat=on
submit
, reset
examplevalue
attribute
<input type="submit" value="Order Meal" />
<form method="get" action="http://webster.cs.washington.edu/params.php" > <label><input type="checkbox" name="meat" /> Meat</label> <br /> <label><input type="radio" name="creditcard" /> Visa</label> <label><input type="radio" name="creditcard" /> MasterCard</label> <br /> Favorite Star Trek captain: <select name="startrek"> <option>Kirk</option> <option>Picard</option> </select> <br /> <input type="submit" /> </form>
[meat] => on, [creditcard] => on, [startrek] => Jean-Luc Picard
value
attribute<form method="get" action="http://webster.cs.washington.edu/params.php" > <label><input type="checkbox" name="meat" value="heckyeah"/> Meat</label> <br /> <label><input type="radio" name="creditcard" value="visa" /> Visa</label> <label><input type="radio" name="creditcard" 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 /> <input type="submit" /> </form>
value
attribute controls what will be submitted if that control is selected (important for radio buttons)[meat] => heckyeah, [creditcard] => visa, [startrek] => picard
get
vs. post
<form action="http://www.foo.com/app.php" method="post">
get
request passes the parameters to the server as a query stringpost
request embeds the parameters in HTTP request, not in the URLpost
:
get
is limited to browser's URL length, around 100-200 characterspost
:
Upload an image as your avatar: <input type="file" name="avatar" /> <input type="submit" />
input
tag with type
of file
<form action="http://foo.com/app.php" method="post" enctype="multipart/form-data"> <fieldset> Upload an image as your avatar: <input type="file" name="avatar" /> <input type="submit" /> </fieldset> </form>
post
(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 server$_FILES
$_FILES
is an assoc. array, containing these elements:
name
- the local filename that the user uploadedtype
- the MIME type of data that was uploaded, such as image/jpeg
tmp_name
- a filename where PHP has temporarily saved the uploaded file
size
- file's size in bytesexample.txt
as a parameter named logfile
,
$_FILES["logfile"]["name"]
will be example.txt
$_FILES["logfile"]["type"]
will be text/plain
$_FILES["logfile"]["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 { die "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
Name: <input type="text" name="username" size="16" /> <br /> SID: <input type="text" name="sid" size="8" /> <br /> <input type="hidden" name="school" value="UW" /> <input type="hidden" name="quarter" value="08sp" /> <input type="submit" value="Retrieve student info" />
input
tag with type
of hidden
is a parameter that won't appear on the page, but is still passed to the server when form is submittedelement[attribute="value"] { ... }
input[type="text"] {
color: blue;
font-style: italic;
border: 4px solid yellow;
}
input
represents many controls
Recreate the CSE 190 M Homework 4 (Fifteen Puzzle) turnin page. If you have time, write the PHP code to accept this form on the server. The server should save the student's files to a folder with the student's name and section. Submit the form to https://pascal.cs.washington.edu/cgi-bin/test_turnin.pl
.
Required form parameter names:
ti
- URL of turnin page. Should always be http://www.cs.washington.edu/education/courses/190m/08sp/homework/hw4_turnin.html
firstname
, middlename
, familyname
, studentnumber
, email
, section
- student infofifteen_script.js
, fifteen_script.js-tab
, background.jpg
, background.jpg-tab
- uploaded files and tab widths for each file