May 10, 2011, 9:39 p.m.
posted by magedrx
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, 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).
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 for a screenshot of Visual Web Developer after this property has been set.
10. The age text box is three columns wide.
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!
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 Figure.
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 shows Visual Web Developer after these properties have been set. (Some of the color differences may not be noticeable in the figure.)
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 shows PrettyTextBox.aspx when viewed through Internet Explorer.
Figure. 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.
Figure. The PrettyTextBox.aspx ASP.NET web page, viewed via Netscape 4.0.