• Like
  • Save
Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Forms Forms Presentation Transcript

    • Forms
    • 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
    • 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
    • Structure & Communication
    • 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
    • Elements
    • 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
    • Layout & Design
    • 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
    • Using Forms
      • Create a web page that uses text fields
    • Using Forms
      • The start of the code for this form is as follows:
      • <form name=&quot;MyForm&quot; action=&quot;mailto:youremailaddress@dit.ie&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>
    • Using Forms
      • Create a web page that uses check boxes
      <form name=&quot;MyForm2&quot; action=&quot;mailto:youremailaddress@dit.ie&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>
    • Using Forms
      • Create a web page that uses radio buttons
      <form name=&quot;MyForm3&quot; action=&quot;mailto:youremailaddress@dit.ie&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>
    • Using Forms
      • Create a web page that uses buttons
      <form name=&quot;MyForm4&quot; action=&quot;mailto:youremailaddress@dit.ie&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>
    • Using Forms
      • Create a web page that uses menus
      <form action=&quot;mailto:email@address.com&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>
    • 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
    • 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;mailto:a@b.com&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>