Facelift to Forms; Part 1: TextBox

Introduction

This is first article in '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 client mentioned that they were not happy with their website’s performance.
They had 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 putting much thought.

As you agree that web forms is one of very widely used way 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 of web forms were
just replacement of multipage printed copy of forms asking for same information
again and again. It is vital for any web application developer to understand usage
of various elements in web forms and know verious options to make 'End User's life
easy. If implemented correctly customers will love you and if not then customers
will hate you.

Download sourceDownload Facelift_Forms_Textbox.zip – 338.99 KB

TextBox

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

  1. Add some Spice (CSS)
  2. Shine (Highlight) on focus
  3. Have some Watermark (Javascript/AjaxControl Toolkit)
  4. Use of 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>

Simple Form
Image 1: Simple form without any CSS

Now let’s start giving facelift to this form.

1. Add some Spice (CSS)

One of most easy and effective way 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> 

Added some fonts
Image 2: Form with Fonts

By just applying fonts and make consistence width to both textboxes makes thsi form look 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 ‘cool’ thing to do specially when you want to use some funky
fonts and you know for sure that given fonts will not be available on client’s computer.
Here is result in different browser from above code.

Web fonts on Firefox
Web fonts rendered on Mozilla Firefox
Web fonts on IE
Web fonts on IE



Note: Please be very careful about using this technique as this is still very
early stage for this technology, very few browsers supports this, I was able to
check this with IE 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>

Simple Borders
Textbox with Border

Above code generates following form. Here we changed appearance
of TextBox to flat with solid border. You can experiment here with various border
type 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>

Border with thick left border
Regular border on 3 sides and thick border on left side.

In above 2 examples we added borders, in second example we applied thin (1px)
border to all sides of textbox and we added thick (7px) border on left side of
textbox. This gives nice visual effect which seems bit different the regular
textbox.
Now in 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>

Drop Shadow to TextBox
Textbox borders with shadow.

In most cases we want that disabled TextBox appear differently. Generally there
are two ways, either use 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 textbox
Different Disabled formatting.

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

Disabled textbox as label
Disabled textbox as Label.

Now let’s add some background, Here are 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>

Solid color as background
Textbox with solid background.

You can also use an image as background, There are two most popular visual effects
1) Gredient effect and 2) rounded corners. Lets see 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>

Gradient Background


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

Textbox with Rounded Corner
Textbox with Rounded Corner

Note: As you may already have seen that we used width: 300px; that is because
our image is 300 px wide. The textbox we used here have transparent background
do 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 brake etc.) when I come back I may
need to 'think' where was I?; One of the technique which we (as developer) can
use to draw attention of user is change visual appearance of element which has
focus and change back to original state when it loses the focus. Microsoft is
using this technique from 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>

Highlight on Focus

Now this is very neat and apparently easy to implement. One of the thing here is
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 (specially 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>

Highlight on Focus with JavaScript

3. Have some Water (mark)

Now let’s move to next level in customization. We can add watermark effect here,
This is 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.
TextBox after typing information.
TextBox before typing information.

Here we are taking advantage 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 have 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 have not entered anything in text box
then value and ‘DefaultValue’ will be same in that
case we apply different css class textBox.className='loginNormal';
and if user have entered any value then we apply different CSS.

One of other way 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 before typing information.
TextBox after 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 was 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
combination of Themes and CSS to apply most of 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 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>

TextBox before typing information. TextBox after typing information.

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 dot net related technologies then also you can get most of
benefits of this style. You could write a script which attaches events on page
at page lode time. Or if you prefer copy/paste then here is 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

Download sourceDownload Facelift_Forms_Textbox.zip – 338.99 KB

As 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 Application's
Users.
Happy Coding 🙂

More by Author

Must Read