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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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>