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
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.
44 HTML Forms An HTML form is define by tag pair. One or more HTML input elements appear between and 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.
55 HTML Forms A method attribute on the tag specifies how the browser will return the user’s inputs to the server. An action attribute on the tag gives the URL of the application that is to receive and process the form’s data. Example:...
66 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.
77 Form Demo There are examples of pages with HTML forms in the Downloads area of the class web site: /007_HTML_Forms/
88 Form Example
99 Source View <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " A Form Example 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 Click the submit button
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 /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