Create Specialized Text Boxes for Your Web Pages with ASP.NET

Web forms often have text boxes to allow user input. These tend to be of three types: Single line (the default), MultiLine, and Password boxes. Often these text boxes are plain, but in ASP.NET it is easy to dress them up a bit by making some changes to their properties using the Visual Web Developer that comes along with ASP.NET as in the examples below.

Set Up a Web Form on a New Web Site

To see how this works, create a new website on your computer using the Developer and then add an ASP.NET page by right-clicking on the Website and choosing “Add new item.” Select “Web Form” from the list of templates and name the new form “FancyTextbox.aspx.” Switch to the Design view if it isn’t already showing. Type “Comments” on the page, then drag a text box control from the Toolbox on the left side panel on to the page. Select the new text box using your cursor so that the properties show in the Properties view on the bottom right of the screen. Now set the textbox ID to Comments. Locate the TextMode property and change this from Single to Multiline. Set the number of lines and columns through the “Columns” and “Rows” property. You can accomplish the same thing in the Design view by dragging the resize icons on the text box to the desired size.

Password Text Boxes

Whenever you need a user to create or input a password, this requires a special kind of text box. Type “Username” on the page and then create a one line text box using the TextBox control and set the ID property to “Username.” Type this text below the Username box: “Password:” Then drag a second TextBox control over next to the Password label. Set the TextMode property to “Password.” Finally, use the “Button” control from the Toolbox to place a button below these text boxes. Label the ID “LoginButton” and the Text property “Login.” When the user types a password, the letters will be replaced with dots.

Dress Up the Text Box

The Text Box control has a number of properties that can enhance the appearance of the object. They are: Backcolor, BorderColor, BorderStyle, BorderWidth, Font, and ForeColor. The included image shows all of these in action. The text is expanded to be clearer. Here are the ways these properties were set to produce the illustrated result:

1. Comments text box:

• BackColor: Green
• BorderColor: Black
• BorderStyle: Double
• BorderWidth: 10px

2. Username text box:

Font subproperties

• Bold (change from False to True)
• Name: (change to something unusual, like Lucida Calligraphy)
• Size: Large

Box properties

• ForeColor: Teal
• BorderColor: Red
• BackColor: YellowBorderWidth: 5px

When these are viewed on a browser, The Comments box will have black type (the default), in a green text box with a double black border. The Username box will display what the user types in large, bold letters in a different font. The color of the font will be green, with a red background and a green border.

Control User Input

Typically a Web designer will want to control how much text a user can put into text boxes. This can be done with a single line text box using the MaxLength property. For example, if one box was intended to gather the user’s age, there would be no point in allowed more than three characters for this box. You cannot ban all characters by entering a “0” though. Instead, this removes all restrictions on the maximum wordage. This property does not work with a multiline text box nor do the number of lines and column control how many characters the user can type, even though they might not all be visible. To accomplish the same restriction in multiline boxes requires using a special “RegularExpressionValidator” control which does have settings for maximum and minimum characters.

While a designer might not make use of all these properties all the time, there could be occasions when, to fit in better with the rest of the page, the enhancements described above could come in handy.