1 / 16

HTLM Forms CS3505

HTLM Forms CS3505. Form Handling in Browser. W E b B R O W S E r. Get. html. User Files out form. script. Execute script. Get URL?input. html. submit. In memory. file. User read response. html. Simple Form Elements.

rodd
Télécharger la présentation

HTLM Forms CS3505

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. HTLM FormsCS3505

  2. Form Handling in Browser W E b B R O W S E r Get html User Files out form script Execute script Get URL?input html submit In memory file User read response html

  3. Simple Form Elements • Forms provide a mechanism for collecting user data such as E-mail, zip codes, comments and selections. • Forms are enclosed in <form> tags and contain code for three basic functions: • 1)Tags to define inputs for information <input/> • 2)Tags to trigger the action <input type = “submit”/> • 3)Attributes to define the desired action <Form method= “post” Action= “dosomething”>

  4. Simple Form <html > <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "FormActionResponse.html"> <p><label>Name:<input name = "name" type = "text" size = "25" maxlength = "30" /></label> </p> <p><input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body></html>

  5. Action Response • The action response defining the “do something” is usually a script, other HTML page, or ASP program. • A script on the server that executes the action is usually located on the server in /cgi-bin/ • example <form method = "post" action = “ SomeProgram.ext"> = “get” *.html , Html File *.asp , Active Server Page *.pl , perl function() J-script in <head> Dom command

  6. CGI Interface • How do input values get to the script? • The Common Gateway Interface (CGI)is the mechanism by which user input values are passed to the script which executes the desired action. • GET method puts values in GO line after the “?” • Good for short input parameters • POST method uses a data message • Good for long input such as a page of text

  7. Get vs. Post W E b B R O W S E r User Files out form Get URL?input Submit get file Read input from “QUERY_STRING” User read response html Executable file User Files out form Get URL Submit post File executes Read input from STDIN Send response Data message User read response html

  8. CGI “GET” Interface Example 1) Form2.html contains Input name statements: <input type = "hidden" name = "recipient“ value = "CS3505Prof@hotmail.com" /> <input type = "text" name = "name" size = "25“ maxlength = "30" /> 2) Get method puts Named variables in GO line file:///J:/ClassNotes/HTML-Forms/FormExamples/FormActionResponse.html?recipient=CS3505Prof@hotmail.com&subject=Feedback+Form&redirect=main.html&name=baer NOTE Format: “&” seperates variable ; “+” spaces

  9. Form Response Architecture Web Server Web Browser User Files out form html To /cgi-bin/script submit input script html User read response Other action

  10. Feedback Form3 Example • Look at the source for the feedback example • <form> … </form> • Method • <form method = "post" action = "/cgi-bin/formmail"> • Server executes formail in directory /cgi-bin • Hidden input • <input type = "hidden" name = "recipient“ value = "CS3505prof@hotmail.com" /> • User input • <!-- <input type = "text"> inserts a text box --> • <p><label>Name: • <input name = "name" type = "text" size = "25" • maxlength = "30" /> • </label></p> • Submit • <input type = "submit" value = "Submit Your Entries" />

  11. Basic Input • <input type = • Hidden - input to script not supplied by user • Text - inserts a text box • Checkbox - inserts a check box • Radio - inserts a radio button • Password - puts in “****” to protect entry • Submit - starts the action • Reset - deletes previous entries Name = • “input_variable_name” - used to identify the variable Value = • “default value” - value of the variable , often a text string Other= • other attribute such as size = /> close input tag

  12. More Input • <textarea > … </textarea> multi-line input • <textarea name = "comments" rows = "4" cols = "36"></textarea> • <select >…</select> pop up select options input • <select name = “sex"> <option selected = “selected”>male </option> <option>female </option> <option>other </option> </select>

  13. Complex form example • Text • Textarea • Password • Check box • Radio box • Select • Submit/ reset

  14. After you submit • Submit packages Input values and sends them to the server • Server tries to execute the cgi script referenced with the action attribute <form method = "post" action = "/cgi-bin/formmail"> • If the file is not accessible We get an error. • For now we let the action be the display of another page • <form method = "post" action = "FormActionResponse.html"> This is as much as we can do without Server side programming

  15. MailTo Form • Most sites including NPS has a MAILTO script available • Find out about MAILTO scripts by searching on the internet, there are many options and alternatives • The one at NPS using a Microsoft Browser • Uses the GET method • Action is MAILTO:e-mail • Input are: cc,bcc,subject,body • There may be others

  16. MailTo Form • Look at the example FormsMailTo.html

More Related