CSS Forms
Hi all.. recentely i have been workin on some CSS UI for forms... CSS allows to offer better UI for User elements such as text boxes, check boxes , radio buttons ... etc... CSS also enbales highlighting the field that is being accessed by the user... say for example if the user is entering his user name , the username feild can be highlighted using CSS and lil bit of Javascript... This provides a more enhanced UI ...
There are actually two methods to get this done.... one is by applying CSS:focus style and the other is using Javascript... Ill prefer the Javascript one since the CSS:focus is not supported in my version of IE
The process is relatively simple... define two styles applicable to all textboxes.... one should be default one the other can be the one for editing mode....
.tbox {
background-color: #FAFAFA;
border: 1px solid #AAAAAA;
font-family: Tahoma;
font-size: 11px;
}.tbox-focus {
background-color: #FFFFEE;
border: 1px solid #006699;
font-family: Tahoma;
font-size: 11px;
}
now after defing styles you have to write functions for setting and resetting the styles this is done using Javascript
<script type="text/javascript">
function sfocus(tid)
{
var im = document.getElementById(tid);
im.className="tboxfocus"}
function lfocus(tid)
{
var im = document.getElementById(tid);
im.className="tbox"
}</script>
Now having declared all these stuff inside <HEAD> tag... its all about calling the function in all textboxes
<input name="Name" type="text" class="tbox" id="Name" onBlur="lfocus('Name');" onFocus="sfocus('Name');">
<input name="Email" type="text" class="tbox" id="Email" onBlur="lfocus('Email');" onFocus="sfocus('Email');">
Use a simillar tag for all text boxes... thats all CSS forms are ready....
Labels: Krishna
posted by Krishna Shasankar @ 9:16 pm
1 Comments
