11.3: Textbox Controls

Last updated
Save as PDF

Page ID: 93846

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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.

<input type="text | password | email (HTML 5)|url (HTML 5) "
  id="id"
  name="name"
  size="n"
  maxlength="n"
  value="text"
  disabled="disabled"
  readonly="readonly"
  accesskey="keyboard character"
  tabindex="numeric value"
  required="required (HTML 5)"
  placeholder="text (HTML 5)"
  autocomplete="on|off (HTML 5)"
  autofocus="autofocus (HTML 5)"
>

Figure \(\PageIndex{1}\): 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:

Name:
Password:

Figure \(\PageIndex{2}\): 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>

Figure \(\PageIndex{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.

City:
State:
Zip:

Figure \(\PageIndex{4}\): 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>

Figure \(\PageIndex{5}\): 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>

Figure \(\PageIndex{6}\): 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 \(\PageIndex{7}\): Pre-filling a textbox control.

Name: <input type="text" id="FullName" size="30" value="Enter your full name here"/>

Figure \(\PageIndex{8}\): 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">

Figure \(\PageIndex{9}\): Code to provide access key.

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 \(\PageIndex{10}\):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 &quot;quotation&quot; appearing in the textbox."/>

Figure \(\PageIndex{11}\): 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 \(\PageIndex{12}\): 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">

Figure \(\PageIndex{13}\): 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.

Form Control	Display	Code
Telephone - accepts a telephone number		<input type="tel">
Search - accepts a search term		<input type="search">
Datalist - specifies a list of pre-defined options for a text box		<input list="colors"> <datalist id="colors"> <option value="red"> <option value="green"> <option value="blue"> </datalist>
Range(Slider) - provides a visual interface that accepts a numeric value. The default range is 1 to 100	LowHigh	<input type="range" min="1" max="10">
Number (Spinner) - displays an interface that accepts numerical data and rovides feedback to users		<input type="number" min="1" max="10">
Calendar (date)- accepts date information		<input type="date">
Color picker - accepts color value		<input type="color">