1. Introduction to Web Site Development Department of Computer Science California State University, Los Angeles Lecture 8: Forms and Controls

2. Forms A form Allows interaction between client and server Allows data to be sent to a server Allows a web server to perform some type of action and (possibly) send the result(s) back to the client Contains zero or more controls Is activated when a control with the TYPE attribute set to SUBMIT is selected

3. Forms Three things you need to specify The user interface (CS120) Control placement How to send data to the web server (CS120) POST GET How the web server processes the form data (CS320) Java, JSP PHP ASP

4. Forms Examples Google’s search box Product/forum registration pages

5. The FORM Element Description Used to define a form. Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where flow content is expected Content Model: Flow content, with the exception of nested FORM elements

6. The FORM Element Example

7. The FORM Element Optional Attributes METHODMETHOD: Specifies the action a web server should take GET POST ACTIONACTION: The URL of the document you want to navigate to after the form is submitted TARGETTARGET: Specifies how to open the action URL (new window or same window)

8. The INPUT Element Description Used to place an input control within a form Requirements: Start Tag: REQUIRED End Tag: FORBIDDEN Usage: Context: Where phrasing content is expected Content Model: Empty

9. The INPUT Element Example

10. The INPUT Element Useful Attributes TYPETYPE: Specifies the type of input control HIDDEN, TEXT, PASSWORD SUBMIT, RESET, BUTTON, IMAGE RADIO, CHECKBOX, FILE NAMENAME: A string used to name an input control VALUEVALUE: The content attribute of an input control; can be used with HIDDEN, TEXT, PASSWORD, SUBMIT, RESET, BUTTON, and IMAGE IDID: Specifies a unique identifier for a control

11. Push Buttons Use INPUT and Add and set the TYPE attribute to eitherTYPE BUTTON SUBMIT RESET IMAGE (basically an image submit button) Add and set the VALUE attribute to set button textVALUE Add and set the SRC attribute (only when TYPE="image") to set button imageSRC

12. Push Button Examples Example

13. Push Button Notes When submitted, image buttons send the pixel coordinated you clicked on to the webserver

14. Check Boxes Use INPUT and Add and set the TYPE attribute to CHECKBOXTYPE Add the CHECKED attribute if you want the check box to initially appear checked (leave out if you want the check box to initially appear unchecked)CHECKED

15. Check Box Examples Example Check Item 1 Check Item 2

16. Check Box Notes Notice that when you click on the text next to the checkbox, it doesn't check the check box This is because the text isn't associated with the control To associate, you must use the a label (covered later)

17. Radio Buttons Use INPUT and Add and set the TYPE attribute to RADIOTYPE Add and set the NAME attribute to name the group the radio button belongs toNAME Add and set the VALUE attribute to identify which radio button in the group was checkedVALUE Add the CHECKED attribute if you want the radio button to initially appear checked (leave out if you want the radio button to initially appear unchecked); only one radio button can be checked per groupCHECKED

18. Radio Button Examples Example 1.) What is your instructor's name? Steven Erin Richard

19. Radio Button Notes Notice that when you click on the text next to a checkbox or radio button, it doesn't check the control This is because the text isn't associated with it To associate, you must use the a label (covered later)

20. The LABEL Element Description Used to associate phrasing content with a checkbox or radio buttons Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content, no nested labels

21. The LABEL Element Example Check me!!! Check me!!!

22. The LABEL Element Optional Attributes FORFOR: Specifies the ID of the INPUT element that you want to associate with this label FORMFORM: Specifies the NAME of the FORM element that you want to associate with this label (because you maybe multiple forms that have controls with the same IDs)

23. Reset Buttons Previously, when discussing buttons, we created a reset button that didn't do anything Now that we've seen check boxes and radio buttons, we can now see what the reset buttons do Reset buttons resets all the controls in the form it is contained in back to their original states

24. Reset Button Examples Example 1.) What is your instructor's name? Steven Erin Richard

25. Submit Buttons Previously, when discussing buttons, we created a submit button that didn't really do anything Now that we've seen check boxes and radio buttons, we can now see what a submit buttons does A submit button activates form submission and causes the user agent to send the data in the form to the web server GET = via URL POST = via HTTP Request Message Body

26. Submit Button Examples Example 1.) What is your instructor's name? Steven Erin Richard

27. Text Controls Use INPUT and Add and set the TYPE attribute to TEXTTYPE Add and set the NAME attribute to identify which text control some text comes fromNAME Add and set the VALUE attribute to set any initial default textVALUE Add and set the MAXLENGTH attribute to set the maximum length of textMAXLENGTH

28. Text Control Examples Example UserName: Password:

29. Password Controls Use INPUT and Add and set the TYPE attribute to PASSWORDTYPE Add and set the NAME attribute to identify which text control some text comes fromNAME Add and set the MAXLENGTH attribute to set the maximum length of textMAXLENGTH

30. Password Control Examples Example UserName: Password:

31. File Controls Use INPUT and Add and set the TYPE attribute to FILETYPE Add and set the NAME attribute to identify which file control some filename comes fromNAME

32. File Control Examples Example Upload File:

33. The BUTTON Element Description Used to create buttons from phrasing content Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content, but not interactive content (images, but not videos for example)

34. The BUTTON Element Example Pass me the ball Kobe ! Watch me as I drill this 30 foot 3-pointer!

35. The BUTTON Element Optional Attributes TYPETYPE: The type of button (either submit, reset, or button) For more, see the standard

36. The SELECT Element Description Used to place data in a multidimensional structure Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Zero or more OPTION or OPTGROUP elements

37. The SELECT Element Example 1 2 3 4 5

38. The SELECT Element Example 1 2 3 4

39. The SELECT Element Optional Attributes NAMENAME: Specifies the name of the control SIZESIZE: The number of options to show the user; the default value is 1, which shows a dropdown listbox; if greater than 1, a listbox is shown

40. The TEXTAREA Element Description Used to store multiline text Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Text

41. The TEXTAREA Element Example Initial text.

42. The TEXTAREA Element Optional Attributes NAMENAME: Specifies the name of this text area control ROWSROWS: The number of lines to show COLSCOLS: The maximum number of characters per line