1 / 13

WDV 331 Dreamweaver Applications

This resource covers the fundamentals of form design in Adobe Dreamweaver CS6, focusing on mobile web applications. Learn how to create forms, add various elements such as text fields, checkboxes, radio buttons, and pull-down menus. Understand the significance of the action field, method field (GET vs. POST), and form validation techniques. Explore the use of jQuery UI for enhancing forms and discover useful resources for advanced validation. This guide is ideal for developers aiming to design effective forms for mobile devices.

grant-henry
Télécharger la présentation

WDV 331 Dreamweaver Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 12 Forms

  2. 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

  3. 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/

  4. Buttons • USE jQuery Mobile ?????? or jQuery UI ???? • The <label> Tag • The <fieldset> Tag

  5. Dreamweaver Insert Form Dreamweaver CS 6 UPDATED & CC

  6. 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

  7. jQueryUIDreamweaver CC

  8. jQueryUI Dreamweaver CC • Dreamweaver CC  jQuery UI • http://designmodo.com/dreamweaver-cc/ • http://helpx.adobe.com/dreamweaver/using/jquery-widget-dreamweaver.html • Demos • http://jqueryui.com/demos/

  9. jQueryUI - 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/

  10. 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 ?????

  11. 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/

  12. 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

  13. 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.

More Related