Transcript Forms - Computing

Forms
Forms




Forms are used for e-commerce, online purchases,
surveys, registrations, etc.
Website 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 written to a database
It can be submitted to a database
It can be e-mailed to someone
Forms





Structure and communication
Element
Layout and design
Using forms
Formatting forms
Structure & Communication





Structure and communication
Element
Layout and design
Using forms
Formatting forms
Structure & Communication

There are two distinct parts: front end and back end





Front end is the visible part in the browser that the user
fills
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


radio buttons – provide multiple choices with only one selection


Parameters: width and height
submit buttons – collects and sends form input


Parameter: size
text areas – Provide multiple lines of text


Parameters: checked or unchecked
Menus – Provides a menu of verbose choices


Parameters: selected or unselected
check boxes – provide multiple choices with multiple selections


Parameters: size and maximum length
Parameters: button label
reset buttons – erases or clears the form input

Parameters : button label
Elements
Layout & Design

The common theme for each form is:




Every form has some form elements
All forms have a submit and reset button
Every form has an action attribute and a method
Form design tips:




Keep the form short
Keep the form simple
Keep the form organised
Arrange form elements with tables and layers
Layout & Design
Using Forms

There are 5 XHTML tags that can be used

<form> - Allows you to create a layout


<input> - creates form elements


Attributes : name, size, multiple
<option> - creates menu items


Attributes : type, name, value, size, maxlength, checked, src
<select> - creates a menu


Attributes: name, action, method, enctype, accept-charset,
accept
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 – Text Field

The start of the code for this form is as follows:
<form name=“myForm"
action="mailto:[email protected]" method="post">
Enter your name: <br/>
First name: <input type="text" name="First Name"
size="40" maxlength="256" value=“yupeng" />
MI: <input type="text" name="Middle Initial" size="5"
maxlength="6" value="F" />
Last name: <input type="text" name="Second Name"
size="40" maxlength="256" value=“liu" /> <br/>
Address: <input type="text" name="Address" size="20"
maxlength="30"/>
</form>
Using Forms - Checkbox

Create a web page that uses check boxes
<form name=“MyForm2” action="mailto:[email protected]"
method="post">
<input type="checkbox"
name=“FavouriteFood" value="Pizza" checked/> Pizza
<input type="checkbox" name="
FavouriteFood" value="Salad" /> Salad
<input type="checkbox" name="
FavouriteFood " value="Burger" /> Burger
<br/>
…
…
<input type="submit" value="Send It" />
<input type=“reset" value="Reset It" />
</form>
Using Forms – Radio Button

Create a web page that uses radio buttons
<form name="MyForm"
action="mailto:[email protected]" method="post">
<div>Check your gender:</div>
<input type="radio" name="gender"
value="Male" /> Male<br />
<input type="radio" name="gender"
value="bb" /> Female<br />
<input type="submit" value="Send It" />
<input type=“reset" value="Reset It" />
</form>
Using Forms - Button

Create a web page that uses buttons
<form action="mailto:[email protected]"
method="post">
<div>Select your favourite season:</div>
<input type="button" value="Fall" />
<input type="button" value="Winter" />
<input type="button" value="Spring" />
<input type="button" value="Summer" />
….
</form>
Using Forms - Menus

Create a web page that uses menus
<form action="mailto:[email protected]"
method="post">
<select name="compHardware" size="4">
<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 -> quite complex

Formatting forms by using layers is easier
and offers more flexibility
Formatting Forms

Format form with tables
<table align="center">
<caption><h2 align="center">Please fill this survey form</h2>
</caption>
<form name="myForm" method="post" action="mailto:[email protected]">
<tr>
<td>First Name:</td>
<td>
<input type="text" name="first" size="10" maxlength="15">
</td>
<td>MI:</td>
<td>
<input type="text" name="mi" size="1">
</td>
<td>Last Name:</td>
<td>
<input type="text" name="last" size="10" maxlength="18">
</td>
</tr>
</form>
</table>
Formatting Forms

Format form with layers – What would the
code for this look like?
Reference

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP
Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility
and Protecting Against Worst-Case Scenarios with XHTML and CSS,
New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript