1 HTML Forms
22 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.
33 HTML Forms An HTML form is define by tag pair. An action attribute on the 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:... method=GET says to append the user inputs to the URL action says where to send the inputs.
44 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.
5 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
66 HTML Forms One or more HTML input elements appear between the and Text Input Radio Buttons Check Boxes Dropdown Lists Buttons Hidden Inputs
7 Form Example In Downloads area of class web site: Downloads/ Downloads/ File form_demo.html
88 Form Example
99 Source View <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " A Form Example <body Please Register Last Name First Name
10 Source View Gender <input checked="checked" type="radio" name="Gender" value="Unspecified" /> Unspecified <input type="radio" name="Gender" value="Male" /> Male <input type="radio" name="Gender" value="Female" /> Female <input type="checkbox" name="CSE_Major" value="" /> CSE Dept. Major
Source View Classification <select style="width: 185px; position: static" name="Classification" > Freshman Sophomore Junior Senior Graduate Unclassified <input type="submit" name="Submit_Button" value="submit" /> <input type="hidden" name="Hidden" value="This is a hidden input"/>
12 Form Example in Chrome
13 The Form Filled In
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.