1 / 15

HTML Forms

HTML Forms. 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.

zeke
Download Presentation

HTML Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Forms

  2. 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

  3. 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

  4. 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. 4

  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

  6. HTML Forms One or more HTML input elementsappear between the <form> and </form> Text Input Radio Buttons Check Boxes Dropdown Lists Buttons Hidden Inputs 6

  7. Form Example • In Downloads area of class web site: • http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ • File form_demo.html

  8. Form Example 8

  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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; First Name<br /> <br /> 9

  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 /> 10

  11. 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. Form Example in Chrome 12

  13. The Form Filled In 13

  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. 14

  15. The Requested Page The browser gets a clean version of the page.

More Related