HTML Creating Forms on a Web Page Objectives Discuss the process of creating a form Distinguish between data input controls and text input controls Describe the different types of input – controls 2 Identify HTML code necessary to create a form 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 3 4 5 Creating Web Page Forms A Web page form has three components 1. Input controls 2. <FORM> tag, which contains the information necessary to process the form 3. Submit button, which sends the data to be processed 6 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 7 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 8 • All controls except TEXTAREA have a VALUE attribute Examples of Data Input Controls Radio button Check box Submit button Reset button Selection or drop-down menu 9 Examples of Text Input Controls Text field Text area Password text field 10 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 11 Adding Radio Buttons control type field name Field name – must be the same for radio buttons 12 value of field if “Yes” is selected value of field if “No” is selected 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 13 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 14 Adding the Submit and Reset Buttons <INPUT TYPE=“submit” VALUE=“Submit the Form”> <INPUT TYPE=“reset” VALUE=“Reset the Form”> 15 Submit and Reset Buttons control type control type 16 text to display on Submit button text to display on Reset button Select Control Creates a selection menu Visitors select one or more choices Visitors don’t have to type in any information 17 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 18 simple selection menu 19 SIZE set to 3 multiple choice – two choices selected one choice selected as default 20 Creating Selection Controls field start select name menu 21 start option end option 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 22 Adding a Text Field field name 23 control type Number of characters that display on Web page maximum number of characters that can be input 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 24 Adding Textareas start textarea 25 field name number of rows number of columns end textarea 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 26 Summary Define terms related to forms Describe the different form controls and their uses Use the <FORM> tag Use the <INPUT> tag Create radio buttons Create a text field Create a textarea field 27 Summary Use the <SELECT> tag Use the <OPTION> tag Create a selection menu Insert options into a selection menu Create a Submit button Create a Reset button 28