Styling Forms

[Don E]

Hey everyone, What are some of the ways some of you style your forms... or better put.. what's suggested/recommended when it comes to styling forms? In other words, since the label of an input field can be longer than another, that makes the input boxes uneven like the following:

<form  method="post" action="somepage.php" ><fieldset><legend>Example Form</legend><label for="name">Name:</label><input type="text" id="name" name="fname" /><br/><label for="mail">Email Address:</label><input type="text" id="mail" name="email" /><br/><input type="submit" value="Send" name="submit" /></fieldset></form>

This is how the above form displays: Is it better to target everything individually or put each element in a div container and then style it like that... or.. use table? Thanks.

[eTianbun]

Use <table> for that!

[dsonesuk]

use display: block; with float: left; or display:inline-block; for label, then define a width to the larget length of text, which should bring the inputs into line.

[Don E]

Thanks CodeName and suk. Suk, Do you mean something like this:

label {display: block;float: left;width: 110px;}

This is the result: Thanks.

[dsonesuk]

Suk? its dsones - uk (51st state)

[Don E]

My apologies, I didn't mean to get that wrong. What would you recommend/suggest on how to get a particular input element centered, like the submit button? Because I noticed when trying to target a specific input element and since input elements are inline by default and using text-align: center, I thought that would do the trick. But the only way text-align: center works is if targeting the parent container which is the form itself and then applying text-align: center to that. Thanks, I appreciate it!

Edited June 3, 2012 by Don E

[Guest So Called]

Why you don't put your form elements in a table and then apply your styling to the various table elements? For example: <TR style="some style here"><INPUT ... /></TR> I don't really understand what you're doing and what you're trying to accomplish. My forms look nice and the reason things are all lined up nicely is because I've used a table to organize things. In one case it's a set of configuration settings divided up into three columns, left column = name of setting, middle column = input box, right column = explanation of setting and additional help. But maybe this is nothing like what you want to do. Organizing a form as a table is by no means original. I've seen tables and forms like this often, both examples and looking at HTML source of various sites. I hope I'm not the only one who often sees something that looks good on an Internet site and then view->source to see how they did it.

[eTianbun]

Use <table> for that!

Edited June 3, 2012 by CodeName

[dsonesuk]

Why you don't put your form elements in a table and then apply your styling to the various table elements?

Because tables should only be used for showing tabular data, NOT for page layout. Just wrap submit button within a block element such as div, and use text align: center; on that.

[eTianbun]

Because tables should only be used for showing tabular data, NOT for page layout.

Yeah, that's true, but sometimes, one needs to break rule(s), to get a better/desired result... Edited June 3, 2012 by CodeName

[Don E]

Why you don't put your form elements in a table and then apply your styling to the various table elements? For example: <TR style="some style here"><INPUT ... /></TR> I don't really understand what you're doing and what you're trying to accomplish. My forms look nice and the reason things are all lined up nicely is because I've used a table to organize things. In one case it's a set of configuration settings divided up into three columns, left column = name of setting, middle column = input box, right column = explanation of setting and additional help. But maybe this is nothing like what you want to do. Organizing a form as a table is by no means original. I've seen tables and forms like this often, both examples and looking at HTML source of various sites. I hope I'm not the only one who often sees something that looks good on an Internet site and then view->source to see how they did it.

I was just asking how some of the forum members here address the issue that was asked in the first post... is there something wrong with that? I was and am fully aware of the many ways forms can be styled and I wanted to know from the forum members perspective what's their preferred way of addressing the issue that was mentioned in the first post. CodeName gave his way for example; table. dsonesuk suggested basically what I was looking for because I didn't want to resort to using a table. IMO nothing wrong with tables, just that in today's standards, I think it's best to use table for showing tubular data instead of using for layout.

[dsonesuk]

Yeah, that's true, but sometimes, one needs to break rule(s), to get a better/desired result...

I bet i can reproduce the so called better/desired result that a table can with float, margins and padding. Edit: well basically just proved it, with no table in sight. Edited June 3, 2012 by dsonesuk

[Guest So Called]

Any time you apply one rule all the time with no exceptions you've thrown judgement out the window. In my configuration form example a table makes perfect sense. The form is designed with tabular data, (1) name of setting, (2) value of setting, (3) explanation of setting. A table makes sense here. In the OP's example of a contact form the data isn't tabular. I could see a possibility of using a table but not a strong one. I don't quite understand why the OP can't just style the various <input> elements to achieve a pleasing design. Perhaps the OP can elaborate.

