1. HTLM Forms CS3505

2. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script In memory Execute script

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 tags and contain code for three basic functions: –1)Tags to define inputs for information –2)Tags to trigger the action –3)Attributes to define the desired action

4. Simple Form Internet and WWW How to Program - Forms Feedback Form Please fill out this form to help us improve our site. Name:<input name = "name" type = "text" size = "25" maxlength = "30" />

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 = “get”*.html, Html File *.asp, Active Server Page *.pl, perl function() J-script in 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 User Files out form User read response Submit get Get URL?input html Data message file Submit post Get URL html Executable file File executes Read input from STDIN Send response User Files out form User read response Read input from “QUERY_STRING” WEbBROWSErWEbBROWSEr

8. CGI “GET” Interface Example 1) Form2.html contains Input name statements: 2) Get method puts Named variables in GO line file:///J:/ClassNotes/HTML- Forms/FormExamples/FormActionResponse.html?recipient =CS3505Prof@hotmail.com&subject=Feedback+Form&re direct=main.html&name=baer NOTE Format: “&” seperates variable ; “+” spaces

9. Form Response Architecture script htmlUser Files out form WebBrowserWebBrowser Web ServerWeb Server User read response Other action submitinput To /cgi-bin/script html

10. Feedback Form3 Example Look at the source for the feedback example … Method – –Server executes formail in directory /cgi-bin Hidden input –<input type = "hidden" name = "recipient“ value = "CS3505prof@hotmail.com" /> User input – inserts a text box --> – Name: – <input name = "name" type = "text" size = "25" – maxlength = "30" /> – Submit –

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 … multi-line input –<textarea name = "comments" rows = "4" cols = "36"> … pop up select options input – male female other

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 If the file is not accessible We get an error. For now we let the action be the display of another page – 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-mailMAILTO:e-mail –Input are: cc,bcc,subject,body –There may be others

16. MailTo Form Look at the example FormsMailTo.html