MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab:...
Transcript of MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab:...
![Page 1: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/1.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
FORMS
MYGRAPHICSLAB: ADOBE DREAMWEAVER CS6
![Page 2: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/2.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
WEB-BASED FORMS OVERVIEW
Web forms collect data Create simple, logical designs Use different field types for different
types of data Text fields for text/numeric data Checkboxes/radio buttons for simple
choices Select lists/menus for multiple
choice Each field name must be unique Add labels to identify desired/
requested answer/data ID attribute used for dynamic
actions Tab index attribute sets interactive
fill order
![Page 3: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/3.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A WEB FORM
Required when using field elements Three ways to insert:
Using the Insert menu Using the Insert panel Automatically when inserting form components
Requires unique name
![Page 4: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/4.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A TEXT FIELD
Collects text or numericdata
Name for database fieldor the target application
Set Char Width tospecify display size Longer text scrolls
Set Max Chars totruncate data or limitinput
![Page 5: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/5.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A TEXTAREA
Collects larger amounts of text Name for database field/target application Set field size as Char width Set number of lines of field Other options
![Page 6: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/6.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A CHECKBOX
Can be selected or deselected User selects from list of options
May set to choose more than one option Name for database field/target application Set the value of the field Set initial checked/unchecked status
![Page 7: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/7.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A RADIO BUTTON
User chooses one of a set of options Use checkbox for multiple selections
Name for database field/target application Set the value of the field Set initial state of checked/unchecked status
Users cannot deselect checked radio buttons
![Page 8: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/8.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A SELECT MENU
Creates drop-down list of options Only one option can be chosen
Name for database field/target application Set initial status/value
![Page 9: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/9.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A SELECT LIST
Creates scrollable list of options Multiple options can be chosen
Set initial status/value
![Page 10: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/10.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
SPRY VALIDATION OVERVIEW
Checks that correct data/info is entered Keeps wrong data from submission Types of validation
Required input Number range Structure/format
Dreamweaver offers Spry Validation tools Spry combines JavaScript and CSS
![Page 11: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/11.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT/CONFIGURE A SPRY VALIDATION TEXT FIELD
Same as normal text field Specify required input Validates format/structure Use to confirm dates, email address, SS#, phone number, etc. Add custom prompts/messages for validation
![Page 12: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/12.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT/CONFIGURE A SPRY VALIDATION TEXTAREA
Same as normal text area Specify required input Set max character limit with visual feedback
![Page 13: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/13.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT/CONFIGURE A SPRY VALIDATION RADIO GROUP
Same as normal radio button Inserts multiple radio buttons with one group name Set required input
![Page 14: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/14.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT/CONFIGURE A SPRY VALIDATION PASSWORD
Text field with built-in password validation Masks input to protect password Specify password strength and structure
Minimum length Maximum length Format/structure (Letter, digits, upper, lower)
![Page 15: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/15.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT/CONFIGURE A SPRY VALIDATION SELECT
Same as normal select Specify required/acceptable input Configure field options Configure validation options
![Page 16: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/16.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
FORM SUBMISSION METHOD OVERVIEW
Submit data to the specified location Another page Server URL Email
Submit uses two methods: Get and Post Get method passes data via URL parameters Post method passes data via Form parameters
![Page 17: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/17.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
URL PARAMETERS OVERVIEW
Data passed via URL Data is visible in address Limited to 8192 characters Data stored in browser history Not good for secure information
![Page 18: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/18.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
FORM PARAMETERS OVERVIEW
Data passed through the http request Data is hidden and more secure Not stored in browser history
![Page 19: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/19.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
INSERT AND CONFIGURE A SUBMIT/RESET BUTTON
Submits or resets form or user-defined action Format with CSS Use image for buttons Configure button in Property inspector
![Page 20: MyGraphicsLab: Dreamweaver CS6 - DW11 Presentation · 2014-04-07 · Title: MyGraphicsLab: Dreamweaver CS6 - DW11_Presentation.pdf Keywords Created Date: 20120730013935Z](https://reader031.fdocuments.us/reader031/viewer/2022011802/5b1cbf517f8b9ae9388b858a/html5/thumbnails/20.jpg)
Copyright © 2013 MyGraphicsLab / Pearson Education
CONFIGURE A FORM SUBMISSION METHOD
Configure Form Action in Property inspector Assign Get or Post method in Property inspector Assign Form Action in Server Behaviors panel