[dsonesuk]

This explains fully why tables are bad idea, and WHY the use of tables for layout should be avoided. http://webdesign.about.com/od/layout/a/aa111102a.htm

[Guest So Called]

This explains fully why tables are bad idea, and WHY the use of tables for layout should be avoided. http://webdesign.abo...a/aa111102a.htm

#1 reason why to not use tables: author doesn't know when tables are appropriate and when not

[Don E]

Elaborate on what? Did you not read post #11? I basically explained why I started this thread.

[Guest So Called]

dsonesuk suggested basically what I was looking for because I didn't want to resort to using a table. IMO nothing wrong with tables, just that in today's standards, I think it's best to use table for showing tubular data instead of using for layout.

Sure I read post #11.

Elaborate on what? Did you not read post #11? I basically explained why I started this thread.

How about explaining tubular data to us?

[Don E]

Explain what? Are you being serious? You're making a big deal out of nothing man. Did you not understand what I wrote or did you misinterpret it? I KNOW you can use tables to design/style a form, I mentioned this in the first post, but tables in today's' standards(of designing sites) from my understanding should be used for tubular data and NOT for any kind of layout, forms included. IF I am wrong, I am wrong, big deal. What are you trying to say, that the example form I quickly made to use for an example to better help me illustrate my question, is "tubular data-like" and should use a table there then?

[Guest So Called]

It's tabular data. Not tubular. Which example are you referring to? I see little or no reason to use a table in a common contact form. Which styling are you displeased with? I understood this topic to be about a problem styling your submit button, right?

[Don E]

Ah man.. I was referring to that. lol Apologies for the confusion. Thats why I was like to myself and then posted.. what in the world is he asking to explain that.. because I was referring to what you are referring to but my mistake for spelling it incorrectly, No, the main issue is addressed in the first post. For some reason when I picture "tables", I see them as 'tubes(columns)' of data stacked next to each other hence why I say/said "tubular".

[Guest So Called]

I'm getting very frustrated by this topic. You can refer me to reading the OP as often as you like but that adds no new information content to the OP.

What are some of the ways some of you style your forms... or better put.. what's suggested/recommended when it comes to styling forms? In other words, since the label of an input field can be longer than another, that makes the input boxes uneven like the following

How about using <INPUT size="nn"> or <TEXTAREA cols="nn"> or something like that? AFAIK it's difficult to impossible to make these areas look exactly the same across different browsers and versions. We've gone from wanting HTML to be a flexible way to mark up text documents to automatically adjust to everybody no matter what the browser, platform or screen, to wanting to make a single document look the same for everybody no matter what the software or hardware differences. I for one am not surprised that we are failing.

[Don E]

I see why you're frustrated. When I mentioned label in the first post, I was referring to the 'label' of an input element and the text that's between <label></label>, for example: <label for="name">First Name:</label><input type="text" id="name" name="fname" /><br/> When I said: 'since the label of an input field can be longer than another(the label as in the text inside <label></label> that makes the input boxes(<input type="text" id="name" name="fname" />) uneven with the next input box/element if the label is a shorter word for that input box/element. i.e:

<label for="name">First Name:</label><input type="text" id="name" name="fname" /><br/><label for="email">Email:</label><input type="text" id="email" name="mail" /><br/>

Like shown here: If my overall question confused you, it maybe because I started off asking in general of what's recommended/suggested ways of styling forms and then gave a precise example of what I was referring to by saying this: In other words, since the label of an input field can be longer than another, that makes the input boxes uneven like the following, basically asking what are some of the forum members ways/suggestions/opinions of handling this. Hence why I gave an illustrative example of what I was referring to by providing the attached image. Hopefully this post explains better.

Edited June 4, 2012 by Don E

[dsonesuk]

How about using <INPUT size="nn"> or <TEXTAREA cols="nn"> or something like that?

Its more than likely that no one would use size or cols these days but use width and height instead to get exact styling across all browsers.

[Guest So Called]

Okay Don. In fact the method I described using a table to organize my configuration settings solves the problem you describe, except my form/table has three columns and yours has two. In my case it's (1) name of setting, (2) contents of setting (input box), (3) description of setting. In your case it's (1) name of input, (2) contents of input. In both cases the second column, the input fields, all line up when you use a table. There's always many different ways to accomplish the same thing. I'm sure you could do it with some sort of CSS. Myself, I'm not going to redesign my configuration table form to not use a table just for some sort of purism.

[thescientist]

it's not purism, it's semantics. also, you need more markup to display a table.