WDV 331 Dreamweaver Applications

Designing Websites for Mobile Devices

Dreamweaver CS6Chapter 12 Forms

Form Basics 1

• Create a Form Adding Form Elements– What All Forms Have in Common – Action field • (book) http://cafesoylentgreen.com/reserve.php • Jeff’s -->FormHandler-post.zip file at

– http://dmaccwebdev.org/WDV%20331/FINAL/

• Method field http://www.slideshare.net/ranjankumar/difference-between-get-and-post-method-of-form-submission • http://www.diffen.com/difference/Get_vs_Post

Form Basics 2

– Text Fields– Checkboxes and Checkboxes Groups– Radio Buttons and Radio Buttons Groups– Pull-Down Menus and Lists– File Field– Hidden Field• Although it uses display: none, the honey-pot stops

robots • http://devgrow.com/simple-php-honey-pot/

– Buttons• USE jQuery Mobile ?????? or jQuery UI ????

– The <label> Tag– The <fieldset> Tag

Dreamweaver Insert Form

DreamweaverCS 6 UPDATED & CC

jQuery UI

• Dreamweaver CS6 jQuery UI NONE• Dreamweaver jQuery UI extensions DW 4– http://www.webgurusdesignblog.com/2009/02/5-

jquery-ui-dreamweaver-extensions-you-can-use-to-simplify-your-everyday-work/

– May not work in DW CS6

jQuery UIDreamweaver CC

jQuery UI Dreamweaver CC

• Dreamweaver CC jQuery UI– http://designmodo.com/dreamweaver-cc/– http://helpx.adobe.com/dreamweaver/using/jque

ry-widget-dreamweaver.html• Demos– http://jqueryui.com/demos/

jQuery UI - Extras

• $$$ extensions– http://

www.flashdevelopment24.com/extensions.aspx?id=201

• Jquery basic download outside dreamweaver– http://jqueryui.com/ – Getting Started Document• http://learn.jquery.com/jquery-ui/getting-started/

Form Validation• Validation– Dreamweaver Spry • Is going away - no longer supported

– Straight iQuery• Quick & Easy

– http://corpocrat.com/2009/07/15/quick-easy-form-validation-tutorial-with-jquery/

• Advanced form validation– http://www.ferdychristant.com/blog//articles/DOMM-7LZJN7

• jQuery Validation Plugin– http://jqueryvalidation.org/– http://formvalidator.net/#reg-form

• jQuery UI Dreamweaver CC ?????

Forms - Other Options

Adobe Acrobat X Pro NOT Acrobat Reader• Form central by Adobe Web and PRF• https://

www.acrobat.com/formscentral/en/home.html• Wufoo• http://www.wufoo.com/• Formoid - easiest form generator by wow slider• http://formoid.com/

Form Tutorial

• Form video for Dreamweaver CC– http

://tv.adobe.com/watch/learn-dreamweaver-cc/working-with-form-properties/

– http://tv.adobe.com/watch/learn-dreamweaver-cc/html5-forms-workflow/

• HOME WORK: SKIP ALL SPRY !!!!• DO Page 612-616; 622-632; (EXTRA CREDIT)– Kindal 13107

Form Tutorial Validate

• Validate using jQuery UI (Extra Credit)– Use insert form and property panel – Required

check box puts in validation on some inserted form elements.

– http://dmaccwebdev.org/WDV%20331/Forms%20DW%20CC/Form_Master.html

– Use other sources for the slides and google– Spray is still available but is going away. You can

still but with the caution that it is not supported.