HTML Tutorial - Text-Based Controls

Text-Based Controls

Introduction

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 type to the type flag. Some browsers, including Internet Explorer, can recognize all of the HTML GUI controls that we will be used 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.

Text-Based Controls: Labels

In the world of graphical user interface (GUI) programming, a label is a static text that displays information to the reader. In GUI environments, there are two main types of labels. The first category is made of stand-alone text that the user reads and performs an action based on such text. Although heavily used in programming of all kinds, a label is not a window control. It is a static piece of text that the user cannot modify.

When programming Windows controls, a label is small piece of text that is positioned on top of, or on the left side of another control. The label is used to indicate to the user what the other control is used for; this is because most of the other controls do not obviously explain their presence.

In HTML, there is no explicit to add a label. It is simply text you create with any tag of your choice or that you include in a cell of a table:

First Name:
Last Name:

Text-Based Controls: Text Boxes

A text box is a rectangular box that receives or displays text. By default, a text box is intended for the user to type text in response to a request.

Creating a Text Box

To create a text box, use the <input> tag. For a text box, specify the Type attribute as Text.

The minimum syntax for creating a text box is:

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:

By default, the text box control provide 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:

The 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:

When writing code, we will find out that, to retrieve the content of a text box, you can use the Value attribute.

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 name string to the Name attribute. Here is an example:

Text Box Properties

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:

The text 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:

When writing code, we will find out that, to retrieve the content of a text box, you can use the Value attribute.

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 name string to the Name attribute. Here is an example:

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, an event called OnClick is sent to the browser. When the user starts typing and as long as the user is typing in the text box, an event called OnKeyDown is sent to the browser. When the text in the text box changes, such as while the user is typing, the OnChange event is sent.

You can use any of these events to take appropriate actions.

Practical Learning: Using Text Boxes

Start your text editor.

To create some text boxes, in the empty file, type the following:

Save the file as credit.htm in a folder or directory called htmtutorial
Preview the file in your browser and return to your text editor.

To add labels that indicate the purpose of each text box, change the file as follows:

First Name: <input type="text" name="txtFirstName" size="14">
Last Name: <input type="text" name="txtLastName" size="14">
Full Name: <input type="text" name="txtFullName" size="30">

Save the file and preview it in the browser
After previewing the page, return to Notepad.

To make the page more professional, we will use a table. Therefore, change the file as follows:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="100">First Name:</td>
    <td><input type="text" name="txtFirstName" size="14"></td>
</tr>
<tr>
    <td width="100">Last Name:</td>
    <td><input type="text" name="txtLastName" size="14"></td>
</tr>
<tr>
    <td width="100">Full Name:</td>
    <td><input type="text" name="txtFullName" size="30"></td>
</tr>
</table>

Save the file and preview it in the browser
After previewing the page, return to Notepad.

To formally create the form, change the file as follows:

<html>
<head>
<title>JavaScript Tutorial</title>
<Script Language="JavaScript">
function GetFullName()
{
var FirstName, LastName, FullName;

// Retrieve the first and the last names from the form's text boxes
FirstName = document.CreditApplication.txtFirstName.value;
LastName = document.CreditApplication.txtLastName.value;

// Add the first and the last names to create a full name
FullName = FirstName + " " + LastName;

// Ask the form to display the result i.e. the full name
// in the Full Name text box
document.CreditApplication.txtFullName.value = FullName;
}
</Script>
</head>
<body>

<h2 font face="Georgia, Garamond, Times New Roman" color="#FF0000">
Credit Application</h2>

<font face="Verdana, Tahoma, Arial" size="3">
<form name="CreditApplication">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100">First Name:</td>
      <td><input type="text" name="txtFirstName" size="14"></td>
    </tr>
    <tr>
      <td width="100">Last Name:</td>
      <td><input type="text" name="txtLastName" size="14"></td>
    </tr>
    <tr>
      <td width="100">Full Name:</td>
      <td><input type="text" name="txtFullName" size="30"></td>
    </tr>
    <tr>
      <td width="100"><br><br></td>
      <td>
        <input type="button" value="Show Full Name" onClick="GetFullName()">
      </td>
    </tr>
</table>
</form>
</font>

</body>
</html>

Save the file and preview it in the browser:
After previewing the page, return to Notepad.

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 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:

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:

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

To add a text area, change the form section of the page as follows:

<form name="CreditApplication">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100">First Name:</td>
      <td><input type="text" name="txtFirstName" size="14"></td>
    </tr>
    <tr>
      <td width="100">Last Name:</td>
      <td><input type="text" name="txtLastName" size="14"></td>
    </tr>
    <tr>
      <td width="100">Full Name:</td>
      <td><input type="text" name="txtFullName" size="30"></td>
    </tr>
    <tr>
      <td width="100" valign="top">Reasons for Applying:</td>
      <td><textarea cols="40" rows="10"></textarea>
    <tr>
      <td width="100"><br><br></td>
      <td>
        <input type="button" value="Show Full Name" onClick="GetFullName()">
      </td>
    </tr>
</table>
</form>

Save the file and preview it in the browser
After previewing the page, return to Notepad.

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:

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">


Previous	Copyright © 2002-2007 FunctionX, Inc.	Next