Creating Multiline and Password Text Boxes
| Take a moment to examine the text boxes in Figure 10.4. Note that these text boxes allow for a single line of text. As you likely know from your Internet surfing experience, text boxes come in other forms. The two variants of the text box are multiline and password. A multiline text box contains more than one row of text. This type of text box is commonly used when the user needs to input a large amount of text. For example, online messageboard sites are discussion websites where web visitors can post questions or comments and reply to other comments. Typically, multiline text boxes are used when the user enters a comment. (See Figure 10.5 for an example of a multiline text box.) Password text boxes are text boxes whose input is masked by asterisks (*). Password text boxes are used to collect sensitive input from the user, such as her password or personal identification number (PIN). The masked input prevents an onlooker from being able to glance over the web user's shoulder to determine the user's password or other sensitive information. (Consult Figure 10.6 to see an example of a password text box.) Figure 10.5. A multiline text box is displayed. Figure 10.6. A password text box masks the text entered by the user. The TextBox Web control contains a TextMode property that specifies how the resulting text box is displayed: as a normal text box, as a multiline text box, or as a password text box. As we have seen, the TextBox Web control displays a normal text box by default. In the next two sections, we will examine how to get the TextBox Web control to render as a multiline text box and then as a password text box. Using Multiline Text BoxesCreating a multiline text box involves the following simple steps:
Let's create an ASP.NET page with a multiline text box. Start by creating a new ASP.NET web page named MultiLineTextBox.aspx. Start by typing the following text into the designer inside the Web form: Share your Thoughts:. The first step in adding a multiline text box is to add the TextBox Web control to the web page. So, drag and drop a TextBox Web control from the Toolbox onto the page after the "Share your Thoughts:" text. Next, we need to set the TextBox Web control's TextMode property. To accomplish this, first click the TextBox Web control so that its properties are loaded in the Properties window. Next, scroll down through the list of properties until you reach the TextMode property.
Clicking on the TextMode property drops down a list of three options: SingleLine, MultiLine, and Password. Select the MultiLine option. When you choose the MultiLine option, the TextBox Web control in the designer will automatically be displayed as a multiline text box. At this point, we can adjust the number of columns and rows in the multiline text box by setting the TextBox Web control's Columns and Rows properties. Go ahead and set these two properties to values of 25 and 5, respectively. The columns and rows displayed by the TextBox Web control in the designer will be updated accordingly. Figure 10.5 shows the Visual Web Developer after these steps have been completed.
In addition to using the Columns and Rows properties to specify the size of the multiline TextBox Web control, you can also resize the TextBox Web control directly by clicking on the TextBox and selecting one of the resize icons on the bottom, right, or bottom-right corner. Resizing a TextBox in this way adjusts the TextBox Web control's Height and Width properties rather than its Columns and Rows properties. The difference between these two methods is that if you set the Height and Width properties, the text box displayed in the user's browser will have the exact size specified by these properties, regardless of the font used within the text box. That is, regardless of whether a small-sized or large-sized font is used, the text box will be the same dimensions. However, if you specify the size through the Columns and Rows properties, the rendered text box's dimensions will depend on the size of the font being used for the text box. That is, there will always be the specified number of columns and rows, so if a large font size is used, the absolute size of the text box will be larger than if a smaller font size is used. Using Password Text BoxesMany Web applications require users to create an account before they can enjoy the services of the site. For example, to check your email at Hotmail.com, you must first sign in by providing your username and password. The password text box is a variant of the standard text box created for hiding the text a user entered. With a password text box, each character entered by the user is displayed as an asterisk in the text box. Figure 10.6 shows a password text box that has had the text "This is a password" typed into it. To create a password text box in an ASP.NET web page, we simply need to add a TextBox Web control and set its TextMode property to Password. Create an ASP.NET page named PasswordTextBox.aspx to try out creating a password text box. Start by typing the text Username: into the page. After this, add a TextBox Web control. On the next line, type in the text Password: and, after this, add another TextBox Web control. Set the second TextBox Web control's TextMode property to Password.
After these two TextBox Web controls, add a Button Web control. Set the Button Web control's Text property to Login. After you perform these steps, your screen should look similar to Figure 10.7. Figure 10.7. The ASP.NET web page has two TextBox Web controls and a Button Web control. Password Text Box Values Are Not Continued Across PostbacksThe password text box has some potentially unexpected behavior when viewed through a web page. To illustrate these subtleties, let's view the PasswordTextBox.aspx through a browser. When you first visit the page, take a moment to enter some text into the username and password text boxes. Note that the username text box behaves like a normal text box, but the password text box has its input masked by asterisks. Figure 10.8 shows the PasswordTextBox.aspx ASP.NET web page through a browser and with values entered into both text boxes. Figure 10.8. The text in the password text box is masked by asterisks. After you have entered information into the two text boxes, submit the form by clicking the Login button. Clicking the button will cause the form to be submitted. Because Web Forms, as we discussed in the preceding hour, are postback forms, the web page will be reloaded. Upon the page's reloading, though, the text entered into the password text box will disappear, as Figure 10.9 illustrates. (Note that the text in the username text box still remains.) Figure 10.9. When the Web Form is posted back, the text in the password text box is not redisplayed. Why did the text in the username text box remain, but the text in the password text box disappear? Recall that when the button is clicked, the Web Form is submitted and the data the user entered into the text boxes is sent back to the PasswordTextBox.aspx ASP.NET web page. When the request for the PasswordTextBox.aspx ASP.NET page arrives at the web server, the ASP.NET engine is invoked to produce the proper HTML output for the page. The ASP.NET page can determine that the page has been posted back and sets the Text properties of the two TextBox Web controls to the values the user entered. With TextBox Web controls whose TextMode property is set to SingleLine or MultiLine, the value of the Text property is expressed in the HTML markup generated by the TextBox Web control when it is rendered. For example, a TextBox Web control whose Text property equals Scott and whose ID property equals TextBox1 will render the following HTML markup: <input name="TextBox1" type="text" value="Scott" /> However, when a password text box is rendered, the Text property is not expressed in the resulting HTML markup. Security reasons prevent the Text property from being expressed in the TextBox Web control's resulting HTML markup. Imagine that a TextBox Web control with its TextMode property set to Password had its Text property set to password123 and its ID property set to TextBox2. Now, if the Text property were expressed in the resulting HTML markup, the TextBox Web control would produce the following HTML markup when rendered: <input name="TextBox2" type="text" value="password123" /> Now imagine that a user visits a web page where he is prompted for his user name and password, and imagine that after he enters his correct username and password, the ASP.NET web page displays some information specific to his user account in a Label Web control on the same web page. If the user gets up from his computer to get a quick drink of water, an unscrupulous co-worker could view the HTML received by the web browser. If the Text property of the password text box were expressed in the rendered HTML, the HTML received by the browser, which the nefarious coworker is viewing, would contain the following HTML markup: <input name="TextBox2" type="text" value="password123" /> (This assumes password123 was the person's password.) At this point the co-worker could learn the user's password. To help prevent this, Text properties for a TextBox Web control whose TextMode property is set to Password are not displayed.
|
EAN: 2147483647
Pages: 233