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.
Download sourceBackground
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.
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.- Add some Spice (CSS)
- Shine (Highlight) on focus
- Have some Watermark (Javascript/AjaxControl Toolkit)
- 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>
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> 
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 rendered on Mozilla Firefox |  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>
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>
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>
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>
Different Disabled formatting
code>/*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.
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>
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>
<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
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
p>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>
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>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. |
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 classtextBox.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 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
TargetControlIDThis indicates id of control on which we need to display watermark effect.WatermarkCssClassThis indicates name of CSS to used as watermark displayWatermarkTextThis 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> | |
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 sourceAs 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 :)
No comments:
Post a Comment