1 / 26

Crafting Effective Web Forms: Enhancing User Interaction

Understand the interface, forms, and applications to create engaging web forms for surveys, applications, and more with HTML elements. Dive into form design techniques using tags and learn about form templates.

lantzj
Download Presentation

Crafting Effective Web Forms: Enhancing User Interaction

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. The Web Page as User Interface: Forms and Web Applications Stacee Millangue INF 385E November 13, 2008

  2. Overview • Interface • Forms • Web Applications Stacee Millangue INF 385E November 13, 2008

  3. Interface Definition from IBM: User interface refers to the parts of a computer and its software that you (the computer user) see, hear, touch, or talk to. It is the set of all the things that allow you and your computer to communicate with each other. Source: https://www-01.ibm.com/software/ucd/designconcepts/whatisUI.html Stacee Millangue INF 385E November 13, 2008

  4. Why web forms? Basis in anything that requires user input • Surveys & Questionnaires • Applications (i.e. job application) • Online shopping • Search queries Source: http://www.webaim.org/techniques/forms/ Stacee Millangue INF 385E November 13, 2008

  5. Web Form Elements- HTML • Text fields • Password fields • Radio buttons • Checkboxes • Drop-down menu • User input button (i.e. Submit) Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  6. Web Form – Form Area A form area contains form elements Code: Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  7. Web Form – Text Field Code: <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> Display Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  8. Web Form – Password Field Code: <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> Display Note: Password displays as symbols but not encrypted Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  9. Web Form – Radio Button Display Code: <html> <body> <form action=""> Male: <input type="radio" checked="checked" name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  10. Web Form – Checkboxes Display Code: <html> <body> <form action=""> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  11. Web Form – Drop Down Menu Display Code: <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  12. Web Form – Input Button Display Code: <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  13. Web Form Elements- Tags • <form> Defines a form for user input • <input> Defines an input field • <textarea> Defines a text-area (a multi-line text input control) • <label> Defines a label to a control • <fieldset> Defines a fieldset Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  14. Web Form Elements- Tags • (con’t) • <legend> Defines a caption for a fieldset • <select> Defines a selectable list (a drop-down box) • <optgroup> Defines an option group • <option> Defines an option in the drop-down box • <button> Defines a push button Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008

  15. Designing a Form • HTML • WSIWYG such as Dreamweaver • Design software such as Photoshop • Templates Stacee Millangue INF 385E November 13, 2008

  16. Web Form Templates • Wufoo (3 for free) • Web Form Factory (open source) • Form Assembly (free & paid plans) Stacee Millangue INF 385E November 13, 2008

  17. Example: E-mail Form Display Stacee Millangue INF 385E November 13, 2008

  18. Example: E-mail Form (con’t) Code: <html> <body> <form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain"> <h3>This form sends an e-mail to W3Schools.</h3> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail“ value="yourmail" size="20"> <br> Comment:<br> <input type="text" name="comment“ value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> Stacee Millangue INF 385E November 13, 2008

  19. How forms work • Form is useless without a handler script • JavaScript • Perl CGI script • PHP • Server will need to be set up to run scripts • Database needed for stored information Stacee Millangue INF 385E November 13, 2008

  20. Web Applications • Application: Of or being a computer program designed for a specific task • Therefore… web applications are designed for interactivity so users can accomplish various tasks Stacee Millangue INF 385E November 13, 2008

  21. Web Applications (con’t) • Difference from websites: • Particular for each user (by session) • User can control data • Advantages • Portable — Can use from anywhere with internet • No software to download Source: http://www.boxesandarrows.com/view/what_is_a_web_application_ Stacee Millangue INF 385E November 13, 2008

  22. Example: Google Calendar Stacee Millangue INF 385E November 13, 2008

  23. Example: Bibme Stacee Millangue INF 385E November 13, 2008

  24. Example: Picnik Stacee Millangue INF 385E November 13, 2008

  25. Application/Interface Sources • Yahoo User Interface Library • Free web applications: Stacee Millangue INF 385E November 13, 2008

  26. Questions? Stacee Millangue INF 385E November 13, 2008

More Related