Forms
Upcoming SlideShare
Loading in...5
×
 

Forms

on

  • 1,994 views

 

Statistics

Views

Total Views
1,994
Views on SlideShare
1,994
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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>