Examining the TextBox Web Control s Properties

Examining the TextBox Web Control's Properties

So far in this hour, we have looked at one property in particularthe TextMode propertywhich is used to specify if the TextBox Web control should be rendered as a standard text box, a multiline text box, or a password text box. In addition to this property, we will examine a number of other TextBox Web control properties for the remainder of this hour.

Specifying the Length of a Text Box

Sometimes you may need to use the TextBox Web control to collect information from users such as their age or the two-letter abbreviation of the state they live in. In such cases, the users' input will be only a few characters long. However, as you can see with the age text box in Figure 10.4, the text box displayed in the web browser is much larger than it has to be for such cases.

Fortunately, you can specify how many columns wide the text box should be by setting the TextBox Web control's Columns property. To demonstrate this property, open the ASP.NET web page TextBoxPractice.aspx. Recall that this is the ASP.NET page we created in the first example in this hour (see Figure 10.4).

Now let's adjust the age TextBox Web control's Columns property so that the text box into which the user enters his age is more appropriately sized. To accomplish this, click the age TextBox Web control so that its properties are loaded in the Properties pane. Then set this TextBox's Columns property to a value of 3.

After you set the Columns property to 3, the text box in the designer will shrink from its default width to a width of three columns. Refer to Figure 10.10 for a screenshot of Visual Web Developer after this property has been set.

Figure 10.10. The age text box is three columns wide.

This shorter text box is more appropriate for this situation than the longer one displayed in Figure 10.4.

By the Way

You can also resize the TextBox by dragging it to a wider width in the Design view. This sets the TextBox's Height and Width properties. As discussed at the end of the "Using Multiline Text Boxes" section, the Height and Width properties specify the absolute size of the resulting text box, whereas the Columns property dictates the number of columns to display, making the size of the rendered text box relative to the text box's font size.

Did you Know?

Be sure to have your TextBox Web controls properly sized for the input you are expecting users to enter. Properly sized text boxes help ensure that users enter the data in the correct format. For example, if you want users to enter a short description about themselves, they will be more apt to enter a shorter description if you provide them with a single-line text box than if you provide them with a multiline text box.

Limiting the Number of Characters a User Can Enter into a Text Box

Adjusting the size of the text box by setting the TextBox Web control's Columns property does not regulate how much text the user can enter. Even if you create a TextBox Web control three columns wide, the user can still enter hundreds of characters of text.

Sometimes, however, you may want to limit the amount of text a user may enter into a particular text box. For example, sites like eBay allow only 80 characters to be entered when providing feedback about another buyer or seller.

Websites typically limit the number of characters that can be entered into a text box for two reasons. First, and most importantly, it is usually easier to format data for display at a later time by limiting the number of characters that can be supplied by the user. For example, the feedback a user enters at eBay about a buyer or a seller can be viewed by other eBay users in a feedback summary page. This summary page is clean and concise because no one user can enter more than 80 characters of feedback at a time. Due to this restriction in feedback input, the feedback summary page can be formatted so that it doesn't contain any lengthy blocks of feedback.

Second, sites like eBay use databases to store the information their users enter. When you're setting up a database, you must specify the maximum number of characters for text fields in advance. Therefore, this feedback limit is in place because of the limit imposed by those who designed eBay's database tables. (We'll be examining how to create and use databases later in this book, starting with Hour 13, "An Introduction to Databases.")

To set a limit to the number of characters that can be entered into a TextBox Web control, set the MaxLength property accordingly. In our TextBoxPractice.aspx example, we may want to limit the age text box to a maximum of three characters (because it would be impossible for a visitor to have an age greater than 999).

To do so, click the age TextBox Web control and set its MaxLength property to 3. Note that this change will not have any visual effect on the designer. After you have made this change, take a moment to view the TextBoxPractice.aspx ASP.NET web page through a browser. Try to type more than three characters into the age text boxyou can't!

By the Way

Although you might think that a MaxLength value of 0 would not permit users to enter information into the text box at all, it means quite the opposite. A MaxLength value of 0 means that there are no restrictions on the amount of information users can enter into the text box.

Watch Out!

Advanced users can circumvent the text box restrictions imposed by the MaxLength property. Therefore, the MaxLength property does not guarantee that a user's supplied value will indeed be less than MaxLength setting. In Hour 12, "Validating User Input with Validation Controls," we will see how to ensure that a user has entered no more than a specified number of characters into a particular text box.

Furthermore, the MaxLength property works only with SingleLine and Password text boxes. If you set your TextBox Web control's TextMode property to MultiLine, the MaxLength property is ignored. There is a workaround for limiting the number of characters that can be entered into a MultiLine text box, but it involves the use of the ASP.NET validation controls. We'll examine how to accomplish this in Hour 12.

Aesthetic PropertiesChanging the Text Box's Font and Color

The Label Web control has a number of aesthetic properties, such as BackColor, ForeColor, Font, and so on. In Hour 8 we examined these various properties and looked at how to specify them and the visual effect they had on the text displayed by the Label Web control.

The TextBox Web control has the exact same aesthetic properties as the Label Web control, which are summarized in Table 10.1.

Table 10.1. The Aesthetic Properties of the TextBox Web Control

Property	Description
BackColor	Specifies the background color of the text box.
BorderColor	Specifies the color of the text box's border.
BorderStyle	Specifies the style of the text box's border.
BorderWidth	Specifies the width of the text box's border.
Font	Specifies the font properties for the text entered by the user into the text box. Recall that the Font property has a number of subproperties, such as Name, Size, Bold, and so on.
ForeColor	Specifies the color of the text entered into the text box by the user.

Let's create a new ASP.NET web page called PrettyTextBox.aspx, in which we'll create a number of TextBox Web controls to determine the effects of various aesthetic properties. After you create the ASP.NET page, add two TextBox Web controls to the designer by dragging and dropping them from the Toolbox.

Now let's set some aesthetic properties for these two TextBox Web controls. Let's first specify a BackColor property for the first TextBox. Recall that when you're selecting a color property, Visual Web Developer provides three tabs: Custom, Web, and System. Click the Web tab and set its BackColor property to Linen. Next, choose the BorderColor property, click the Web tab, and select the color Maroon. Choose the Dashed option from the BorderStyle property and, finally, enter a value of 5px for the BorderWidth property.

For the second TextBox Web control, set the Font property's Bold subproperty to true, the Name subproperty to Comic Sans MS, and the Size subproperty to Large. Then, for the ForeColor property, select the Web tab and choose the color Red.

Figure 10.11 shows Visual Web Developer after these properties have been set. (Some of the color differences may not be noticeable in the figure.)

Figure 10.11. Both TextBox Web controls have had a number of their aesthetic properties set.

Take a moment to view the PrettyTextBox.aspx ASP.NET page through a browser. When viewing the page, type some text into the second text box and note that it is red, large, and in the Comic Sans MS font. Figure 10.12 shows PrettyTextBox.aspx when viewed through Internet Explorer.

Figure 10.12. The PrettyTextBox.aspx ASP.NET page, viewed through an uplevel browser.

Unfortunately, the aesthetic properties of the TextBox Web control are reflected only in uplevel browsers. That means that if you view the PrettyTextBox.aspx ASP.NET page using a downlevel browser, you will be shown two plain text boxes, as shown in Figure 10.13.

Figure 10.13. The PrettyTextBox.aspx ASP.NET web page, viewed via Netscape 4.0.