ptg 64 <title>Label Form</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblFirstName” Text=”First Name:” AssociatedControlID=”txtFirstName” Runat=”server” /> <br /> <asp:TextBox id=”txtFirstName” Runat=”server” /> <br /><br /> <asp:Label id=”lblLastName” Text=”Last Name:” AssociatedControlID=”txtLastName” Runat=”server” /> <br /> <asp:TextBox id=”txtLastName” Runat=”server” /> </div> </form> </body> </html> When you provide a Label control with an AssociatedControlID property, the Label control is rendered as an HTML <label> tag instead of an HTML <span> tag. For example, if you select View Source on your web browser, you see that the first Label in Listing 2.3 renders the following content to the browser: <label for=”txtFirstName” id=”lblFirstName”>First Name:</label> Always use a Label control with an AssociatedControlID property when labeling form fields. This is important when you need to make your website accessible to persons with disabilities. If someone uses an assistive device, such as a screen reader, to interact with your website, the AssociatedControlID property enables the assistive device to associate the correct label with the correct form field. CHAPTER 2 Using the Standard Controls From the Library of Wow! eBook ptg 65 Displaying Information 2 A side benefit of using the AssociatedControlID property is that clicking a label when this property is set automatically changes the form focus to the associated form input field. WEB STANDARDS NOTE Both the WCAG 1.0 and Section 508 accessibility guidelines require you to use the <label for> tag when labeling form fields. For more information, see http://www.w3. org/wai and http://www.Section508.gov. Using the Literal Control The Literal control is similar to the Label control. You can use the Literal control to display text or HTML content in a browser. However, unlike the Label control, the Literal control does not render its content inside of a <span> tag. For example, the page in Listing 2.4 uses a Literal control in the page’s <head> tag to dynamically modify the title displayed in the browser title bar. The current date displays in the Literal control (see Figure 2.3). LISTING 2.4 ShowLiteral.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> void Page_Load() { ltlTitle.Text = DateTime.Now.ToString(“D”); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head> <title><asp:Literal id=”ltlTitle” Runat=”Server” /></title> </head> <body> <form id=”form1” runat=”server”> <div> <h1>Look in the title bar</h1> </div> </form> From the Library of Wow! eBook ptg 66 </body> </html> CHAPTER 2 Using the Standard Controls If you used a Label control in Listing 2.4 instead of a Literal control, the uninterpreted <span> tags would appear in the browser title bar. NOTE The page in Listing 2.4 uses a format specifier to format the date before assigning the date to the Label control. The D format specifier causes the date to be formatted in a long format. You can use several standard format specifiers with the ToString() method to format dates, times, currency amounts, and numbers. For a list of these for- mat specifiers, look up the Format Specifiers topic in the index of the Microsoft .NET Framework SDK Documentation. Because the contents of a Literal control are not contained in a <span> tag, the Literal control does not support any of the formatting properties supported by the <span> tag. For example, the Literal control does not support either the CssClass or BackColor properties. FIGURE 2.3 Modifying the browser title with a Literal control. From the Library of Wow! eBook ptg 67 Displaying Information 2 The Literal control does support one property not supported by the Label control: the Mode property. The Mode property enables you to encode HTML content and accepts any of the following three values: . PassThrough—Displays the contents of the control without encoding. . Encode—Displays the contents of the control after HTML encoding the content. . Transform—Displays the contents of the control after stripping markup not support- ed by the requesting device. For example, the page in Listing 2.5 contains three Literal controls set to the three possi- ble values of the Mode property (see Figure 2.4). LISTING 2.5 ShowLiteralMode.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Literal Mode</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Literal id=”ltlFirst” Mode=”PassThrough” Text=”<hr />” Runat=”server” /> <br /><br /> <asp:Literal id=”ltlSecond” Mode=”Encode” Text=”<hr />” Runat=”server” /> <br /><br /> <asp:Literal id=”ltlThird” Mode=”Transform” Text=”<hr />” From the Library of Wow! eBook ptg 68 CHAPTER 2 Using the Standard Controls Runat=”server” /> </div> </form> </body> </html> FIGURE 2.4 Three values of the Literal control’s Mode property. When you request the page in Listing 2.5 with a web browser, the first Literal control displays a horizontal rule; the second Literal control displays the uninterpreted <hr /> tag; and the final Literal control displays another horizontal rule. If you request the page from a device (such as a WML cell phone) that does not support the <hr> tag, the third <hr /> tag is stripped. Accepting User Input The ASP.NET Framework includes several controls that you can use to gather user input. In this section, you learn how to use the TextBox, CheckBox, and RadioButton controls. These controls correspond to the standard types of HTML input tags. Using the TextBox Control You can use the TextBox control to display three different types of input fields depending on the value of its TextMode property. The TextMode property accepts the following three values: From the Library of Wow! eBook ptg 69 Accepting User Input 2 . SingleLine—Displays a single-line input field. . MultiLine—Displays a multiline input field. . Password—Displays a single-line input field in which the text is hidden. The page in Listing 2.6 contains three TextBox controls that illustrate all three of the TextMode values (see Figure 2.5). LISTING 2.6 ShowTextBox.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show TextBox</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:TextBox id=”txtUserName” TextMode=”SingleLine” Runat=”server” /> <br /><br /> <asp:TextBox id=”txtPassword” TextMode=”Password” Runat=”server” /> <br /><br /> <asp:TextBox id=”txtComments” TextMode=”MultiLine” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 70 CHAPTER 2 Using the Standard Controls You can use the following properties to control the rendering characteristics of the TextBox control (this is not a complete list): . AccessKey—Enables you to specify a key that navigates to the TextBox control. . AutoCompleteType—Enables you to associate an AutoComplete class with the TextBox control. . AutoPostBack—Enables you to post the form containing the TextBox back to the server automatically when the contents of the TextBox is changed. . Columns—Enables you to specify the number of columns to display. . Enabled—Enables you to disable the text box. . MaxLength—Enables you to specify the maximum length of data that a user can enter in a text box. (This does not work when TextMode is set to Multiline.) . ReadOnly—Enables you to prevent users from changing the text in a text box. . Rows—Enables you to specify the number of rows to display. . TabIndex—Enables you to specify the tab order of the text box. . Wrap—Enables you to specify whether text word-wraps when the TextMode is set to Multiline. The TextBox control also supports the following method: . Focus—Enables you to set the initial form focus to the text box. FIGURE 2.5 Displaying TextBox controls with different values for TextMode. From the Library of Wow! eBook ptg 71 Accepting User Input 2 And, the TextBox control supports the following event: . TextChanged—Raised on the server when the contents of the text box are changed. When the AutoPostBack property has the value True, the form containing the TextBox is automatically posted back to the server when the contents of the TextBox changes. For example, the page in Listing 2.7 contains a simple search form. If you modify the contents of the text box and tab out of the TextBox control, the form is automatically posted back to the server, and the contents of the TextBox display (see Figure 2.6). LISTING 2.7 TextBoxAutoPostBack.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void txtSearch_TextChanged(object sender, EventArgs e) { lblSearchResults.Text = “Search for: “ + txtSearch.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>TextBox AutoPostBack</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblSearch” Text=”Search:” Runat=”server” /> <asp:TextBox id=”txtSearch” AutoPostBack=”true” OnTextChanged=”txtSearch_TextChanged” Runat=”server” /> <hr /> <asp:Label id=”lblSearchResults” Runat=”server” /> From the Library of Wow! eBook ptg 72 CHAPTER 2 Using the Standard Controls </div> </form> </body> </html> FIGURE 2.6 Reloading a form automatically when the contents of a form field change. In Listing 2.7, the TextBox control’s TextChanged event is handled. This event is raised on the server when the contents of the TextBox have been changed. You can handle this event even when you don’t use the AutoPostBack property. WEB STANDARDS NOTE You s hould avoid usin g the AutoPostBack property for accessibility reasons. Creating a page that automatically reposts the server can be confusing to someone using an assistive device such as a screen reader. A better way to send data back to the server and dynamically update the page without a PostBack is to utilize features of Microsoft AJAX, JavaScript, or jQuery. This approach often results in a cleaner, faster page. Notice that the TextBox control also includes a property that enables you to associate the TextBox with a particular AutoComplete class. When AutoComplete is enabled, the user does not need to reenter common information—such as a first name, last name, or phone number—in a form field. If the user has not disabled AutoComplete on his browser, his browser prompts him to enter the same value that he entered previously for the form field (even if the user entered the value for a form field at a different website). From the Library of Wow! eBook ptg 73 Accepting User Input 2 NOTE You c an disable auto-c omplete by addin g an AutoComplete=”Off” attribute to the TextBox. This is useful when you want to use ASP.NET AJAX Control Toolkit AutoComplete control, and you don’t want the browser auto-complete to interfere with the Ajax auto-complete. For example, the page in Listing 2.8 asks for your first name, last name, and phone number. Each TextBox control is associated with a particular AutoComplete class. The AutoComplete class specifies the type of information associated with the form field. After you complete the form once, if you return to the same form in the future, you are prompted to enter the same responses (see Figure 2.7). LISTING 2.8 ShowAutoComplete.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show AutoComplete</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblFirstName” Text=”First Name:” AssociatedControlID=”txtFirstName” Runat=”server” /> <br /> <asp:TextBox id=”txtFirstName” AutoCompleteType=”FirstName” Runat=”server” /> <br /><br /> <asp:Label id=”lblLastname” Text=”Last Name:” AssociatedControlID=”txtLastName” Runat=”server” /> <br /> <asp:TextBox id=”txtLastName” From the Library of Wow! eBook . Library of Wow! eBook ptg 67 Displaying Information 2 The Literal control does support one property not supported by the Label control: the Mode property. The Mode property enables you to encode. Transform—Displays the contents of the control after stripping markup not support- ed by the requesting device. For example, the page in Listing 2.5 contains three Literal controls set to the three possi- ble. its TextMode property. The TextMode property accepts the following three values: From the Library of Wow! eBook ptg 69 Accepting User Input 2 . SingleLine—Displays a single-line input field. .