HTMLCreating Forms on a Web Page

2

ObjectivesDiscuss 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

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

5

6

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

7

Input ControlsInput 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

Input ControlsEach 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

Examples of Data Input ControlsRadio button

Check box

Submit button

Reset button

Selection or drop-down menu

10

Examples of Text Input ControlsText field

Text area

Password text field

11

Radio ControlLimits 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

Adding Radio Buttons

field name

control typevalue of field if

“Yes” is selected

Field name –must be the samefor radio buttons

value of field if“No” is selected

13

Checkbox ControlAllows 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

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

Adding the Submit and Reset Buttons

<INPUT TYPE=“submit” VALUE=“Submit the Form”>

<INPUT TYPE=“reset” VALUE=“Reset the Form”>

16

Submit and Reset Buttons

control type

text todisplay on

Submit button

control type text todisplay on

Reset button

17

Select ControlCreates a selection menu

Visitors select one or more choices

Visitors don’t have to type in any information

18

Creating a Form with Selection MenusThe 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

simpleselection menu SIZE

set to 3 multiplechoice – two

choices selectedone choiceselected as

default

20

21

Creating Selection Controls

start selectmenu

fieldname

startoption

endoption

22

Text ControlAllows 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

Adding a Text Field

control typefield name

Number ofcharacters that

display on Web pagemaximum numberof characters that

can be input

24

Textarea ControlAllows 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

Adding Textareas

start textarea field namenumberof rows

numberof columns

endtextarea

26

Password ControlSame 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

SummaryDefine terms related to formsDescribe the different form controls

and their usesUse the <FORM> tagUse the <INPUT> tagCreate radio buttonsCreate a text fieldCreate a textarea field

28

SummaryUse the <SELECT> tagUse the <OPTION> tagCreate a selection menuInsert options into a selection menuCreate a Submit buttonCreate a Reset button