Dreamweaver Forms Overview

Forms – A Little Review Most user/webpage communication is one way, like this: Most user/webpage communication is one way, like this: BrowserWeb Server

Forms – A Little Review Forms allow two-way communication with pages Forms allow two-way communication with pages BrowserWeb Server

Forms – A Little Review Forms provide two-way communication between you (the user) and a Web server Forms provide two-way communication between you (the user) and a Web server Used to allow the user to enter something Used to allow the user to enter something Forms themselves are just a container Forms themselves are just a container

Forms – A Little Review Forms can contain various types of input fields: Forms can contain various types of input fields: - Text boxes- Text areas - Check boxes- Option buttons - Push buttons- Drop-down boxes

Forms – A Little Review Forms are processed by a program called a form handler Forms are processed by a program called a form handler It runs on the web server It runs on the web server The form sends data to a form handler when submit is clicked The form sends data to a form handler when submit is clicked Data from all fields is sent in Name/Value pairs via a Get or Post method Data from all fields is sent in Name/Value pairs via a Get or Post method This is defined on the FORM tag using the ACTION and METHOD attributes This is defined on the FORM tag using the ACTION and METHOD attributes

Name: SubmitReset How It All Sorta Works 1. User Enters text 2. User Clicks Submit 3. Data gets sent to form handler Name=Filmore+Pain 4. Data gets processed by form handler Browser Web Server Filmore Pain 5. May send data back Name Entered 1a. Scripts may edit data 2a. Scripts may edit data

Using Forms in Dreamweaver Use the Forms menu on the Insert panel Use the Forms menu on the Insert panel If you insert a form field outside of a form, it will also insert a form If you insert a form field outside of a form, it will also insert a form Two kinds of form fields Two kinds of form fields Basic Basic Normal, no formatting or edits Normal, no formatting or edits Like what we did in HTML Like what we did in HTML Spry Spry Built-in formatting and edits Built-in formatting and edits We’re going to use spry form fields We’re going to use spry form fields

Using Forms in Dreamweaver General process General process Add external structure (tables, labels, etc.) if necessary Add external structure (tables, labels, etc.) if necessary Insert a form and edit attributes Insert a form and edit attributes Insert internal structure (tables, labels, etc.) if necessary Insert internal structure (tables, labels, etc.) if necessary Insert form fields and edit attributes Insert form fields and edit attributes Don’t forget to insert buttons Don’t forget to insert buttons Demo time Demo time