Web Design - Forms

Forms• Forms are everywhere on the Internet– Feedback Forms– Order Forms– Registration Forms– Surveys– Etc– Etc

• We will design forms ...• To get the information from a form and store it

requires coding. (not part of this course content)

Form Objects

• Text Fields– Accepts any type of text entry (alphanumeric)– Can specify the length of the field, the number of lines,

maximum characters– Single line or multi-line (multi-line also called a text area)– Can make the field a password field

• Buttons– Submit and Reset– Submit ideally takes the information and stores it (code

required)– Reset - will automatically work if created properly

Form Objects (continued)• Check Boxes– Used when you want the user to be able to select

multiple options (choices)• Radio Buttons– Used when you want the user to be able to select only

one option (choice)– If you click on one, all of the others are unclicked

• Lists / Menus– Displays a list of options (with scroll bar)– A list allows multiple options to be selected with the

control key

Creating Forms

When creating forms we need to use the Insert Bar (change the tab to the forms tab)

Form

Obj

ect

Text

Fie

ld

Text

Are

a

Chec

k Bo

x

Radi

o Bu

tton

Radi

o G

roup

List

/Men

u

Butt

on

Label the Toolbar on your Handout!!

Notes

• When creating a form:– First insert a Form Object (this generates a red

dotted rectangle).– Everything included in the form must be inside

this red rectangle– **Important – only create one red rectangle**

• Every object you place in the form needs to be named!!

Demo / Exercise

We are going to start this as a demo. Then you are to finish it by following

the rest of the instructions on the handout.

We are going to take care of Steps 1 To 10 on the handout together.

Instructions

1. Open DreamWeaver – create a new document.

2. Give the page the Title: SRB Student Profile Form (Document Toolbar)

3. First line on the page type “SRB Student Profile” and press Enter.

4. Insert a Form Object onto the Page and give it the name SRBProfile (NO SPACES!!)

Instructions (continued)

5. Format the text “SRB Student Profile” to be blue, bold and size 5.

6. Place cursor inside the red rectangle (the form object)

7. Type First Name: then insert a text field, single line, name it FirstName (No Spaces)

8. Type Last Name: then insert a text field, single line, char width 35, name it LastName (No Spaces)

Instructions (continued)

9. Type Middle Initial: and insert a text field, single line, char width 5, name it Initial.

10.Press Enter to start another line.

**Notice the red rectangle expands as you create more content!!Everything you do from this step forward happens inside this rectangle!!