1. 1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is a trademark of Netskills, University of Newcastle. Partly funded by the http://www.netskills.ac.uk/

2. 2 © Netskills Quality Internet Training, University of Newcastle Topics A simple HTML document HTML Forms Form tags Input elements Form actions Form methods GET and POST Processing Scripts

3. 3 © Netskills Quality Internet Training, University of Newcastle A plain-text document Mark-up tags interpreted by a web browser A Simple Document Introduction to HTML A one-day workshop run by: Netskills A Simple HTML Document

4. 4 © Netskills Quality Internet Training, University of Newcastle What are HTML Forms? Standard HTML tags which: Collect user input Specify where to send the input Specify how to send the input to be processed HTML tags simply provide an interface to allow user interaction Input is handled by a separate script or program: On the server e.g. via PHP, ASP, CGI etc. In the browser e.g. JavaScript

5. 5 © Netskills Quality Internet Training, University of Newcastle Basic Structure A Simple Form Enter your name: tags enclose the whole form Named text input element

6. 6 © Netskills Quality Internet Training, University of Newcastle More Input Types Radio buttons Choose ONE of the following: A B C Check boxes Choose ANY, ALL or NONE of the following: A B C Same name attribute groups radio buttons Pre-selected option Different name attributes create independent checkboxes

7. 7 © Netskills Quality Internet Training, University of Newcastle Even More Input Types Drop-down menus Choose ONE of the following: No thanks Choose A Choose B Choose C Text area Add some thoughts of your own... Type here...

8. 8 © Netskills Quality Internet Training, University of Newcastle Secret Stuff? Passwords Care to give us a password? Hidden fields

9. 9 © Netskills Quality Internet Training, University of Newcastle Submit and Reset B uttons The submit button sends form data to be processed An image may also be used to submit a form The reset button returns fields to original state

10. 10 © Netskills Quality Internet Training, University of Newcastle How to make it work Specify how to send the form data Specified with the method attribute GET or POST or If not specified – default is GET Specify where to send the form data Specified by the action attribute Usually a script or program – can be local or full URL

11. 11 © Netskills Quality Internet Training, University of Newcastle The GET Method Client makes an HTTP GET request for a script Form data is appended to the script URL as name/value pairs – a querystring The script it has access to values sent in the querystring In addition Input data can be hard-coded directly in a URL No need for a form Results can be bookmarked http://www.google.com/search?hl=en&q=netskills http://…/formscript.php?inputbox=Arnold&choice=A&BoxB=yes

12. 12 © Netskills Quality Internet Training, University of Newcastle The POST Method Client makes an HTTP POST request for a script Form data is sent as name/value pairs in the body of the request In addition Useful for large amounts of data Browser may truncate a long querystring Data is not visible in the URL Results cannot be bookmarked http://…/formscript.php Form data arrives as a separate portion of the request – the body of the POST No querystring in URL requested inputbox=Arnold&choice=A&BoxB=yes

13. 13 © Netskills Quality Internet Training, University of Newcastle Form Processing Scripts Scripts are run by the web server via a web server application CGI, PHP, ASP, ColdFusion etc… Scripts can be written in almost any language PHP, VBScript, Perl, CFML etc… Language may depend on web server application(s) Scripts receive form input from via GET or POST Process input based on instructions in the script Create an e-mail message Perform database query Write information to a file Generate a web page

14. 14 © Netskills Quality Internet Training, University of Newcastle Form Processing Query database? Name: Arnold Comments: "whoopie doo!"... User submits form to web server Web server passes form data to processing script Write a file? Send email? Return a web page?

15. 15 © Netskills Quality Internet Training, University of Newcastle Summary Forms are created in web pages using HTML tags HTML only provides and interface for user interaction Form input tags must all be named! Forms normally require a script to process them Forms can be submitted to a script using GET or POST Scripts are programs that are usually run on the web server Scripts can do many things!