1. HTML Forms

2. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists, buttons, images usually mixed in with other HTML –especially tables may also contain JavaScript –for input validation and user instruction

3. The tag used to contain the elements of a form various form elements go in here usually laid out with text labels, images and other information

4. attributes of ACTION –URL pointing to a server-side process –all data from the form is sent as a list of name+value pairs –the data is used by the server-side process, which usually sends back a response page

5. attributes of METHOD this attribute specifies which http method the browser will use to connect to the server –GET to retrieve data from the server form data appears as request parameters in the browser message window –POST - to send data to the server should be used for data to be held on the server

6. attributes of ENCTYPE attribute specifies how the form data is encoded data is encoded before being sent to server –avoids data corruption –not the same as encryption data will be decoded by the web server or receiving process

7. ENCTYPE the default value of ENCTYPE is: application/x-www-form-urlencoded converts to + nonalphanumeric characters as % followed by ASCII code (as 2 hexadecimal digits) line break is %OD%OA (carriage return, line-feed) this is the most commonly used encoding this is non-encrypted because it is trivial to decode by reversing the above procedures

8. ENCTYPE ENCTYPE can also take the value: multipart/form-data encapsulates the form fields as a single, MIME-compatible compound document used in particular with the POST method still unencrypted; the data can be read by anyone intercepting the request

9. form widgets

10. the tag used to define a number of different widgets each widget is specified by TYPE attribute a NAME attribute is associated with widget data on submission of the form. NAME is also used to manipulate the widget using JavaScript.

11. Example <FORM METHOD = POST #sending data to the server# ACTION = sendRhyme.php #to server process# >

12. Example http://.../sendRhyme.php? rhyme = roses

13. Text Field Attributes SIZE –width, in characters, of display box MAXLENGTH –total number of characters accepted as input may be > SIZE default is unlimited VALUE –default text to appear in field –does not need to be specified

14. more widgets defined by

15. Password Fields TYPE = PASSWORD accepts any text displays *****s instead attributes as for TEXT NB: transmitted unencrypted!

16. File-selection Fields TYPE = FILE Browse button appears, send file on client to server other attributes as for TEXT

17. Checkboxes TYPE = CHECKBOX for yes/no type non-exclusive selections by user VALUE specifies string sent to server CHECKED controls default display can be grouped –all given same NAME –values sent as comma-separated string to server

18. Checkboxes (Captions and cell-borders added using other HTML)

19. Radio Buttons TYPE = RADIO typically grouped by NAME represent mutually exclusive choices only one box in group can be checked –specified using the CHECKED attribute –first element is checked if no other is specified VALUE should be set for each button other attributes as for CHECKBOX

20. Radio Buttons (Captions and cell-borders added using other HTML)

21. Submission Buttons TYPE = SUBMIT triggers submission of form data VALUE controls caption on button NAME sent to server

22. Reset Buttons TYPE = RESET form data reset to default values VALUE controls caption on button

23. Custom Buttons TYPE = IMAGE SRC = image URL acts as a submit button when clicked also submits mouse x-y coords to server ALIGN - as per

24. Hidden Fields TYPE = HIDDEN embeds additional information in the page cannot be seen by user cannot be ignored by browser –NAME and VALUE submitted to server used to record state between HTTP transactions and to label forms

25. more form widgets

26. the tag this appears as a multi-line text area the user may type, cut and paste text the COLS and ROWS attributes are used to control the dimensions of the textarea a NAME attribute must be specified default text can be inserted as the content of the tag

27. the tag WRAP = OFF –text is rendered and transmitted as typed WRAP = VIRTUAL –text is wrapped in the browser display but transmitted as typed WRAP = PHYSICAL –text is wrapped in the browser display and transmitted as rendered

28. the tag this allows selection from a range of choices an tag is used to specify each choice –plain text included as tag content the tag is displayed as a pull-down menu of choices using SELECT reduces onscreen clutter compared to checkboxes or radio buttons if the number of choices is large

29. the tag NAME attribute –sent to server with selected value MULTIPLE attribute –allows selection of many options –values sent as a comma-separated list SIZE attribute –controls the number of options visible at one time

30. VALUE attribute –this specifies the data to be sent to the server process along with NAME of the tag SELECTED attribute –this is a keyword attribute –when specified it pre-selects an option –by default, no options are pre-selected

31. Using forms forms alone are rather primitive use DHTML to control presentation and interaction –, for layout –CSS positioning and layers for layout and navigation –JavaScript for navigation and validation other methods available for web page GUIs –Java applets, Active X –large implementation overheads

32. Example Web Banking Web Banking Welcome to our web banking page. no, you can't make deposits or get cash.... but you can get balances, make transfers and list the recent transactions on your account. Account Number: PIN: Transaction: Account Balances Transfers Show recent transactions Stop payment on a check

33. Mail me a written verification Do not mail me a written verification Mail me some information on: Certificates of Deposit Home mortgage interest rates Auto loan interest rates Tell us what you think about our Web Services!