1. FORMs Lesson TBE 540

2. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web page editor. –If using a web page editor, edit the HTML Source.

3. Objectives After completing all lesson-related activities, the learner will be able to… –Create a form and include it in a web page.

4. Forms Forms are used to add interactive elements to a web page. Forms allow you to put in buttons, pull- down menus and input fields for the user. Using JavaScript, you can customize actions for buttons, menus and input fields.

5. Form Tags All forms begin with and end with. The tag may contain a method (POST or GET) and an action. Here is a sample (information will be placed in a message (POST) sent to ffisher@csudh.edu):

6. Form Tags How does the information get into the message? Through buttons, menus and fields. Each type of input has a special tag. These tags specify the type of input (text field, button, text area, menu), the name of the input that comes in (e.g., “Firstname”), and sometimes the value (which button was pressed?)

7. Form Tags - Samples Radio button: Checkbox: Button: CLICK ME

8. Form Tags - Samples Text field/box: Text area: <TEXTAREA NAME=“MSG” ROWS=5>Enter Enter

9. Form Tags - Samples Pull-down menu: Old Young Never mind! Old Young Never mind!

10. Form Tags - Samples If the information is to be sent (i.e., the “action” will be taken), there will be a SUBMIT button. Sample tag: When clicked, the action described in the FORM tag will be initiated. Submit

11. Form Tags - Samples You may also want to have a RESET button Sample tag: When clicked, all the fields are cleared. Reset

12. Form Tags See http://www.csudh.edu/fisher/tbe540/HH O6.htm for specific examples. http://www.csudh.edu/fisher/tbe540/HH O6.htm Try the hands-on exercise called SAMPLEFORMS.HTM

13. Self Check True or false: FORMs in web pages are used only to fill out educational forms online. –True –False

14. Self Check True or false: FORMs in web pages are used only to fill out educational forms online. –True –False That’s one use, but there are many others

15. Self Check This type of form element is: –Radio Button –Checkbox –Button –Text box –Text area

16. Self Check This type of form element is: –Radio Button –Checkbox –Button –Text box –Text area

17. Self Check This type of form element is: –Radio Button –Checkbox –Button –Text box –Text area

18. Self Check This type of form element is: –Radio Button –Checkbox –Button –Text box –Text area

19. Self Check The FORM tags for a pull-down menu are: –MENU, OPTION –SELECT, OPTION –MENU, SELECT –MENU, SUBMIT

20. Self Check The FORM tags for a pull-down menu are: –MENU, OPTION –SELECT, OPTION –MENU, SELECT –MENU, SUBMIT

21. Self Check FORMs are usually placed in the ____ section. –HEAD –BODY

22. Self Check FORMs are usually placed in the ____ section. –HEAD –BODY

23. Self Check Which type of button clears all fields? –SUBMIT –RESET

24. Self Check Which type of button clears all fields? –SUBMIT –RESET