New TextMode Values For TextBox In ASP.Net 4.5

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.

SingleLineRepresents single-line entry mode
MultiLineRepresents multiline entry mode
PasswordRepresents password entry mode
ColorRepresents color entry mode
DateRepresents date entry mode
DateTimeRepresents date-time entry mode
DateTimeLocalRepresents local date-time entry mode
EmailRepresents email address entry mode
MonthRepresents month entry mode
NumberRepresents number entry mode
RangeRepresents numeric range entry mode
SearchRepresents search string entry mode
PhoneRepresents phone number entry mode
TimeRepresents time entry mode
UrlRepresents URL entry mode
WeekRepresents 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.

ASP.Net TextMode property values

ASP.Net Markup

<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>

Generated HTML

<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.

TextMode in chrome

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.

comments powered by Disqus

Search

Social

Weather

7.2 °C / 45.0 °F

weather conditions Clouds

Monthly Posts

Blog Tags