Jump to content

Styling Forms


Don E
 Share

Recommended Posts

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:post-69628-0-63874700-1338698573_thumb.jpg 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.

Link to comment
Share on other sites

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 by Don E
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? :)
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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". :)

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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:post-69628-0-17133200-1338783392_thumb.jpg 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 by Don E
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...