Forums

marcoman

I used 'search' to find tips on styling forms. I found one but the article only gives tips on styling fields connected to label tags with the for attribute. I often use labels wrapped around input fields.

Can anyone point me to another resource for styling

<label>...<input type=\"text\" name=\"foo\" /></label>...

using css?

apostrophe

Don't know where you are searching. I just typed "styling forms with css" into google and got 45000 results.
Here's a nice one http://www.sitepoint.com/article/fancy-form-design-css/

marcoman

I used the search form in this site =). Thanks for the reply let me check out that link.

marcoman

The link above didn't work. Still can't find the answer to my question. To clarify. If I have this markup:


<form method=\"post\" action=\"foo.php\">
  <label>Username<input type=\"text\" name=\"username\" /></label><br />
  <label>Password<input type=\"passoword\" name=\"password\" /></label><br />

How can I align them using css? I've read an article in css-tricks (I can't find it now) showing how to do it. But it only applies to labels with the for attribute. It involves giving the labels a static width, floating them to the left and text-aligning them to the right. These instructions doesn't work for this mark up. Suggestions css experts?

AshtonSanders

I would start with putting the inputs outside the label: http://www.w3schools.com/tags/tag_label.asp
(Since the input is not the label.)
Then I would give labels a fixed width, like this:

CSS:

label {width:100px;}

HTML:

<form method=\"post\" action=\"foo.php\">
  <label>Username</label><input type=\"text\" name=\"username\" /><br />
  <label>Password</label><input type=\"passoword\" name=\"password\" /><br />
...

Is that what you're looking for?

nickstr

how do you want to align them, vertically, horizontally ?
try to put one label and one input in a fieldset and the next 2 ones in another fieldset, give the labels line-height the same as the input height

treehouse : what would you like to learn today?

Forums

Help styling forms