In this post I will discuss new values for TextMode property for ASP.Net TextBox server control. When working on a new prototype ASP.Net 4.5 project, I added a TextBox control for password entry on a page. When I tried to set TextMode to Password i noticed that intellisense opened up a long list of available values. Following is list of all the available values for this property in ASP.Net 4.5.
|SingleLine||Represents single-line entry mode|
|MultiLine||Represents multiline entry mode|
|Password||Represents password entry mode|
|Color||Represents color entry mode|
|Date||Represents date entry mode|
|DateTime||Represents date-time entry mode|
|DateTimeLocal||Represents local date-time entry mode|
|Represents email address entry mode|
|Month||Represents month entry mode|
|Number||Represents number entry mode|
|Range||Represents numeric range entry mode|
|Search||Represents search string entry mode|
|Phone||Represents phone number entry mode|
|Time||Represents time entry mode|
|Url||Represents URL entry mode|
|Week||Represents week entry mode|
My first reaction at the new values of this property was that may be ASP.Net framework has implemented some auto validation of text entry. For example if set this value to Number, may be it will insert validator to allow numeric entries only. So I looked at the HTML generated by the following sample UI.
<table> <tr><td><span>Number Text:</span></td> <td><asp:TextBox TextMode="Number" runat="server" ID="NumberTextBox" /></td> </tr> <tr> <td><span>Search Text:</span></td> <td><asp:TextBox TextMode="Search" runat="server" ID="SearchTextBox"></asp:TextBox></td> </tr> <tr> <td><span>Email Text:</span></td> <td><asp:TextBox TextMode="Email" runat="server" ID="EmailTextBox" /></td> </tr> <tr> <td colspan="2"><asp:Button runat="server" Text="Submit" ID="SubmitButton" /></td> </tr> </table>
<table> <tr><td><span>Number Text:</span></td> <td><input name="NumberTextBox" type="number" id="NumberTextBox" /></td> </tr> <tr> <td><span>Search Text:</span></td> <td><input name="SearchTextBox" type="search" id="SearchTextBox" /></td> </tr> <tr> <td><span>Email Text:</span></td> <td><input name="EmailTextBox" type="email" id="EmailTextBox" /></td> </tr> <tr> <td colspan="2"><input type="submit" name="SubmitButton" value="Submit" id="SubmitButton" /></td> </tr> </table>
As you can notice that by setting TextMode property value to new types like Email, Url etc., ASP.Net has inserted appropriate type attribute in client HTML. This type attribute is an indicator for the browser to format or change style of that content based on the type of input. For example when you set TextMode to Password, your text mode masks the entered values by displaying symbols that are configured for that browsers. Currently browsers show *. And when you set TextMode property value to Multiline, browsers allows use of ENTER key to insert text in multiple lines. Along the same lines when you will set the value of type attribute for INPUT control correctly, browser will modify behavior of text box or input control accordingly.
The behavior of text box will differ depending on browser. Some browsers do take into account the new values of TextMode property and display the control accordingly.
The above statement is verified when you open the page in Chrome browser.
Notice how number and search type text boxes render differently. Number text box automatically inserts a numeric updown control with it. And search text box inserts x at the end when you type some text in the box. That x allows you to delete the whole input in one click.
I will strongly suggest that you set TextMode property value appropriately to take advantage of browser's implementation of those type of input controls. This way your users will have consistent experience on individual browsers.