1. Designing Forms
Lesson 10

2. Overview of Forms Forms are used all over the Web to Types of forms:
Accept information
Provide interactivity
Types of forms:
Search form, Order form, Newsletter sign-up form, Survey form. Etc….

3. How Forms Work
You visit a Web page with a form, fill it out, and submit it
The browser sends the data to the Web server
The Web server receives the form data, and then passes it off to a Web application to be processed
The Web application processes the data and creates a response, which it sends back to the Web server
The Web server sends the Web application’s response to the browser

4. How Forms Work The form itself is written in HTML
And, while HTML supports the creation of forms, it does not include tools to process the information.
A program on the Web server is needed to store or manipulate the data in some manner

5. Forms and Web Server-Based Programs
Server-based programs are written in many languages
The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in Perl.
Other popular languages include:
ASP
ColdFusion
C/C++
PHP
VBScript

6. Forms Syntax
Five basic form elements are commonly supported by the major browsers:
<form>
<input>
<select>
<option>
<textarea>

7. Forms Syntax (continued)
HTML 4.01 introduced five new form elements:
<button>
<fieldset>
<label>
<legend>
<optgroup>

8. The <form> tag
The <form> tag holds all the elements that make up the form
<form attributes>
elements
</form>
A variety of <form> attributes tells the browser how to handle the form data

9. <form> attributes
action - specifies the filename and location of the program that processes the form
method - specifies how your Web browser sends data to the server
get – default value, form data passed in URL
post – more secure, form data passed in HTTP Entity Body
name – identifies the form
id – identifies the form
<form action=“ cgi_bin/script.cgi” method=“post” name=“survey” id=“survey”>… </form>

10. Input Objects

11. Input Objects
The <input> element defines many of the form input object types
Text box
Radio buttons
Check boxes
Etc.
The type attribute specifies the type of input object
Example: <input type=“textbox” />

13. Text Boxes The text box is the most commonly used form element
Attributes
type=“text”
name
size
maxlength
value
<input type=“text” name=“firstname” size=“20” maxlength=“35” />

14. Password Boxes
Used to accept text information that needs to be hidden as it is entered
Attributes:
type=“password”
name
size
maxlength
value
<input type=“password” name=“password” size=“20” maxlength=“35” />

15. Check Boxes
Used to allow the user to select one or more of a group of predetermined items
Attributes:
type=“checkbox”
name
checked
value

16. Radio Buttons
Used to allow the user to select exactly one from a group of predetermined items
Each radio button in a group is given the same name and a unique value
Attributes:
type=“radio”
name
checked
value

17. Submit & Reset Buttons
The submit and reset buttons let the user choose whether to send the form data or start over
<input type=“submit” value=“Submit” />
<input type=“reset” value=“Clear Form” />

18. Hidden Fields This form element is not displayed on the web page.
Hidden form fields can be accessed by both client-side and server-side scripting and are sometimes used to contain information needed as the visitor moves from page to page.
Attributes:
type=“hidden”
name
value

19. Custom Event Buttons
Custom event buttons activate a function in some associated program or script
Attributes:
type=“button”
name
value

20. Submit a File
Users can select a file on their own computer and send it to the server
Attributes
type=“file”
name

21. Image for the Submit Button
You can choose an image file and use it instead of the default submit button.
Attributes:
type=“image”
name
src
<input type="image" src="submit.gif" name="submitformbtn" />

22. Other Form Objects

23. The <select> Element
The <select> element lets you create a list box or scrollable list of selectable options
Attributes: name, size, multiple
Each individual item in the list is specified using the <option> element.
Attributes: value, selected

24. The <select> element
<select name="boats"> <option>Canoe</option> <option>Jon Boat</option> <option>Kayak</option> <option>Bass Boat</option> <option>Family Boat</option> </select>

25. Setting the Selection List Size
You can change the number of options displayed in the selection list by modifying the size attribute:
<select size=“value”>

26. The <textarea> element
The <textarea> element lets you create a larger text area for user input.
Attributes:
name
cols
rows
value

27. The <textarea> element
<p>Please comment on your concerns regarding Internet privacy and safety:<br /> <textarea name="comments“ cols="75“ rows="5"> </textarea> </p>

28. The <label> element
Associates a text label with a form element
Two different formats
<label>
<input type=“text” name=“Cust ” />
</label> or
<label for=" "> </label>
<input type="text" name="Cust " />

29. Field Sets
HTML and XHTML allow you to organize option buttons into a group of fields called field sets.
<fieldset>
creates the field set
<legend>
Adds a caption to the field set

30. Field Sets <fieldset>
<legend> Oatmeal Varieties </legend>
<p>Apple Cinnamon<input type="radio" name=“oatmealtype” value="applecinnamon“ /></p>
<p>Nutty Crunch<input type="radio“ name=“oatmealtype” value="nuttycrunch" /></p>
<p>Brown Sugar<input type="radio" name=“oatmealtype” name="brownsugar” /></p>
</fieldset>

31. Tips for Creating Effective Forms
Mark fields that are required, but also limit the number of un-required fields.
If you need to collect a lot of information, break the form into manageable sections spread out over several pages.
Provide detailed instructions about what users are expected to do. Don’t assume that your form is self-explanatory.

32. Free Remotely-hosted Form Processing
Many web host providers offer free scripts for their clients. Contact their support area or FAQ to learn more about their services.
Some web sites that offer FREE remotely hosted scripts (in return for displaying an ad):