Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Forms
  2. 2. Forms <ul><li>Forms are used for e-commerce, online purchases, surveys, registrations, etc. </li></ul><ul><li>Websites using forms usually collect information and must use secure internet connections </li></ul><ul><li>Sending information via forms is easy and automatic </li></ul><ul><li>The information is sent using name/value pairs: </li></ul><ul><ul><li>It can be submitted/written to a database </li></ul></ul><ul><ul><li>It can be e-mailed to someone </li></ul></ul>
  3. 3. Structure & Communication <ul><li>There are two distinct parts: front end and back end </li></ul><ul><ul><li>Front end is the visible part in the browser where the user enters data </li></ul></ul><ul><ul><li>Back end is the invisible part and is a computer program that processes the information </li></ul></ul><ul><li>Developing front end is much simpler than developing the back end </li></ul><ul><li>Front end uses XHTML, while back end uses knowledge of programming languages </li></ul><ul><li>The <form> tag with action attribute develops the link between the front and the back ends </li></ul>
  4. 4. Structure & Communication
  5. 5. Elements <ul><li>The form elements are: </li></ul><ul><li>text fields – allows you to input a line of text </li></ul><ul><ul><li>Parameters: size and maximum length </li></ul></ul><ul><li>radio buttons – provide multiple choices with only one selection </li></ul><ul><ul><li>Parameters: checked or unchecked </li></ul></ul><ul><li>check boxes – provide multiple choices with multiple selections </li></ul><ul><ul><li>Parameters: checked or unchecked </li></ul></ul><ul><li>Menus – Provides a menu of verbose choices </li></ul><ul><ul><li>Parameter: size </li></ul></ul><ul><li>text areas – Provide multiple lines of text </li></ul><ul><ul><li>Parameters: width and height </li></ul></ul><ul><li>submit buttons – collects and sends form input </li></ul><ul><ul><li>Parameters: button label </li></ul></ul><ul><li>reset buttons – erases or clears the form input </li></ul><ul><ul><li>Parameters : button label </li></ul></ul>
  6. 6. Elements
  7. 7. Layout & Design <ul><li>Form design tips: </li></ul><ul><ul><li>Keep the form short </li></ul></ul><ul><ul><li>Keep the form simple </li></ul></ul><ul><ul><li>Keep the form organised </li></ul></ul><ul><ul><li>Arrange form elements with tables and layers </li></ul></ul><ul><li>The common theme for each form is: </li></ul><ul><ul><li>All forms have a submit and reset button </li></ul></ul><ul><ul><li>Every form has an action attribute and a method </li></ul></ul>
  8. 8. Layout & Design
  9. 9. Using Forms <ul><li>There are 5 XHTML tags that can be used </li></ul><ul><ul><li><form> - Allows you to create a layout </li></ul></ul><ul><ul><ul><li>Attributes : name, action, method, enctype, accept-charset, accept </li></ul></ul></ul><ul><ul><li><input> - creates form elements </li></ul></ul><ul><ul><ul><li>Attributes : type, name, value, size, maxlength, checked, src </li></ul></ul></ul><ul><ul><li><select> - creates a menu </li></ul></ul><ul><ul><ul><li>Attributes : name, size, multiple </li></ul></ul></ul><ul><ul><li><option> - creates menu items </li></ul></ul><ul><ul><ul><li>Attributes : selected, value, label </li></ul></ul></ul><ul><ul><li><textarea> - creates a text area </li></ul></ul><ul><ul><ul><li>Attributes : name, rows, cols, wrap </li></ul></ul></ul>
  10. 10. Using Forms <ul><li>Create a web page that uses text fields </li></ul>
  11. 11. Using Forms <ul><li>The start of the code for this form is as follows: </li></ul><ul><li><form name=&quot;MyForm&quot; action=&quot;; method=&quot;post&quot;> </li></ul><ul><li>Enter your name: <br/> </li></ul><ul><li>First name: <input type=&quot;text&quot; name=&quot;First Name&quot; size=&quot;40&quot; maxlength=&quot;256&quot; value=&quot;James&quot; /> </li></ul><ul><li>MI: <input type=&quot;text&quot; name=&quot;Middle Initial&quot; size=&quot;5&quot; maxlength=&quot;6&quot; value=&quot;D&quot; /> </li></ul><ul><li>Last name: <input type=&quot;text&quot; name=&quot;Second Name&quot; size=&quot;40&quot; maxlength=&quot;256&quot; value=&quot;Carswell&quot; /> <br/> </li></ul><ul><li>Address: <input type=&quot;text&quot; name=&quot;Address&quot; size=&quot;10&quot; maxlength=&quot;30&quot;/> </li></ul><ul><li><input type=&quot;submit&quot; value=&quot;Send It&quot; /> </li></ul><ul><li><input type=&quot;reset&quot; value=&quot;Reset It&quot; /> </li></ul><ul><li></form> </li></ul>
  12. 12. Using Forms <ul><li>Create a web page that uses check boxes </li></ul><form name=&quot;MyForm2&quot; action=&quot;; method=&quot;post&quot;> <input type=&quot;checkbox&quot; name=&quot;FavouriteFood&quot; value=&quot;Pizza&quot; checked/> Pizza <input type=&quot;checkbox&quot; name=&quot; FavouriteFood&quot; value=&quot;Salad&quot; /> Salad <input type=&quot;checkbox&quot; name=&quot; FavouriteFood &quot; value=&quot;Burger&quot; /> Burger<br/> <input type=&quot;submit&quot; value=&quot;Send It&quot; /> <input type=&quot;reset&quot; value=&quot;Reset It&quot; /> </form>
  13. 13. Using Forms <ul><li>Create a web page that uses radio buttons </li></ul><form name=&quot;MyForm3&quot; action=&quot;; method=&quot;post&quot;> <input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;male&quot; /> Male<br /> <input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;female&quot; /> Female<br /> <input type=&quot;submit&quot; value=&quot;Send It&quot; /> <input type=&quot;reset&quot; value=&quot;Reset It&quot; /> </form>
  14. 14. Using Forms <ul><li>Create a web page that uses buttons </li></ul><form name=&quot;MyForm4&quot; action=&quot;; method=&quot;post&quot;> Select your favourite season: <input type=&quot;button&quot; value=&quot;Fallish&quot; /> <input type=&quot;button&quot; value=&quot;Winter&quot; /> <input type=&quot;button&quot; value=&quot;Spring&quot; /> <input type=&quot;button&quot; value=&quot;Summer&quot; /><br /> </form>
  15. 15. Using Forms <ul><li>Create a web page that uses menus </li></ul><form action=&quot;; method=&quot;post&quot;> <select name=&quot;compHardware&quot; size=&quot;4&quot;> <option> Disk Drive</option> <option > More RAM</option> <option selected> Zip drive</option> <option> New monitor</option> </select> </form>
  16. 16. Formatting Forms <ul><li>A form may have multiple elements </li></ul><ul><li>The form elements must be organised to make it easier for the web surfers to fill them </li></ul><ul><li>When using tables, form elements are a part of the table cells -> can get quite complex </li></ul><ul><li>Formatting forms by using layers is easier and offers more flexibility </li></ul>
  17. 17. Formatting Forms <ul><li>Format form with tables </li></ul><table align=&quot;center&quot;> <caption><h2 align=&quot;center&quot;>Please fill this survey </h2></caption> <form name=&quot;myForm&quot; method=&quot;post&quot; action=&quot;;> <tr> <td>First Name:</td> <td><input type=&quot;text&quot; name=&quot;first&quot; size=&quot;10&quot; maxlength=&quot;15&quot;></td> <td>MI:</td> <td><input type=&quot;text&quot; name=&quot;mi&quot; size=&quot;1&quot;></td> <td>Last Name:</td> <td><input type=&quot;text&quot; name=&quot;last&quot; size=&quot;10&quot; maxlength=&quot;18&quot;></td> </tr> </form> </table>