Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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