Textbox Input Controls
Text input controls require the user to enter information by typing into an input area.
Text boxes can be chosen for single-line or multiple-line scrolling input.
The <input> Tag
The most commonly encountered type of form control is the textbox. This control
presents a standard text entry box into which information is typed. A text input field
is created using an <input> tag in the following format.
Figure 10-4. General format for <input type="text|password"> tag.
The type Attribute
The <input> tag includes a type attribute to define this as
a text entry field. Many different types of text input controls are available.
type="text"
If type="text", or if no type attribute is specfied, the field type is a standard textbox for
entering information.
type="password"
If type="password", a similar control is created but with typed characters echoed as bullet
characters to disguise the entered information.
type="email" (HTML 5)
The input type="email" specifies a text box that accepts information that must be in e-mail
format, such as "admin@itwebtutorials.net". Only browsers that support the HTML 5 email
attribute will verify the format of the information. Older browsers will treat this as
a standard text box control.
type="url" (HTML 5)
The type="url" is intended to accept any valid URL value, such as "http://itwebtutorials.net".
Only browsers that support the HTML 5 url attribute will verify the format of the information.
Older browsers will treat this as a standard text box control.
The control types are shown below along with the coding to produce them. The controls appear
in a borderless table in order to align them and their prompt labels. Enter any text into
the fields to view their appearance.
Please enter the following information:
Figure 10-5. Varieties of <input type="text|password"/> tag. tag.
<form action="ThisPage.htm">
<p>Please enter the following information:</p>
<table>
<tr>
<td>Name: </td>
<td><input id="TheName" type="text"></td>
</tr>
<tr>
<td>Password: </td>
<td><input id="ThePassword" type="password"></td>
</tr>
</table>
</form>
Listing 10-3. Code to display varieties of <input type="text|password"> tag.
The id Attribute
You will nearly always need to identify your text fields, as you will any other form control.
Providing an id is important because it provides identification for the
data value entered into the field by the user. Both browser or client-side scripts written
to process this information does so through the control id. Controls that are assigned an
id value can also be styled using a CSS id selector.
The name Attribute
The name attribute provides another way to identify a form control.
While client-side scripts process control information using the id, server-side scripts
typically use the name attribute value to interact with the control. In most cases, the
id and name value assigned to a form control can be the same.
The size Attribute
Unless you specify a size for a textbox, it is displayed at its default
size, which is large enough for approximately 20 typed characters. In most cases you will
want to specify a size that is suggestive of the number of characters expected to be entered.
For example, the three textboxes below are sized at 15 (City), 2 (State), and 10 (Zip code)
characters, respectively. Instead of using the size attribute you can specify a field size
using the style sheet width property.
Figure 10-6. Setting display sizes for textbox controls.
<form action="ThisPage.htm">
<table>
<tr>
<td>City: </td>
<td><input type="text" id="City"></td>size="15"></td>
</tr>
<tr>
<td>State: </td>
<td><input type="text" id="State" size="2"></td>
</tr>
<tr>
<td>Zip: </td>
<td><input type="text" id="Zip" size="10"></td>
</tr>
</table>
</form>
Listing 10-4. Code to set display sizes for textbox controls.
The maxlength Attribute
A textbox can hold up to 256 characters, irrespective of its display size. When typing reaches the
right boundary of the field, the text scrolls to permit additional characters to be typed. As a
general rule, you should not permit the user to enter more than the maximum number of expected
characters. When capturing data for server processing, this maximum is often given by the field
sizes in the database that stores the values.
You can set a maximum number of allowable characters by coding the maxlength
attribute. When this value is coded, the user is not be able to type more than the specified
number of characters into the field.
<form action="ThisPage.htm">
<table>
<tr>
<td>City: </td>
<td><input type="text" id="City" size="15" <maxlength="15"></td>
</tr>
<tr>
<td>State: </td>
<td><input type="text" id="State" size="2" maxlength="2"></td>
</tr>
<tr>
<td>Zip: </td>
<td><input type="text" id="Zip" size="10" maxlength="10"></td>
</tr>
</table>
</form>
Listing 10-5. Code to set maximum characters entered into textbox controls.
The value Attribute
A textbox can include the value attribute to pre-enter text in the field. You can
provide a default value for the field, or give suggestions about the content expected.
Name:
Figure 10-7. Pre-filling a textbox control.
Name: <input type="text" id="FullName" size="30" value="Enter your full name here"/>
Listing 10-6. Code to pre-fill a textbox control.
The disabled Attribute
The disabled attribute is used to disable and grays out the control so that
the user can not interact with it. The disabled attribute is often
associated with controls that are assigned default values using the value attribute.
With the disabled attribute, users are not able to change or copy the
default value.
The readonly Attribute
The readonly attribute is similar to the disabled attribute and is used
to prevent the user from changing the value of the control. The readonly
attribute is often associated with controls that are assigned default values using the
value attribute. Unlike controls assigned the disabled
attribute, the contents of a control with the readonly attribute can be
copied.
The accesskey Attribute
The accesskey attribute is used to configure a shortcut key for the form control. This
allows the user to press a key to place focus on the form control.
Name:
Name: <input type="text" id="FullName" size="30" acesskey="n">
The method for accessing the shortcut key various by browser, with most using the [ALT]+
shortcut key. Firefox uses [ALT][SHIFT] + shortcut key.
The tabindex Attribute
The tabindex attribute is used to specify the tab order of the textbox if
the tab key is used to navigate the form controls. If numeric value assigned to the attribute
is 2, the textbox would have focus set when the user presses the tab key twice.
The required Attribute
The required attribute is new to HTML 5. It can be included with the text,
url, email, and password text box controls. When the attribute is set to true,
it specifies that the field must contain a value before submitting the form.
The placeholder Attribute
The placeholder attribute is new to HTML 5. It is used to specify a short
hint that describes the expected value of an input field. The placeholder text is display
in the text box until the user inputs a value.
The autocomplete Attribute
By default the autocomplete attribute is set to true.
The attribute specifies whether or not the browser should predict and display options to
fill in the textbox. Set autocomplete to false to disable the autocomplete
functionality.
The autofocus Attribute
The autofocus attribute specifies if the text box should receive focus
automatically when the page loads.
Using Quotes in Textboxes
When pre-filling a textbox through the value attribute, you cannot code quotation
marks surrounding portions of text. This is because the value attribute itself is
surrounded by quotes, and any quotation marks inside these container quotes disrupts their
pairing. So, for example, the following code is invalid and does not produce a
proper textbox display.
<input id="QuoteText" type="text" size="45"
value="Here is a "quotation" appearing in the textbox."/>
Figure 10-8. Invalid pre-filling of a textbox with quoted content.
You can, however, use the special " character to display quotation marks inside a textbox value attribute.
<input id="QuoteText" type="text" size="45"
value="Here is a "quotation" appearing in the textbox."/>
Figure 10-9. Valid pre-filling of a textbox with quoted content.
No special precautions need to be taken, however, for user text entry. Quoted text can
be entered into a textbox without presenting problems. The same goes for HTML tags. They
can be coded inside a value attribute and also entered by the user without causing problems.
Styling Textboxes
If you wish to change the default appearance of a textbox, you can use style sheet properties
to do so. As an example, the following textbox is decorated with different borders, background
color, and foreground color, and displays a different font face and size from the normal Arial
10-point font.
Name:
Figure 10-10. Styling a textbox control.
<style>
.textbox {width:200px; font-family:comic sans ms; font-size:10pt;
background-color:#F0F0F0; color:#0000FF; border:ridge 5px}
</style>
Name: <input type="text" id="FullName" class="textbox"
maxlength="20" value="Enter your full name here">
Listing 10-7. Code to style a textbox control.
Other HTML 5 Text Controls
HTML 5 introduces an assortment of new form controls that can be used to collect text data.
The display and support of these new controls varies by browser. Browsers that do not support
the new text controls will simply ignore the new elements and display them as a standard text
box. In addition to the HTML 5 text controls introduced above, other new text form controls
include the telephone, search, datalist, range, number, calendar, and color controls.