HTML Forms - University of South Florida
Download
Report
Transcript HTML Forms - University of South Florida
HTML Forms
1
HTML Forms
HTML forms provide a way for a user to send
information back to the web server.
Originally the user input was processed on the
server by a script, typically written in Perl.
Today we can write full fledged object-oriented
programs to process the user input.
The browser doesn’t know anything about
what happens to the user input at the server.
It just follows HTML rules for how to handle
the form.
2
HTML Forms
An HTML form is define by <form> </form> tag pair.
An action attribute on the <form> tag gives the URL of the
application that is to receive and process the form’s data.
A method attribute specifies how the browser will return the
user’s inputs to the server.
Example:
<form method="get" action="http://www.widgets.com/cgi-bin/update">
...
</form>
method=GET says to append the user inputs to the URL
action says where to send the inputs.
3
get vs. post
Either method conveys the user’s inputs to the server
as a series of name/value pairs.
method="get"
Appends input name/value pairs to the URL.
Visible to the user.
Easy for a user to fake.
Normally used for small amounts of data.
method="post"
Embeds input name/value pairs in the HTTP Request
message.
Not visible to the user.
OK for larger amounts of data.
4
Possible for a sophisticated user to fake.
ASPX Postback
ASPX pages always include exactly one
HTML form.
Uses post as its method.
Uses same URL as its action.
All user inputs are sent back to the server
in a request for the same page.
Called postback.
A key concept in ASP.NET
5
HTML Forms
One or more HTML input elements appear
between the <form> and </form>
Text Input
Radio Buttons
Check Boxes
Dropdown Lists
Buttons
Hidden Inputs
6
Form Example
In Downloads area of class web site:
http://www.csee.usf.edu/~turnerr/Web_Application_Design/
Downloads/
File form_demo.html
7
Form Example
8
Source View
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>A Form Example</title>
</head>
<body
<form method="get" action="form_demo.html">
Please Register<br />
<br />
<input name="LastName" type="text" />
<input name="FirstName" type="text" />
<br />
Last Name
First Name<br />
<br />
9
Source View
Gender<br />
<input checked="checked"
type="radio" name="Gender" value="Unspecified" />
Unspecified<br />
<input
type="radio" name="Gender" value="Male" />
Male<br />
<input
type="radio" name="Gender" value="Female" />
Female<br />
<br />
<input
type="checkbox" name="CSE_Major" value="" />
CSE Dept. Major<br />
<br />
10
Source View
Classification<br />
<select style="width: 185px; position: static"
name="Classification" >
<option >Freshman</option>
<option >Sophomore</option>
<option >Junior</option>
<option >Senior</option>
<option >Graduate</option>
<option selected="selected">Unclassified</option>
</select>
<br />
<br />
<input
type="submit" name="Submit_Button" value="submit" />
<br />
<br />
<input
type="hidden" name="Hidden" value="This is a hidden input"/>
</form>
Form Example in Chrome
12
The Form Filled In
13
The Requested URL
file:///C:/Documents%20and%20Settings/Rollins/Desktop/form_demo.html
?LastName=Turner
&FirstName=Rollins
&Gender=Male
&CSE_Major=
&Classification=Graduate
&Submit_Button=submit
&Hidden=This+is+a+hidden+input
Line breaks added
Actually a single long line of text
Everything after the ? is the “Query String”
Note Name-Value pairs
Separated by &
Available to app software on the server.
14
The Requested Page
The browser gets a clean version of the page.
15