HTML Forms
|
|
HTML Forms |
|
Fundamentals of HTML Forms and Controls |
|
Introduction |
In HTML, a form is a webpage, or a section of a webpage, that is equipped with visual objects that allow a visitor to interact with the website. The interaction is made possible by the user being able to enter values, to make selections, and/or to click something. To make this possible, the form is equipped with objects named form controls, or web controls, or simply controls.
Forms and their controls are created like any HTML element, using tags. Remember that HTML is not case sensitive. You can create a control in all uppercase, in all lowercase, or a mix of both.
|
HTML Cannot Process a Form |
The form and the controls on it are created in HTML, but HTML is not equipped to use them. This means that there is no HTML built-in functionality to use a form. You must use another language to use the form. That is, you must write code or create a script using a computer scripting language. There are various scripting languages availavble, including JavaScript, VBScript, PHP, Perl, etc. The intention of these lessons is to only show how to create a form and its controls, not how to use them. Still, in our descriptions, we ought to briefly show how the controls behave.
We cannot describe a whole language here, we will just briefly review JavaScript. In HTML code, to show that you want to use a JavaScript-based script, create a section delimited by the script element. The start tag must indicate that the type of the script is text/javascript. This can be done as follows:
<script type="text/javascript"> </script>
This section is usually created in the head (but it can also be included in the body. A JavaScript code is usually included in a procedure, which in computer languages is called a function. A procedure is created using the function keyword, followed by a name for the function, followed by parentheses, and followed by {}. Here is an example:
<html>
<head>
<title>Exercise</title>
<script type="text/javascript">
function letUsDoSomethingHere(){}
</script>
<head>
<body>
</body>
</html>
A function is meant to perform one or more actions, such as calculating, validating, etc. It will depend on you. What the function is supposed to do must be written between its { and }.
Most of the time, if you are using JavaScript, you will have to create a lot of the functions you need. Still, JavaScript provides many built-in functions. One of the functions is used to display a message box. A message box in HTML is created with a function named alert. It takes a message as argument. The message is provided as a string.
|
Virtual and Physical Characteristics of Web Controls |
|
Identifying a Control |
Like all HTML elements, every web control is equipped with the id attribute that allows it to communicate with other parts of the webpage or of the web server.
|
Applying a Style to a Website |
Like any HTML element, a web control can be changed with CSS. Of course, you can create the style inline, in the same file where the control is created, or in a separate file.
|
The Input Type |
Many web controls are created with an element named input. To let you specify the particular control you want to create, the input element is equipped with an attribute named type whose values is a specific name for a desired control.
|
The Name of a Control |
Another important property of a control is its name. This allows the browser to identify it. To support names, the tag of every web control is equipped with an attribute named name. This attribute takes a string as value.
|
The Value of a Control |
If a control is made to receive or display a value, the value of that control is represented by an attribute named value.
|
Events of Web Controls |
|
Introduction |
An event is an action that causes a change on a web control. It could happen when the visitor clicks something, types something, moves something, etc. When this happens on the control, the control is said to fire an event. HTML supports various types of events. Some events are common to many controls and some events are unique to specific controls. Some events are automatically configured. For other and most events, you must write code and you must indicate what to do when the event is fired.
The action of an event is usually written in two parts. First, in the script section, write the code that indicates what to do when the event is fired. Usually, the name of the function reflects an action. Second, in the start tag of the control, you must use an attribute that holds the name of the event. We will mention those names in later sections. The value of the event attribute is the name of the function in the script section. The name value usually has parentheses to indicate that it is a function.
|
Clicking |
Clicking occurs when the user clicks a control. Of course, the most common object that a visitor would click is a button, but many other controls support clicking.
The attribute for the click event is named onClick.
|
Fundamentals of Forms |
|
Introduction |
To support forms, HTML provides an element created with the <form> tag. Because a form is a collection of controls and their values, the form must have an end tag that lets the browser know where the form closes. This is done with the </form> closing tag. Here is an example:
<form></form>
Between the start and the end tags, you can put anything you want. In fact, you can include all types of HTML elements, whether they deal with forms or not. Here is an example:
<html> <head> <title>Geometry: Polygons</title> <head> <body> <form> <h3>Geometry: Polygons</h3> <p>A polygon is a geometric plane figure made of straight lines also called segments. Polygons categorized based on their number of sides. Examples of categories of polygons are:</p> <ul> <li>Triangle: A geometric figure made of three sides <li>Quadrilateral: A geometric figure made of four sides <li>Others: This is for polygons made of five or more sides </ul> </form> </body> </html>
The part between the <form> and the </form> tags belong to the form and is referred to as the body of the form.
|
The Name of a Form |
Although the <form> and the </form> tags are enough to create a form, such a form can hardly communicate with a script. One of the most important properties you should set for a form is its name. The name allows a script to refer to the form and it can be used by files on the web server. To set the name of a form, assign an appropriate string the name attribute of the <form> tag.
|
Performing an Action |
After using a form, the visitor can click a control such as a button. This usually causes the values on the form to be sent to the web server. In most cases, the form must be linked to another webpage or a file that will use the values from the form. The function will depend on what you want to do. To let you specify where to send the values, the form is equipped with an attribute named action. Usually, the value of this attribute is the name of a file, including its extension. The value can also be the address of the file that will process the values of the form.
|
The Text Box |
|
Introduction |
A text box is a rectangular object that receives or displays text. By default, a text box is intended for the user to type text in response to a request. To create a text box, use the <input> tag. For a text box, specify the type attribute as text. Here is an example:
<input type=”text”>
|
Characteristics of a Text Box |
By default, the text box control provides enough space to display simple information such as a first name, a username, or a short e-mail address. If it is not enough, you can widen the text box. To increase the width of a text box, the <input> tag is equipped with an attribute named size. Therefore, to widen a text box, assign an appropriate numeric value to the size attribute. Here is an example:
<html>
<head>
<title>Quadrilaterals: The Square</title>
<head>
<body>
<form>
<h4>Quadrilaterals: The Square</h4>
<table>
<tr>
<td>Side:</td>
<td><input type="text" id="side" name="txtSide" size="6"></td>
</tr>
</table>
</form>
</body>
</html>
This would produce:
In the same way, you can create as many text boxes as you want in a form. The value that is entered in a text box or that a text box displays is represented by the value attribute. Based on this, to display text in the text box, assign a string to the value attribute. Here is an example:
<html>
<head>
<title>Quadrilaterals: The Square</title>
<head>
<body>
<form>
<h4>Quadrilaterals: The Square</h4>
<table>
<tr>
<td>Side:</td>
<td><input type="text" id="side" name="txtSide" size="6" value="0.00"></td>
</tr>
<tr>
<td>Area:</td>
<td><input type="text" id="area" name="txtArea" size="6" value="0.00"></td>
</tr>
</table>
</form>
</body>
</html>
On the other hand, in your scripting code, to retrieve the content of a text box, you can use the value attribute.
To refer to a text box control from a script, type the document keyword, followed by a period, followed by the name of the form that hosts the control, followed by a period, followed by the name of the text box control. Suppose you create a form named CreditApplication that hosts a text box called txtFirstName. Here is how you can access the txtFirstName control of the CreditApplication form:
document.CreditApplication.txtFirstName
This would then allow you to access a property of the text box using the period operator. For example, to access the content of a text box, call the value property. Here is an example:
document.CreditApplication.txtFirstName.value
|
Text Box Events |
There are many events associated with a text box control. When the user clicks inside of the text box, the control fires the onClick event. When the user starts typing and as long as the user is typing in the text box, the control fires an event named onKeyDown. When the text in the text box changes, such as while the user is typing, the control fires an event named onChange. You can use any of these events to take appropriate actions.
|
The Command Button |
|
Introduction |
A button is a rectangular object that the user can click. What happens when the user clicks depends on you. To create a button, you have many options. You can create an element using the input tag. To specify that you want to create a button, set the type value as button. Here is an example:
<input type="button">
An alternative to create an element using a tag named button.
|
Characteristics of a Button |
The text that a button displays lets the user know what the button is used for. The text on the button is sometimes called a caption. If you decide to create your button using the input element, to let you specify the caption of a button, its tag is equipped with an attribute named value, which takes a string as value. Here is an example:
<html>
<head>
<title>Exercise</title>
<head>
<body>
<form id="exercise">
<h3>Exercise</h3>
<input type="button" name="btnCreate" value="Create"></input>
</form>
</body>
</html>
If you decide to create your button using the button element, then you must specify the caption between the start and the end tags. Here is an example:
<html>
<head>
<title>Exercise</title>
<head>
<body>
<form id="exercise">
<h3>Exercise</h3>
<button name="btnCreate">Create</button>
</form>
</body>
</html>
|
Button Events |
The most common event of a button occurs when it is clicked. When the button is clicks, it fires the onClick() event. To process a script when the user clicks a button, you can assign the name of a function, as a string, to the onclick attribute of the button. Here is an example:
<html>
<head>
<title>Quadrilaterals: The Square</title>
<script type="text/javascript">
function calculate()
{
document.frmSquare.txtArea.value = document.frmSquare.txtSide.value * 4;
}
</script>
<head>
<body>
<form name="frmSquare">
<h4>Quadrilaterals: The Square</h4>
<table style="width:200px;">
<tr>
<td>Side:</td>
<td><input type="text" name="txtSide" size="6" value="0.00"></td>
<td><input type="button" name="btnCalculate" value="Calculate" onClick="calculate()"></td>
</tr>
<tr>
<td>Area:</td>
<td><input type="text" id="area" name="txtArea" size="6" value="0.00"></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Here is an example of using the form:
|
The Submit Button |
|
Introduction |
To send all of the information of a form to a script, HTML provides a special button named submit. Like the regular button, the submit button is a rectangular object that the user clicks to send the result of a form.
To create a submit button, use the <input> tag but specify the type of control as submit to the type attribute. Here is an example:
<html> <head> <title>Exercise</title> <head> <body> <form id="exercise"> <h3>Exercise</h3> <input type="submit"></input> </form> </body> </html>
Unlike the regular button, the submit button has a built-in caption that automatically displays its role to the user.
|
Characteristics of the Submit Button |
After using a button, a webpage visitor is usually asked to click a button. The submit button makes it more convenient. In the presence of a submit button, after using the form, the user can press Enter (or click the button) and the form would be submitted.
The default caption of the submit button is Submit Query. If this caption doesn't apply to your scenario, you can change it to a more meaningful caption. To change the caption of the submit button, set the desired string to the value attribute of the input type. Here is an example:
<html> <head> <title>Exercise</title> <head> <body> <form id="exercise"> <h3>Exercise</h3> <input type="submit" value="Apply"></input> </form> </body> </html>
|
The Reset Button |
|
Introduction |
Most of the forms allow the user to fill out text controls and make selections from other controls. These actions change the values of the controls as set by the application developer. If in the middle of filling out a form the user decides to start over, HTML provides a special button that can reset all controls to their default states or values. This is programmatically done using a special button called reset.
To create a reset button, use the <input> tag and specify the type of control as reset to the type attribute. Here is an example:
<html>
<head>
<title>Quadrilaterals: The Square</title>
<script type="text/javascript">
function calculate()
{
document.frmSquare.txtArea.value = document.frmSquare.txtSide.value * 4;
}
</script>
<style>
.btn {
width: 60pt;
}
</style>
<head>
<body>
<form name="frmSquare">
<h4>Quadrilaterals: The Square</h4>
<table style="width:200px;">
<tr>
<td>Side:</td>
<td><input type="text" name="txtSide" size="6" value="0.00"></td>
<td><input type="button" name="btnCalculate" value="Calculate" onClick="calculate()" class="btn"></td>
</tr>
<tr>
<td>Area:</td>
<td><input type="text" id="area" name="txtArea" size="6" value="0.00"></td>
<td><input type="reset" class="btn"></td>
</tr>
</table>
</form>
</body>
</html>
Unlike the regular button, the reset button has a built-in caption that automatically displays its role to the user.
|
Reset Button Properties |
The default caption of the reset button is Reset. Here is an example:
If this caption is not explicit enough for your application, you can change it. To change the caption of a reset button, assign the desired string to the value attribute. Here is an example:
<input type="reset" value="Start Over">
The reset button is mainly configured to handle its business on the form and doesn't need to send any signal such as a result to a script. Therefore, its name is not as important as it is to other controls. If for some reason you need to refer to the Reset button from a script, then you can give it a name.
|
Reset Button Events |
The only interesting role of a reset button occurs when the user clicks it. The role of the Reset is already configured in the browser. If you still need to take some action when the user clicks it, you can use the onClick event that fires when the user clicks the button.
|
A Label |
|
Introduction |
In a web form filled with controls, to indicate what a control is used for, you can add text close to it, usually to the top or the left of the control. So far, we used simple text to do it. A label is static text that displays information to the reader. To support labels, HTML provides a control of the same name. Based on this, to create a label, create an element that uses a tag named label. The start tag must be close. Here is an example:
<html>
<head>
<title>Exercise</title>
<head>
<body>
<form name="frmExercise">
<label></label>
</form>
</body>
</html>
In the same way, you can create as many labels as you want on a form.
|
Characteristics of a Label |
As opposed to simple text that displays on a webpage, a label plays a role other than simply displaying text. The most important characteristics of a label is that it gives access to a web control using the keyboard. For this referred, it has a feature referred to as access key. An access key is a letter, a symbol, or a digit whose key the user can press to give focus to the control. To support access keys, the label element has an attribute named accesskey. Its value must be a letter, a digit, or a symbol. Here is an example:
<html>
<head>
<title>Quadrilaterals: The Square</title>
<head>
<body>
<form name="frmSquare">
<h4>Quadrilaterals: The Square</h4>
<label accesskey="s">Side</label>
</form>
</body>
</html>
To use the access key, the user would press Alt and the access key. The actual role of a label is to give access to a control. This means that you must indicate the control to which the label leads. To support this, the label element has an attribute named for. The value of that attribute must be the identification of the control. Here are examples:
<html>
<head>
<title>Quadrilaterals: The Rectangle</title>
<script type="text/javascript">
function calculate()
{
document.frmRectangle.txtArea.value = document.frmRectangle.txtWidth.value * document.frmRectangle.txtHeight.value;
}
</script>
<style>
.btn {
width: 60pt;
}
</style>
<head>
<body>
<form name="frmRectangle">
<h4>Quadrilaterals: The Rectangle</h4>
<table style="width:200px;">
<tr>
<td><label accesskey="w" for="width">Width:</label></td>
<td><input type="text" id="width" name="txtWidth" size="10" value="0.00"></td>
<td></td>
</tr>
<tr>
<td><label accesskey="h" for="height">Height:</label></td>
<td><input type="text" id="height" name="txtHeight" size="10" value="0.00"></td>
<td><input type="button" name="btnCalculate" value="Calculate" onClick="calculate()" class="btn"></td>
</tr>
<tr>
<td>Area:</td>
<td><input type="text" id="area" name="txtArea" size="10" value="0.00"></td>
<td><input type="reset" class="btn"></td>
</tr>
</table>
</form>
</body>
</html>
In this case, to access the Width text box, the visitor can press Alt + W. To access the Height text box, the visitor can press Alt + H.
|
Text-Based Controls: A Text Area |
A text area is a large control that is a substitute to handle large paragraph where the text box cannot or should not be used.
|
Creating a TextArea Control |
To create a text area, use the <TextArea> tag which must also
be closed. Here is an example:
| <textarea></textarea> |
|
TextArea Properties |
The dimensions of a text area are the main properties that set it apart
from the text box control. The width of a text area is set using the COLS
attribute of the <textarea> tag. Therefore, to increase the width of
the text area, assign the desired numeric value to the cols
attribute. The width is measured by the number of characters that can
be displayed on one line of text. By default, a width of a text area is
set to 20 characters. To change this, you can assign a higher value to the
attribute:
| <textarea cols="40"></textarea> |
The height of a text area is measured by the number of visible lines of text that the text area can display. By default, the text area is configured to display two lines of text. This property is controlled by the ROWS attribute. To change or increase this number, assign an appropriate numeric value to the rows attribute. You can specify either one of the COLS or the ROWS values. You can also specify both to control the dimensions of the text area. When using both attributes, there is no order of the attributes. Here is an example:
| <textarea cols="40" rows="10"></textarea> |
If you are planning to access the text area from your
code, you should give the control a name.
|
Practical Learning: Using a Text Area Control |
|
|
Text-Based Controls: Password Text Boxes |
HTML provides a specific text designed for a form's password. This looks like a classic text box and is created the same. The main difference is that the text that the user types doesn't display the characters that are being entered. As the user types in the password text box, text appears as a series of asterisks or periods.
|
Creating a Password Text Box |
Like the regular text box and many other controls, to create a password
text box, use the <input> tag and specify the control type as
password assigned to the type attribute.
Here is an example:
<input type="password">
|
Password Text Box Properties |
The size of the password text box is controlled by the size attribute of the <input> tag. To increase the width of the control, assign the desired numeric value to the size attribute. Here is an example that creates a text box control:
<input type="password" size="25">
The text that is typed in the password text box is held by the value attribute. You can use this attribute to find out what password the user typed.
If you plan to retrieve the password value in a script or code of any kind, give the control a name. This is done by assigning a name string to the name attribute. Here is an example:
<input type="password" name="Guarded">
|
Creating a Text Box |
|
Selection ControlsIntroduction |
Most of the controls (which excluded just a few of them) are created using a special tag called input. To use the <input> tag, you must let the browser know what type of input control or object you want to create. The <input> tag uses an attribute called Type that allows you to specify the kind of control you want. This is done by assigning the name of the control to the Type attribute. Some browsers, including Internet Explorer, can recognize all of the HTML GUI controls that we will be using here. Therefore, you can just assign the name of the control to the Type attribute. In some circumstances, and based on HTML standards, you should assign the control type as a string.
Like the <br>, some <p>, and some
<li>
tags, the <input> tag doesn’t need to be closed.
|
Selection Controls: Check Boxes |
A check box is a small square box that allows the user to select an item or to deselect it. The user makes this decision by clicking in the small square box. By default, or depending on how the control is configured, the square box is white and empty. This indicates that it is false or off. When the user clicks it, a small check mark appears in the square box, indicating that it is true or on.
|
Creating a Check Box |
To create a check box, use the <input> tag and specify the
control type as checkbox, CheckBox, or CHECKBOX. Here is an example:
| <input type="checkbox"> |
A check box doesn't display what it is used for. Therefore, you should (always) add a label close to it to help the user know the role of this control.
If using many check boxes in a group, the user is able to click or select as many different check boxes that the application designer allowed.
|
Check Box Properties |
As described already, when the user clicks the check box, its value becomes on or true. You can programmatically set this state by using the checked attribute of this tag. If you assign it a true value, the check box becomes checked. Otherwise, it would be unchecked. Here is an example of using the tag:
<input type="checkbox" checked="true">
If you plan to use a check box in a script, you should give it a name. This is done by assigning a string to the Name attribute.
|
Check Box Events |
The most popular and probably the most important event of a check box fires when the user clicks the check box, selecting or deselecting it. Therefore, you can use the OnClick event of the check box to find out whether the control has been selected or not; if so, you can decide what to do in response.
|
Selection Controls: Radio Buttons |
A radio button is a small round and white circle that allows the user to
select an item from a group. This is because a radio button is generally
accompanied by others. From a group of items, represented each by a
circle, when the user clicks one of them, none of the others is
selected. To change the selection, the user must click another choice in
the group.
|
Creating Radio Buttons |
To create a radio button, use the <input> tag and specify the type attribute as radio. Here is an example:
| <input type="radio"> |
To make your radio buttons effective, you should always provide at least two radio buttons in a group.
|
Radio Button Properties |
One of the most important attributes to set on the radio button is the name. This attribute should be used even if you don't plane to use the radio button in a script, since many radio buttons can use the same name, this name will be helpful in determining what particular control has been selected. Therefore, the same value (string) for the Name attribute can be assigned to each radio button of the same group.
The checked attribute, as applied to the check box, can be used in two circumstances, if you want one of the buttons in the group to be selected by default, assign a true value to its checked attribute. Here is an example:
|
<table border="0"
width="176"> <tr> <td width="168" colspan="2">Select your T-Shirt size</td> </tr> <tr> <td width="119">Small </td> <td width="49"><input type="radio"></td> </tr> <tr> <td width="119">Medium</td> <td width="49"><input type="radio" checked="true"></td> </tr> <tr> <td width="119">Large</td> <td width="49"><input type="radio"></td> </tr> <tr> <td width="119">X-Large</td> <td width="49"><input type="radio"></td> </tr> </table> |
||||||||||
You can also use the checked attribute in your script to find out what radio button was clicked at one time.
|
Radio Button Events |
Because it is first of all a button, the most fundamental event that a
radio button can send to the browser is called OnClick. This event fires when
the user clicks or select a particular radio button. You can therefore use
it to take action as a response.
|
Selection Controls: Combo Boxes |
|
|
|
Creating a Combo Box |
To create a combo box, use a tag called select. This tag has to be closed.
After typing the <select> tag, create each item that is part of the
control using the <option> tag. Each item uses its own
<option> tag. After listing the items, make sure you close the select tag as
</select>.
Here is an example:
| <select> <option>Small <option>Medium <option>Large <option>X-Large </select> |
|
Combo Box properties |
To select a default item from the combo box, use the selected
attribute of the <options> tag. Here is an example:
| <select> <option>Small <option selected="true">Medium <option>Large <option>X-Large </select> |
|
Selection Controls: List Boxes |
|
|
|
Creating a List Box |
Like a combo box, a list box is created using the <select> tag. Like
the combo box, each item of a list box is created using the <option>
tag. To make the control a list box, the <select> tag is equipped with an
attribute called size. This attribute accomplishes two purposes: it makes
the control become a list box and it sets the vertical size of the list
box. In other words, it decides on the number of items the list box can display at
a time.
Here is an example:
| <select size="4"> <option>Schwartz <option>Medou <option>Larson <option>Creans <option>Schultze <option>Greenberg </select> |
|
|
List Box properties |
A list box can be configured to allow the user to select one item. To
select an item from the list, set the selected attribute of its
<option> tag to true.
Here is an example:
| <select size="4"> <option>Schwartz <option selected="true">Medou <option>Larson <option>Creans <option>Schultze <option>Greenberg </select> |
|
Unlike a combo box, a list box can be configured to allow
the user to select more than one item from the list. To allow this,
include the multiple attribute in the <select> tag. Here is an example:
| <select size="4" multiple> <option>Schwartz <option>Medou <option>Larson <option>Creans <option>Schultze <option>Greenberg </select> |
|
 |
Just including the multiple attribute in the <select> tag, even if you omit the size attribute, causes the control to be a list box |
|
List Box Events |
The most commonly used and the most important event of a list is called OnChange. This event fires whenever
the user makes a selection in the list box. This allows you to take appropriate actions.
To support forms,
Different
There
|
|
Creating Graphics From a Font |
One of the ways you can create small graphics or icons is by using a graphic font.
|
|
Designing or Painting |
As seen so far, you can use different applications to manipulate or design pictures for your webpages. In the following exercise, we will use a presentation application and a graphics application.
|
<html> <head> <title>Watts A Loan: About Us</title> <head> <body background="images/bg.png"> <!-- This is unprofessional --> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <!-- This ain't no professional --> <h1>Watts A Loan</h1> <p>Welcome to Watts A Loan. We provide personal and business loans as long as various financial services. We are your one-stop shop for all types of financial needs.</p> <p>Our customers include:</p> <p>Individuals: Personal Loan, Boat Buyout, Vehicle Financing, Musical Instruments Purchase, etc.</p> <p>Businesses: Business Startup, Business improvement, Late Payroll, etc.</p> <p>Organizations: Non-Government Organizations, Not-For-Profit Organization, Limited Liability Needs, etc.</p> </body> </html>
|
The Files of a Website |
|
Introduction |
One
|
Introduction to Creating Files |
You
To
The
|
|
Introduction |
A
Practical
Learning: Editing a Picture