Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Form CSS: Here

CSS Tableless Form

Author: Dynamic Drive

This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form. One issue with the form is IE6's three pixel jog bug, which is addressed in the demo manually, by offsetting the jogged checkboxes with an additional margin. You may wish to implement a more thorough fix, though it will increase the size of the code. IE7 does not suffer from the 3 pixel bug.

The form is responsive in that it expands to take advantage of the full horizontal space of the page when the window is 480px or less, or that of most smart phones.

Demo:

Male: Female:

Tennis
Reading
Basketball

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 06/20/2006

Revision History: 06/10/2013 Form now responsive, adapting to windows 480px or less.

Usage Terms: Click here

Your Comments (189)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 19 pages  <  1 2 3 4 >  Last »

I tried to predefine label and input textbox but checkbox not getting aligned. I'm using dotnet controls in aspx pages. Check box text is talking label's css on its own. Please help me.

Eg: <asp:CheckBox CssClass="chkBox" ID="chkRememberMe" runat="server" Text='Remember Me' >

My CSS is:
---------------

br {
clear: left;
}
label{
float: left;
margin-bottom: 5px;
text-align: right;
width:40%;
padding-right: 15px;
}
input.textbox{
width: 250px;
height: 150px;
border:1px solid #A7B39F;
margin:2px;
color:#F05700;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

<h1>Registered users sign in</h1>
<label> E-mail address </label>
<asp:TextBox ID="txtLoginEmail" runat="server" TabIndex="1"></asp:TextBox>

<label> Password</label>
<asp:TextBox ID="txtLoginPwd" runat="server" TabIndex="2" TextMode="Password"></asp:TextBox>

<asp:CheckBox ID="chkRememberMe" runat="server" Text='Remember Me' >
Posted by Rekha on 07/17, 06:26 AM
I'm guessing it's because you're using asp to define the areas. Creating default styles only works with standard elements, not php or asp content.

Also to make sure that the label and textbox styles remain seperate, you should create a div for each one ... the enclosed elements will then use the div styles that they are contained in.

In other words:

#label {
float: left;
margin-bottom: 5px;
text-align: right;
width:40%;
padding-right: 15px;
}

Then:
<div id=label> E-mail address </div>

you can also define the textbox style by defining it:
.textbox {
width: 250px;
height: 150px;
border:1px solid #A7B39F;
margin:2px;
color:#F05700;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

then use <span=textbox> <asp:TextBox ID="txtLoginPwd" runat="server" TabIndex="2" TextMode="Password"></asp:TextBox> </span>

I don't know if that method can define asp content, but it's worth a shot.

Hope that helps ... and good luck :)
Posted by Dustin Halstead on 07/18, 05:27 PM
Hey Thanks a tonn. I tried your option. It really looks neat. But so many div's and span's to be used. How I wish, I redefine labels, textbox and check box lists and it would be soo less coding. Is there any way possible??
Thank You once again.
Posted by Rekha on 07/19, 05:22 AM
Yeah ... I agree, it's a lot of excess div seperation that has to take place. Maybe one day it'll be easier to style a website without all of this. Heck, hopefully Internet Explorer v7 will make things easier than they currently are.
Luckly ... raw text compresses a huge amount, so the css and html are your least concern as far as bandwidth is concerned. Navigating the code is a different matter though.

Here's an idea though ... when designing a complex website, it's always a good idea to seperate complex elements or elements that are only used on certain pages. The majority of my website uses the same elements ... so it calls on a single css called -main-.css (surrounding it in '-' keeps it at the top of the list of files).

-main-.css looks like this:

@import url('index.css');
@import url('donations.css');
@import url('login.css');
@import url('menu.css');
@import url('search.css');
@import url('font.css');

The other portion of the site uses a different master css that calls on some of the above files and a few different ones.

These keeps all the styling seperate and in different files so I can locate problems and it lessens in the amount of commenting that's needed to organize the code.

Best of luck on your site :)
Posted by Dustin Halstead on 07/19, 09:26 AM
Hmmm makes sense. As this is web application(software) it is has too many form pages. Now I know what is possible and what is not possible with CSS in aspx(dotnet) files. I again 'Thank You' for your answers :)
Posted by Rekha on 07/19, 10:32 AM
Great page ! Very useful information.
Posted by Sam on 07/21, 10:12 PM
Great code, I would like to know the source or and php code on how I can get the feedback to a email when the visitor pressed the "submit" button. Thx.
Posted by Philip on 07/22, 02:35 AM
@Rekha
The problem is not that you're using ASP, it's that you have not defined a class ".textbox". In css, a class attribute is referred to with the ".{name}" syntax.

I think if ASP.NET is in any way sensible it will be possible to use <asp:TextBox class="textbox" ...>

Then your original CSS will simply start working. Also instead of #label try to work with the <label> tag. It just makes more sense.
Posted by Michiel van der Blonk on 07/22, 11:18 AM
Michiel,

I was trying to predefine the default tags like 'label' 'input textbox' etc., But when I predefined the label and input box... checkbox text was getting applied with label style... which is wrong. If only I can predefine these tags... I don't have to use class="stylename" in all the labels or textboxes... Don't you think, that would be great. But this doesn't work with asp or php files i guess.

Read the comment in cssbeauty.com
http://cssbeauty.com/skillshare/discussion/786/how-to-predefine-label-textbox-and-checkbox-for-tableless-from/#Item_0

he says,

The System.Web.UI.HtmlControls.HtmlInputCheckBox class doesn't generate a label at all. All it does is this (found that on MSDN) :


<input id="Soccer" type=checkbox runat="server"> Soccer

So you're kind of stuck.

Please read the comment to understand the rendering of browsers for HTML, asp or php files.
Posted by rekha on 07/24, 12:43 AM
The radio buttons should appear before the option Male/Female and not after
Posted by GG66 on 07/29, 08:10 AM

Comment Pages 2 of 19 pages  <  1 2 3 4 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.