Chapter 4: Form Handling
Form handling is very important when it comes down to the user connecting or communicating with the developer. The reason is because we need to allow the user to fill out information that will be saved for later use, and also for the business end of it all.
Your forms can contain many features such as pop-up menus, radio buttons, check boxes, and entry lists. This is also an area for inputing passwords and email information.
When a form has been completed, it then goes out to the web server and is processed and saved through the CGI which stands for, "Common Gateway Interface". Before it can go through it should be validated through a "Form Validation" process to make sure the data the user entered is clean and incisive.
The chart below will give an overview of the tags, atributes, and descriptions of what you will be using to build these forms and get them working.
| Tag | Attribute | Description |
|---|---|---|
| form | The tag which holds all the other tags in the HTML page | |
| action | The motion in which the computer communiactes with the server | |
| inpute | A group of different typse consisting multiple type attributes | |
| class | The name of a class given to a element or group of elements | |
| id | Given to a uniqully assigned element, which can not start with a number or have spaces | |
| name | Meant to group radio buttons | |
| maxlength | The max length a user can assign to a field | |
| size | The number of characters that can be displayed on a page | |
| type | The type of values that can be entered which include, buttons,images, passwords, submit, checkbox, radio, reset, and finally text | |
| value | The overall preset value for the form | |
| label | Labels are given if controls are not built-in, like text fields, radio buttons, menus, and check boxes | |
| for | An id for a label specifacally assigned to a particular element | |
| option | Options available to a inside selected tag | |
| selected | Shows if the option is selected as a default | |
| value | The preset value given to an option | |
| select | This form field can be either a pop-up menu or a scroll list, as long as it has a size attribute assigned to it | |
| class | The class is assigned to an element | |
| id | A specific identification for a element | |
| size | This displays the number of options, but if there is only 1 attribute set or no attribute, then it turns to a pop-menu |
Select-and-Go Navigation
The most commonly used featured is the pop-up menu which brings up a list of choices and then you can click on the go button to take you to that choice. Some good examples of this feature being used on sites are auto dealer ships, retail stores, realtors, and any other places with a lot of inventory and pages. In this section we will eliminate the go button and just have it take you to your destination after you click on an item from the list.
In the code below you can include your own personal links to pages you have already created, and include the titles you gave them.
<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation<⁄title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css">
<⁄head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value =""chapter1.html"">Getting Acquainted</option>
<option value =""chapter2.html"">Working with radio buttons</option>
<option value =""chapter3.html"">Working with Images</option>
<option value =""chapter4.html"">Form Handling</option>
<option value =""example03.html"">Example 3</option>
<option value =""example04.html"">Example 5</option>
<option value =""example08.html"">Example 8</option>
<⁄h1>
<⁄body>
<⁄html> |
window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById("newLocation");
var newPage = newLoc.options[newLoc.selectedIndex].value;
if (newPage !="") {
window.location = newPage;
}
}
|