1 html forms. objectives you will be able to: compose html forms, to accept input from the user....
DESCRIPTION
33 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.TRANSCRIPT
1
HTML Forms
Objectives
You will be able to: Compose HTML forms, to accept input
from the user. Identify the different kinds of input tags
that can appear within an HTML form Describe how user inputs from HTML
forms are conveyed to the server.
2
3 3
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.
4 4
HTML Forms
An HTML form is define by <form> </form> tag pair.
One or more HTML input elements appear between <form> and </form> Text Input Radio Buttons Check Boxes Dropdown Lists Buttons Hidden Inputs
The user’s inputs are sent to a server when the user clicks a “submit” button.
5 5
HTML Forms
A method attribute on the <form> tag specifies how the browser will return the user’s inputs to the server.
An action attribute on the <form> tag gives the URL of the application that is to receive and process the form’s data.
Example:<form method="get" action="http://www.widgets.com">...</form>
6 6
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. Possible for a sophisticated user to fake.
7 7
Form Demo
There are examples of pages with HTML forms in the Downloads area of the class web site:
http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/007_HTML_Forms/
8 8
Form Example
9 9
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 />
10 10
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 />
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>
12 12
Form Example in Chrome
13 13
The Form Filled In
Click the submit button
14 14
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.
15
The Requested Page
The browser gets a clean version of the page.
method = post
16
http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/007_HTML_Forms/form_demo_post.html
Completed Form
17 Click submit button.
Response
18 Clean copy of the form.
19
ASP.NET Postback
In the rest of this course, we will develop ASP.NET apps.
ASPX pages always include one HTML form. Uses post as its method. Uses own URL as its action.
All user inputs are sent back to the server in a post request for the same page.
Called postback. A key concept in ASP.NET
20
ASP.NET Postback
In an ASP.NET application we will write C# (or VB) code to process the inputs.
The input values will be conveniently available as properties of objects.
End of Presentation