Web Design - Forms

Forms Forms are everywhere on the Internet – Feedback Forms – Order Forms – Registration Forms – Surveys – 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 Object Text Field Text Area Check Box Radio ButtonRadio Group List/Menu Button 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!!