1. HTML Creating Forms on a Web Page

2. 2 Objectives  Discuss the process of creating a form  Distinguish between data input controls and text input controls  Describe the different types of input – controls  Identify HTML code necessary to create a form

3. 3 Creating Web Page Forms  Forms interact with Web page visitors in a variety of ways: –Get feedback about the Web page –Find out who is visiting the Web page –Sell products or services –Act as a guestbook

4. 4

5. 5

6. 6 Creating Web Page Forms  A Web page form has three components 1.Input controls 2. tag, which contains the information necessary to process the form 3.Submit button, which sends the data to be processed

7. 7 Input Controls  Input Control -- a type of input mechanism on a form  Data Input Control—allows user to simply make a selection  Text Input Control -- allows user to enter text into the control

8. 8 Input Controls  Each input control has the following one or two attributes –NAME: Identifies the specific information that is being sent All controls have a NAME –VALUE: The data that is contained in the named input control All controls except TEXTAREA have a VALUE attribute

9. 9 Examples of Data Input Controls  Radio button  Check box  Submit button  Reset button  Selection or drop-down menu

10. 10 Examples of Text Input Controls  Text field  Text area  Password text field

11. 11 Radio Control  Limits the Web page visitor to only one choice from a list of choices  Each choice is preceded by a radio button, typically an open circle –Radio buttons are deselected by default

12. 12 Adding Radio Buttons field name control type value of field if “Yes” is selected Field name – must be the same for radio buttons value of field if “No” is selected

13. 13 Checkbox Control  Allows users to select more than once choice from a list of choices  Each choice in a checkbox list can be either on or off –Checkboxes are deselected by default

14. 14 Reset and Submit Controls  Reset button--clears any input that was entered in the form  Submit button--sends the information to the appropriate location for processing –Web page forms must include a Submit button

15. 15 Adding the Submit and Reset Buttons 

16. 16 Submit and Reset Buttons control type text to display on Submit button control type text to display on Reset button

17. 17 Select Control  Creates a selection menu  Visitors select one or more choices  Visitors don’t have to type in any information

18. 18 Creating a Form with Selection Menus  The SELECT control creates a selection menu  This control only allows the visitor to choose pre-defined choices  There are four types of selection menus

19. 19 simple selection menu SIZE set to 3 multiple choice – two choices selected one choice selected as default

20. 20

21. 21 Creating Selection Controls start select menu field name start option end option

22. 22 Text Control  Allows for a single line of input  Two attributes –SIZE: determines the number of characters that display on the form –MAXLENGTH: specifies the maximum length of the input field

23. 23 Adding a Text Field control typefield name Number of characters that display on Web page maximum number of characters that can be input

24. 24 Textarea Control  Allows multiple lines of input  Two primary attributes –ROWS: specifies the number of rows in the textarea field –COLS: specifies the number of columns in the textarea field

25. 25 Adding Textareas start textareafield name number of rows number of columns end textarea

26. 26 Password Control  Same as a regular text field, but characters display as asterisks or bullets  Holds the password entered by a visitor  Protects a visitor’s password from being observed by others

27. 27 Summary  Define terms related to forms  Describe the different form controls and their uses  Use the tag  Create radio buttons  Create a text field  Create a textarea field

28. 28 Summary  Use the tag  Create a selection menu  Insert options into a selection menu  Create a Submit button  Create a Reset button