Search this site...

Creating a text box

To create a text box (also called input box), use the <input> tag and set the type attribute to "text". See table 3 for two examples. In the first example, our HTML code starts the form with the <form> tag. Inside this form tag, we placed an input box by using the <input> tag. The output of this HTML code is shown on the right hand side. In comparison, our second example is more informative as we let the user know what the user is supposed to type inside the input box. We ask the user to enter their first name. If we don't tell the user what we are asking the user to type inside the input box (like in the first example), the user could type nothing or anything! So to avoid that, use a small description for your text boxes.

Table 3 Examples of creating a text box
HTML Code Output
<form>
<input type="text">
</form>
<form>
First Name :
<input type="text" name="Fname">
</form>
First Name :

In the second example, in addition to the type attribute, we used the name attribute. The purpose of this name attribute is to identify the value for this input box to our processing script. Thus the name attribute does not affect the display of the input box but only aids in processing of the form data.

Controlling the size of a text box

By default, text boxes have the same size - 20 characters wide. This default size may not work in all situations. When, for example, the user is suppose to enter the telephone area code into a text box, that text box should be wide enough to enter only the first three digits (for US area codes). In other cases, the default text box size may not be wide enough. So to resolve these issues, you can add the size attribute to your input box, as

Area code : <input type="text" size="3" >

which will result in

Area code :

For an address input box, you may choose to set the size of the text box to 50 with

Address Line 1 : <input type="text" size="50" >

to get

Address Line 1 :

Setting the maximum width for a text box

As you may have noticed earlier, the size attribute only affects the displayed width of a text box but it does not limit the number of characters that could be entered into the text box. So if we are expecting at most three characters for an input, set the size of the of the text box to 3 and the maxlength of the text box to 3 as well. If you don't use the maxlength attribute to limit the number of characters to be put into the text box, any text longer than the designed text box will automatically start to scroll to the left. The following HTMl code

Area code : <input type="text" size="3" maxlength="3" >

prodcues

Area code :

to limit both the size and maxlentgh of the text box to be 3.

Setting a default value for a text box

With value attribute, you can set a default value for your text box. If you set a default value for a text box, when the form is loaded, that default value inside the text box is displayed. But why would you want to use the value attribute to set a default value for a particular text box? Well, the idea is to use a default value when you are certain for some particular input the value is always almost the same. An example could be setting the default value to 57464 for a zip code field, if we know that most visitors who fill out the online form are from that zip code. The following HTML code

Zip code : <input type="text" size="5" maxlength="5" value="57464" >

creates a text box

Zip code :

with a preset value of "57464" for the zip code. A user can always override the default text box value by deleting the default displayed text, if needed.