Forms
-
Upload
digital-insights -
Category
Technology
-
view
1.717 -
download
2
Transcript of Forms
FormsForms
FormsForms
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 & Structure & CommunicationCommunication 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 & Structure & CommunicationCommunication
ElementsElementsThe 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
ElementsElements
Layout & DesignLayout & 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 & DesignLayout & Design
Using FormsUsing 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 FormsUsing Forms Create a web page that uses text fields
Using FormsUsing Forms
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="James" />
MI: <input type="text" name="Middle Initial" size="5" maxlength="6" value="D" />
Last name: <input type="text" name="Second Name" size="40" maxlength="256" value="Carswell" /> <br/>
Address: <input type="text" name="Address" size="10" maxlength="30"/>
<input type="submit" value="Send It" />
<input type="reset" value="Reset It" />
</form>
Using FormsUsing Forms Create a web page that uses check boxes
<form name="MyForm2" <form name="MyForm2" action="mailto:[email protected]" action="mailto:[email protected]" method="post">method="post">
<input type="checkbox" <input type="checkbox" name="FavouriteFood" value="Pizza" name="FavouriteFood" value="Pizza" checked/> Pizzachecked/> Pizza
<input type="checkbox" name=" <input type="checkbox" name=" FavouriteFood" value="Salad" /> FavouriteFood" value="Salad" /> SaladSalad
<input type="checkbox" name=" <input type="checkbox" name=" FavouriteFood " value="Burger" /> FavouriteFood " value="Burger" /> Burger<br/>Burger<br/>
<input type="submit" value="Send It" /><input type="submit" value="Send It" /><input type="reset" value="Reset It" /><input type="reset" value="Reset It" />
</form></form>
Using FormsUsing Forms Create a web page that uses radio buttons
<form name="MyForm3" <form name="MyForm3" action="mailto:[email protected]" action="mailto:[email protected]" method="post">method="post">
<input type="radio" name="gender" <input type="radio" name="gender" value="male" /> Male<br />value="male" /> Male<br />
<input type="radio" name="gender" <input type="radio" name="gender" value="female" /> Female<br />value="female" /> Female<br />
<input type="submit" value="Send It" /><input type="submit" value="Send It" /><input type="reset" value="Reset It" /><input type="reset" value="Reset It" />
</form></form>
Using FormsUsing Forms Create a web page that uses buttons
<form name="MyForm4" <form name="MyForm4" action="mailto:[email protected]" action="mailto:[email protected]" method="post">method="post">
Select your favourite season:Select your favourite season:<input type="button" value="Fallish" /><input type="button" value="Fallish" /><input type="button" value="Winter" /><input type="button" value="Winter" /><input type="button" value="Spring" /><input type="button" value="Spring" /><input type="button" value="Summer"<input type="button" value="Summer"/><br />/><br />
</form></form>
Using FormsUsing Forms
Create a web page that uses menus
<form action="mailto:[email protected]" <form action="mailto:[email protected]" method="post">method="post">
<select name="compHardware" <select name="compHardware" size="4">size="4"><option> Disk Drive</option><option> Disk Drive</option><option > More RAM</option><option > More RAM</option><option selected> Zip drive</option><option selected> Zip drive</option><option> New monitor</option><option> New monitor</option>
</select></select></form></form>
Formatting FormsFormatting 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 FormsFormatting Forms Format form with tables
<table align="center"><table align="center"><caption><h2 align="center">Please fill this survey </h2></caption><caption><h2 align="center">Please fill this survey </h2></caption><form name="myForm" method="post" action="mailto:[email protected]"><form name="myForm" method="post" action="mailto:[email protected]">
<tr><tr><td>First Name:</td><td>First Name:</td><td><input type="text" name="first" size="10" <td><input type="text" name="first" size="10"
maxlength="15"></td>maxlength="15"></td><td>MI:</td><td>MI:</td><td><input type="text" name="mi" <td><input type="text" name="mi"
size="1"></td>size="1"></td><td>Last Name:</td><td>Last Name:</td><td><input type="text" name="last" size="10" <td><input type="text" name="last" size="10"
maxlength="18"></td>maxlength="18"></td></tr></tr>
</form></form></table></table>