Facelift to Forms: Part 1: TextBox

• Download source code - 302.2 KB

Introduction

This is my first article in the 'Facelift to Forms' series which describes various options to make beautiful, easy to implement and easy to use web forms. In each article, I will be describing one element of web forms and various ways to give 'Facelift' to web forms.

Background

One of our new clients mentioned that they were not happy with their website's performance. They had a very good ad campaign and good continuous flow of new visitors but they were not registering. I thought let's take a look at registration form as 'End User'; I went to their site and clicked on "Register" link. If I see that registration form as 'End user', I see an ugly form with many form elements put together without much thought put into it.

As you agree, web forms is one of the very widely used ways to collect information from any web application. In many cases, it may be the only way to save information and yet it is not used correctly in many cases. I saw some web forms were just replacements of multipage printed copy of forms asking for the same information again and again. It is vital for any web application developer to understand usage of various elements in web forms and know various options to make 'End User's life easy. If implemented correctly, customers will love you and if not, then customers will hate you.

TextBox

Any web form is incomplete without a textbox. You can do many things with textbox to make it more fun and helpful for the end user. Here are few ways to do this:

1. Add some Spice (CSS)
2. Shine (Highlight) on focus
3. Have some Water^mark (JavaScript/AjaxControl Toolkit)
4. Use Theme & CSS to make your (yes developer's) life easy

In this example, we will use a simple registration form with 2 fields, name & email address.

/*Code: SimpleForm.htm*/
<div style="border: solid thin black; padding: 10px;">
Name: <input id="tdName"> <br /> <br />
Email : <input id="tbSimmple"> <br /> <br /> 
<input id="register" type="submit" value="Register">
</div>

Now let's start giving a facelift to this form.

1. Add Some Spice (CSS)

One of the easiest and most effective ways to change appearance of a textbox (or any element) is to use CSS. There are few tricks which you can do with CSS to make TextBox more beautiful. Let's see some...

/*Code:CSS_Font.htm*/
<style>
/* Apply default fonts*/
<style>
.loginBox
{
    width: 80%;
    color: #B24F04;
    font-family: "Verdana" ,sans-serif;
}
.loginText
{
    color:#FF8326;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px;background-color:#FDEDD9">
<span class="loginText">Name:</span>
<input id="login" class="loginBox" /><br />
<br />
<span class="loginText">Email :</span>
<input id="email" class="loginBox" /><br />
<br />
<input id="Submit1" type="submit" value="Register" />
</div> 

By just applying fonts and giving a consistent width to both textboxes makes this form look a bit better.

/*Web_Font.htm*/
<style type="text/css">
@font-face 
{
    font-family: Gentium;src: 
                 url(http://www.princexml.com/fonts/larabie/berylibi.ttf) format("truetype"); 
}

.loginURL 
{
    width: 80%; 
    color: Gray; 
    font-family:"Gentium" , serif; 
} 
</style>
<div style="border: solid thin black; padding: 10px;">
Name: <input id="Text1" class="loginURL" /><br /> <br />
Email: <input id="Text2" class="loginURL" /><br /> <br />
<input id="Submit2" type="submit" value="Register" />
</div>

As you can see here, we are using fonts hosted on server, hence it is not required that given fonts should be installed on client's computer. If browser does not support 'web fonts', then substitute fonts (sans-serif in this case) will be used. This is one of the 'cool' things to do especially when you want to use some funky fonts and you know for sure that given fonts will not be available on the client's computer. Here is the result in different browser from the above code.

Web fonts rendered on Mozilla Firefox

Web fonts on IE

Note: Please be very careful about using this technique as this is still in a very early stage for this technology, very few browsers support this, I was able to check this with Internet Explorer 8 and Firefox 3.5.

Now let's add some borders to this TextBox:

/*Border.htm*/
  <style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBorders
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
    }
    </style>
    <div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
        <span class="loginText">Name:</span>
        <input id="Text3" class="loginBorders" /><br />
        <br />
        <span class="loginText">Email:</span>
        <input id="Text4" class="loginBorders" /><br />
        <br />
        <input id="Submit3" type="submit" value="Register" />
    </div>

The above code generates the following form. Here, we changed the appearance of TextBox to flat with solid border. You can experiment here with various border types and various sides to give various effects. Here is another example of using borders:

<style type="text/css">
.loginText
{
    color: #FF8326;
}
.loginBorders
{
    width: 80%;
    color: #B24F04;
    font-family: serif;
    border: solid 1px #F58F1A;
    border-left: 7px solid #F58F1A;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text3" class="loginBorders" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text4" class="loginBorders" /><br />
    <br />
    <input id="Submit3" type="submit" value="Register" />
</div>

In above 2 examples, we added borders, in the second example, we applied thin (1px) border to all sides of textbox and we added a thick (7px) border on the left side of the textbox. This gives a nice visual effect which seems a bit different than the regular textbox. Now in the next example, let's add drop shadow to borders.

/*Border_Shadow.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBordersShadow
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: outset thin #F58F1A;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBordersShadow" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBordersShadow" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

In most cases, we want that disabled TextBox appears differently. Generally, there are two ways, either use a different visual style to represent disabled textbox or let TextBox appear as Label.

/*Disabled_Different.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBorders
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
    }
    input[disabled]
    {
        width: 80%;
        color: #333333;
        background-color:#eeeeee;
        font-family: serif;
        border: solid 1px #F58F1A;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" disabled="disabled" value="Jay" style="width:80%" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBorders" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

/*Disabled_Label.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBorders
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
    }
    input[disabled]
    {
        width: 80%;
        color: #333333;
        background-color:Transparent;
        font-family: serif;
        border: hidden 1px #F58F1A;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" disabled="disabled" value="Jay" style="width:80%" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBorders" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Now let's add some background. Here are a few ways we can use background:

/*Background_Solid.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBg
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
        background-color: #FFFFB8;
    }
</style>
    <div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBg" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBg" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

You can also use an image as background. There are two most popular visual effects:

1. Gradient effect and
2. Rounded corners

Let's see an example.

/*Background_Image.htm*/
  <style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBg
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
        background-image:url("gr.jpg");
    }
</style>
    <div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBg" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBg" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

<style type="text/css">
.loginText
{
    color: #FF8326;
}
.loginBg
{
    width: 300px;
    color: #B24F04;
    font-family: serif;
    background-color:Transparent;
    background-image:url("rounded.png");
    background-repeat:no-repeat;
    border-style:hidden;
    padding-left:5px;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBg" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBg" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Note: As you may have already seen, we used width: 300px; that is because our image is 300 px wide. The textbox we used here has transparent background so whatever image you use ad background textbox will appear with that image. This style can only be used for fixed width textboxes. (There are few ways get this effect with dynamic width but it involves few Divs, it is not only with one Textbox.)

2. Shine (Highlight) on Focus

As 'End user', I am too distracted, While filling a form, I may lose my focus; (answer a phone, go on a break, etc.) when I come back, I may need to 'think' where was I?; One of the techniques which we (as developers) can use to draw the attention of the user is change the visual appearance of element which has focus and change back to original state when it loses focus. Microsoft has been using this technique from the early days of windows. There are many different ways to highlight (apply different CSS) on focus of TextBox.

/*Focus_Highlight.htm*/
<style type="text/css">
    input[type=text]:focus
    {
        border: 1px solid black;
        background-image: url(  "gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    input[type=text]
    {
        border: 2px solid #FF8326;
        background-image: url(  "gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input type="text" id="Text15" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text16" type="text" /><br />
    <br />
    <input id="Submit9" type="submit" value="Register">
</div>

Now this is very neat and apparently easy to implement. One of the things here is that the above CSS will only apply to elements with type=text and all other elements will be untouched; and we do not use JavaScript or any programming here. :) This may not be supported by all browsers (especially old browsers), in this case JavaScript can save the day...

/*FocusJS_Highlight.htm*/
<style type="text/css">
    .loginHighlight 
    {
        border: 1px solid black;
        background-image: url(  "gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    .loginNormal
    {
        border: 2px solid #FF8326;
        background-image: url(  "gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input type="text" id="Text15" onblur="this.className='loginNormal';"
       class="loginNormal" onfocus="this.className='loginHighlight'"  /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text16" type="text" onblur="this.className='loginNormal';"
       class="loginNormal" onfocus="this.className='loginHighlight'"  /><br />
    <br />
    <input id="Submit9" type="submit" value="Register" />
</div>

3. Have Some Water (Mark)

Now let's move to the next level in customization. We can add watermark effect here. This is a very useful feature for providing some help to user while filling a form. You can put some message in text box which will be displayed when text box is empty when user types something help message disappears. There are few ways to do this...

/*Watermark_JS.htm*/
<style type="text/css">
    .loginHighlight
    {
        border: 1px solid black;
        background-image: url("gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    .loginNormal
    {
        border: 2px solid #FF8326;
        background-image: url("gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
<script language="javascript" type="text/javascript">
  function textOnFocus(textBox)
  {
    textBox.className='loginHighlight';
    if(textBox.value==textBox.defaultValue)
    {textBox.value='';}
  }
  function textOnBlur(textBox)
  {
    textBox.className='loginNormal';
    if(textBox.value=='')
    {textBox.value=textBox.defaultValue;}
  }  
</script>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input type="text" id="Text15" onblur="textOnBlur(this)"
        value="Click here to enter Login Name"
        class="loginNormal" 
        onfocus="textOnFocus(this);" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text16" type="text" onblur="textOnBlur(this)" 
        value="Click here to enter Email" 
        class="loginNormal" 
        onfocus="textOnFocus(this);" /><br />
    <br />
    <input id="Submit9" type="submit" value="Register" />
</div>

TextBox before typing information.

TextBox before typing information.

Here, we are taking advantage of Default Value using JavaScript. When you define value as part of element specification, it becomes 'Default Value', and using multiple CSS classes based on value. When user has not entered anything, we wanted to apply transparency of 60% but as soon as user enters information, we wanted to remove transparency, hence we are applying different CSS based on value in text box. If user has not entered anything in textbox, then value and 'DefaultValue' will be the same. In that case, we apply different CSS class textBox.className='loginNormal'; and if user has entered any value, then we apply different CSS.

One of the other ways to apply watermark effect is to use WaterMark extender from AjaxControlToolkit.

/*Default.aspx*/
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajxTK" %>
...
...
...
    <style type="text/css">
    .loginHighlight
    {
        border: 1px solid black;
        background-image: url("gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    .loginNormal
    {
        border: 2px solid #FF8326;
        background-image: url("gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
    <div style="border: solid thin black; padding: 10px;">
        <span class="frmLbl">Name:</span>
        <asp:ScriptManager ID="sm" runat="server">
        </asp:ScriptManager>
        <ajxTK:TextBoxWatermarkExtender ID="tbWMEX_ProcName" runat="server" 
        TargetControlID="tbLoginName"
            WatermarkCssClass="loginNormal" WatermarkText="Click here to enter Name.">
        </ajxTK:TextBoxWatermarkExtender>
        <asp:TextBox id="tbLoginName" cssclass="loginHighlight" runat="server" /><br />
        <br />
        <span class="frmLbl">Email:</span>
        <ajxTK:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" 
        TargetControlID="tbEmail"
            WatermarkCssClass="loginNormal" WatermarkText="Click here to enter Email.">
        </ajxTK:TextBoxWatermarkExtender>
        
        <asp:TextBox id="tbEmail" runat="server" class="loginHighlight" /><br />
        <br />
        <input id="Submit10" type="submit" value="Register">
    </div>

TextBox before typing information.

TextBox after typing information.

As you can see, it is fairly simple to add watermark effect using TextBoxWaterMark Extender from AjaxControlToolkit. Main properties to define here are:

1. TargetControlID: This indicates id of control on which we need to display watermark effect.
2. WatermarkCssClass: This indicates name of CSS to used as watermark display
3. WatermarkText: This indicates text to be displayed as watermark.

4. Use of Theme & CSS to Make Your (Yes Developer's) Life Easy

These techniques you saw were fairly easy to implement; yes it is when we have few textboxes, but imagine that you have to do this for each textbox on your web application (usually which contains hundreds of textboxes). We can use a combination of Themes and CSS to apply most of the visual appearances and behavior. Here, I am assuming that you are aware of themes as this article is not intended to describe how to use themes.

/*Default.Skin*/
        <asp:TextBox onblur="textOnBlur(this);" CSSclass="loginNormal" 
          onfocus="textOnFocus(this);" runat="server"></asp:TextBox>

/*JavaScript*/
<script language="javascript" type="text/javascript">
  function textOnFocus(textBox)
  {
    textBox.className='loginHighlight';
    if(textBox.value==textBox.defaultValue)
    {textBox.value='';}
  }
  function textOnBlur(textBox)
  {
    if(textBox.value=='')
    {textBox.value=textBox.defaultValue;
    textBox.className='loginNormal opac';
    }
    else
    {
    textBox.className='loginNormal';
    }
  }  
  </script>        

You can attach this Script in a separate file or you can use master page which attaches JavaScript file. By doing this, each page which uses this master page will automatically get script and you (yes, developers) do not need to write redundant code.

/*Aspx page*/
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="easyTheme.aspx.vb" 
      Inherits="FaceliftToForms_TextBox.easyTheme" Theme="Default" %>
    ...
    ...
    <style type="text/css">
    .loginHighlight
    {
        border: 2px solid grey;
        background: #FFFFFF url( "gr.gif" ) repeat-x 0 1px; 
        color: #666666;
        width: 80%;
    }
    .loginNormal
    {
        border: 1px solid #cdcdcd;
        background: #FFFFFF url( "gr.gif" ) repeat-x 0 1px;
        color: #666666;
        width: 80%;
        opacity:0.6;
    filter:alpha(opacity=60);
    }
    .frmLbl
    {
        font-family: serif;
    }
</style>
<div style="border: solid thin black; padding: 10px;">
    <span class="frmLbl">Name:</span>
    <asp:ScriptManager ID="sm" runat="server">
    </asp:ScriptManager>
    <asp:TextBox id="tbLoginName" cssclass="loginNormal" runat="server" 
      Text="Click here to enter Login Name."/><br />
    <br />
    <span class="frmLbl">Email:</span>
    <asp:TextBox id="tbEmail" runat="server" class="loginNormal" 
      Text="Click here to enter Email." /><br />
    <br />
    <input id="Submit10" type="submit" value="Register">
</div>

Now on aspx page, you only have to add Theme="Default" in page definition tag. You can also use web.config to define this theme as your default theme. Once page gets rendered, ASP.NET will automatically attach JavaScript events to TextBox because we defined those in skin file for textbox element.

Bonus Section

If you are not using .NET related technologies, then also you can get most of the benefits of this style. You could write a script which attaches events on page at page load time. Or if you prefer copy/paste, then here is the code:

<script language="javascript" type="text/javascript">
addEvent(window, 'load', init, false);

function init() 
{
    var textBoxes = document.getElementsByTagName('input');
    for (var i = 0; i < textBoxes.length; i++) 
    {
        var theInput = textBoxes[i];
        
        if (theInput.type == 'text') 
        {  
            /* Add event handlers */          
            addEvent(theInput, 'focus', textOnFocus(theInput), false);
            addEvent(theInput, 'blur', textOnBlur(theInput), false);
        }
    }
}
</script>

Summary

As a developer, if you start thinking about this question "How can I make End User's life easy?" and implement changes, you will make your life easy; In the end, it is NOT you who decides how good your application is; it is the application's Users. Happy coding! :)

This article was originally published on Jay’s blog a Day as {Developer}.