|
A form is a section of a web page that contains one or
a group of objects that the user interacts with. These objects are
referred to as Windows controls, web controls, or simply controls. When
using a control, the user may enter or select some values and send the
result to a specific file as designed by an application developer. To
support this interaction, HTML provides different text-based
and selection controls that can handle various types of scenarios. Besides these, there are action controls that actually send a
signal to a script.
There are various types of controls you can use and
different ways of creating them. Still, most controls are created using a
non-closing tag called <input>.
|
The Attribute of a Control |
|
To create a control, you may start with the <input>
tag. Inside of the <input> tag, you specify the type of
control you want. We will review attributes available and what they
produce.
We mentioned that a user can interact with a web page using
the controls on it. To do this, the user can click a control, type in it, move
the caret from it to another control, etc. Everyone of these actions creates a
message that must be sent to a program used by the programmer: the
interpreter. The interpreter then analyzes the message and produces a result.
When a message created by a control is sent, it is also said that an event was
fired.
There are various types of events sent by different
controls. We will mention each when necessary.
When you create a web-based application, you decide what
controls are necessary for your application. When you select a control, you must
also know what events that control can send. In most cases, if you don't care
about an event, when it occurs, the computer may ignore the event or produce a
default behavior. If you think that a certain event is important for your
application and that you must take action when that event fires, you should
write code to react appropriately.
A form is the central object that manages the other controls. Although the controls
can send their data to a
script, a form can be used to collect the values typed or selected on the
controls, gather them as if they constituted one control and make these
values available to a validating file on a server.
|
To create a form, you use the <form> tag. Because a form is a
collection of controls and their values, the form must have an end that
lets the browser know where the form closes. This is done with the
</form> closing tag as follows:
|
|
Everything between the <FORM> and the </FORM> tags belong to
the form and is called the body of the form. Almost anything can go in the
body of the form. You can design it using any HTML tag and make it as
attractive as you wish. |
|
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 characteristics 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
server. To set the name of a form, assign an appropriate string to the
Name attribute of the <form> tag.
To refer to a form in a script, type the document
keyword, followed by a period (the period is an operator), followed by the
name of the form. Suppose you create a form called CreditApplication. If
you want to call it from a script, you would use:
document.CreditApplication
|
|
Practical Learning: Introducing Forms
|
|
- Start your text editor and type the following:
<h2>Employment Application</h2>
<form name="frmEmployees">
<table border="0" width="288">
<tr>
<td width="80">First Name:</td>
<td width="194"></td>
</tr>
<tr>
<td width="80">Last Name:</td>
<td width="194"></td>
</tr>
<tr>
<td width="80">Full Name:</td>
<td width="194"></td>
</tr>
</table>
</form>
|
- Save the file as employment.htm in your VBScript Lessons folder
- Preview it in your browser
- Return to your text editor
|
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 and
specify
the Type attribute as Text. The minimum syntax for creating a text box is:
<input type=”text”>
Because HTML is not case sensitive, you can create the
control in all uppercase, all lowercase, or a mix of both. Therefore, the
control can also be created with:
<Input Type=”Text”>
or
<INPUT TYPE=”TEXT”>
|
|
Characteristics of a Text Box |
|
By default, the text box control provides enough space
to display 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 called size.
Therefore, to widen a text control, assign an appropriate numeric value to
the size attribute. Like all HTML attributable tags (such as <body>
or <font>), there is no rule on the order of attributes. Here is an
example that creates a text box control:
<input type="text" size="40">
The value that displays in a text box is held by an
attribute called value. To display text in the text box, assign a string
to the value attribute. Here is an example:
<input type="text" value="James Fame Ndongo">
To retrieve
the content of a text box, you can use the value attribute. To
access it, you can type the name of the form that contains the text box,
followed by a period, followed by the name of the text box, followed by a
period, and followed by value.
If you plan to use a text box in a script or code of
any kind, give the control a name. This is done by assigning a string
to the name attribute. Here is an example:
<input type="text" name="FirstName">
To use a text box, the use can click it or continuously
press Tab until the caret is positioned in the text box. When this happens, the
text box is said to have focus. When a text box receives focus, it fires an onFocus
event.
In most applications, a text box primarily appears empty to
the user who can then enter one or more characters in it. To enter a character
in a text box, the user usually presses a key on the keyboard. When this
happens, the text box fires an onKeyDown event. When the user releases
the key, the control fires an onKeyUp event. In some cases, the user may
press a key and hold it down. This causes the control to fire an onKeyPress
event.
When the user types a character in a text box or modifies
its content such as putting space between two characters or deleting a character
in it, the control fires an onChange event. This event indicates that the
content of the text box is not the same it was when it first displayed to the user.
When the user has finished using a control and either
presses tab or clicks another control, the text box fires an onBlur event
to indicate that it has lost focus.
|
Practical Learning: Using Text Boxes |
|
- To use text boxes, change the file as follows:
<h2>Employment Application</h2>
<form name="frmEmployees">
<table border="0" width="288">
<tr>
<td width="80">First Name:</td>
<td width="194"><input type="text" name="txtFirstName" size="10"
onChange="form.txtFullName.value = form.txtFirstName.value + ' ' +
form.txtLastName.value"></td>
</tr>
<tr>
<td width="80">Last Name:</td>
<td width="194"><input type="text" name="txtLastName" size="10"
onChange="form.txtFullName.value = form.txtFirstName.value + ' ' +
form.txtLastName.value"></td>
</tr>
<tr>
<td width="80">Full Name:</td>
<td width="194"><input type="text" name="txtFullName" size="20"></td>
</tr>
</table>
</form>
|
- Save the file and preview it in your browser
- Type a name in the First Name text box, press Tab, type another name in
the Last Name text box
- Return to your text editor
|
A button is a rectangular window that the user clicks, as indicated by an
application developer. What happens when the user clicks it depends.
To create a button, use the <input> tag and specify the type of
control by assigning the button value to the Type attribute. Here is an
example:
The most visual properties of a button are its location and the text it displays.
There are various ways you can set the location of a button on the page.
Although HTML provides paragraph tags that can position the button, one of
the best options you have is to use a table when designing your form. This
will also be valid for all controls we will learn on this site. |
|
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. In HTML, this caption is the Value attribute of the <input type="button"> existing tag. To provide the button's
caption, set the desired string to Value. Here is an
example:
To know the caption that a button is displaying, you
can access its value attribute. Another important property
of a button is its name. This allows the browser to identify it.
The name is set by assigning an appropriate name to the Name attribute of
the <input> tag. To access a button on a
form, type the name of the form, followed by a period, followed by the
name of the button. |
|
The most important and the most used event on a button results on clicking
it. When the button is clicked, it fires an event called onClick. 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. |
|
Practical Learning: Using Button |
|
- To use a button, change the file as follows:
<h2>Employment Application</h2>
<form name="frmEmployees">
<table border="0" width="320">
<tr>
<td width="80">First Name:</td>
<td><input type="text" name="txtFirstName" size="10"></td>
</tr>
<tr>
<td width="80">Last Name:</td>
<td><input type="text" name="txtLastName" size="10">
<input type="button" value="Evaluate" name="btnEvaluate"
onClick="form.txtFullName.value = form.txtLastName.value + ', ' +
form.txtFirstName.value">
</td>
</tr>
<tr>
<td width="80">Full Name:</td>
<td><input type="text" name="txtFullName" size="24"></td>
</tr>
</table>
</form>
|
- Save the file and preview it in your browser
- Type a name in the First Name text box. Type another name in the Last Name
text box and click Evaluate. Here is an example:
- Return to your text editor
|
To send all of the information of a form to a script, HTML provides a
special button called submit. Like the regular button, the submit
button is a
rectangular object that the user clicks.
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:
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 |
|
|
The default caption of the submit button is submit. If this caption
doesn't apply to your scenario, you can change it to a more meaningful
caption. To change the submit button's
caption, set the desired string to the Value attribute of the <input
type="submit"> existing tag. Here is an
example:
One of the most important properties
of a submit button is its name. Even if you are creating a form for fun,
the browser needs to identify the button among other controls. The name is set by assigning an appropriate name to the
Name attribute of
the <input> tag.
The Submit button on a form is the main button the
user would click the send the form's collected data to a script or another
file. To make this happen, a form is equipped with an attribute called Action. This attribute is assigned an outside function, script, or server
file that would receive the results of the form and take appropriate
actions. To tell the form what to do when the user clicks the Submit
button on a form, assign the desired (or an appropriate) string to the
Action attribute of the <form> tag. In the following example, a form
sends its result to an e-mail address: |
<form action="mailto:custservice@functionx.com">
</form>
|
|
HTML allows you to decide how you want the form to send its data away. The
most two popular options you have are Post and Get.
|
|
The most important and the most used event on a button results on clicking
it. When the button is clicks, it fires the onClick event. |
|
Most of the forms allow the user to fill out text controls and make
selections from other controls. These actions change the values of those
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:
Unlike the regular button, the reset button has a
built-in caption that automatically displays its role to the user. |
|
Characteristics of the Reset Button |
|
|
The default caption of the reset button is Reset. If this caption is not
explicit enough for your application, you can change it. To change the
caption of a reset button, set the desired string to the Value attribute of the
<input
type="reset"> existing tag. Here is an
example:
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. The name is given by assigning an appropriate
string to the
Name attribute of
the <input type="reset"> existing tag. |
|
Practical Learning: Creating a Reset Button |
|
- To use a reset button, change the file as follows:
<h2>Employment Application</h2>
<form name="frmEmployees">
<table border="0" width="300">
<tr>
<td width="80">First Name:</td>
<td><input type="text" name="txtFirstName" size="10"></td>
</tr>
<tr>
<td width="80">Last Name:</td>
<td><input type="text" name="txtLastName" size="10">
<input type="button" value="Evaluate" name="btnEvaluate"
onClick="form.txtFullName.value = form.txtLastName.value + ', ' +
form.txtFirstName.value">
</td>
</tr>
<tr>
<td width="80">Full Name:</td>
<td><input type="text" name="txtFullName" size="24"></td>
</tr>
<tr>
<td width="80"></td>
<td><input type="reset" value="Clear Application" name="btnReset">
</td>
</tr>
</table>
</form>
|
- Save the file and preview it in your browser
- Type a name in the First Name text box. Type another name in the Last Name
text box and click Clear Application.
- Return to your text editor
|
|
