[SOLVED] Form: Put label above input; some labels/inputs next to each other

hostfreak · September 14, 2009

I want to have something like:

First Name    Last Name
|_______|    |_______|

Address
|_______|

State        City         Zip
|_______|    |_______|    |_______|

Here is what I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">			
		fieldset
		{
			border: solid 1px #d5d5d5;
			background-color: #e9e8e3;
			margin-top: 12px;
		}
		ol
		{
			list-style-type: none;
		}
		li
		{
			display: block;
		}
		label
		{
			display: block;
			margin-top: 12px;
		}
		input[type=text]
		{
			font-family: Verdana,Sans-serif;
			size: 8pt;
			border: solid 1px #d5d5d5;				
		}
	</style>
</head>	
<body>
	<fieldset>
		<legend>General Information</legend>
		<ol>
			<li>
				<label for="firstName">First Name</label>
				<input id="firstName" name="firstName" type="text" />
				<label for="lastName">Last Name</label>
				<input id="lastName" name="lastName" type="text" />
			</li>
			<li>
				<label for="address">Address</label>
				<input id="address" name="address" type="text" />
			</li>
			<li>
				<label for="state">State</label>
				<input id="state" name="state" type="text" />
				<label for="city">City</label>
				<input id="city" name="city" type="text" />
				<label for="zip">Zip</label>
				<input id="zip" name="zip" type="text" />
			</li>
		</ol>
	</fieldset>			
</body>
</html>

It works for putting the label on top of the input, but not for displaying some next to each other. Any help is appreciated, thanks.

saltedm8 · September 14, 2009

not sure if its valid and I did not get the chance to check it in all browsers.. but see if this works

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
      <title>Test</title>
      <style type="text/css">         
         fieldset
         {
            border: solid 1px #d5d5d5;
            background-color: #e9e8e3;
            margin-top: 12px;
         }
         input[type=text]
         {
            font-family: Verdana,Sans-serif;
            size: 8pt;
            border: solid 1px #d5d5d5;            
         }

	 .move { margin-left:105px; }
	 .moveagain { margin-left:145px; }

	 fieldset p { margin:0; padding:0; margin-top:5px; }
      </style>
   </head>   
   <body>
      <fieldset>
        <legend>General Information</legend>
               <p><label for="firstName">First Name</label>
                <label for="lastName" class="move">Last Name</label></p>
               <p>
                 <input id="firstName" name="firstName" type="text" />
                 <input id="lastName" name="lastName" type="text" />
        </p>

        <p><label for="address">Address</label></p>
               <p><input id="address" name="address" type="text" /></p>

               <p><label for="state">State</label>
               <label for="city" class="moveagain">City</label>
               <label for="zip" class="moveagain">Zip</label></p>
               <input id="state" name="state" type="text" />
             
               <input id="city" name="city" type="text" />
              
               <input id="zip" name="zip" type="text" />

      </fieldset>         
   </body>
</html>

hostfreak · September 14, 2009

Hey saltedm8 thanks for the response. Yes, that does work however it doesn't quite line up the label to the top-left of the input. I know I can adjust the px, but would that mean every input would be required to be a certain width? It would also effect it depending on the amount of text:

Say in my example, State was actually "State of the union". It would move City and Zip over significantly therefore not lining up.

I try to avoid set px when possible. Not sure if there is any other way? Thanks again.

saltedm8 · September 14, 2009

nothing wrong with using px... if you wanted to set the text individually just create a class for each input and change the margin-left in each class... as it is I have used 2 classes, one for the top and one for the bottom 3... just needs a little play thats all

hostfreak · September 14, 2009

That just seems like too much work lol, I'm sure there has to be a simpler solution? I will have a lot of different forms generated by a form class and to have to make a css class for each input seems crazy. I appreciate your help.

saltedm8 · September 14, 2009

I know it seem allot of code, but its really not... you are right to try to avoid un-necessary markup but this is the only was I can see that it can be done

hostfreak · September 14, 2009

After playing around I came up with a solution that works the way I want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
      <title>Test</title>
      <style type="text/css">         
         fieldset
         {
		border: solid 1px #d5d5d5;
            background-color: #e9e8e3;
            margin-top: 12px;
         }
         ol
         {
            list-style-type: none;
         }
         li
         {
		clear: both;
         }
         label
         {
		width: 80px;
		text-align: left;
		float: left;
		margin-top: -16px;
         }
         input[type=text]
         {
		float: left;
            font-family: Verdana,"Sans-serif";
            size: 8pt;
            border: solid 1px #d5d5d5;
            margin: 6px 12px 20px -80px;
         }
      </style>
   </head>   
   <body>
      <fieldset>
         <legend>General Information</legend>
         <ol>
            <li>
               <label for="firstName">First Name</label>
               <input id="firstName" name="firstName" type="text" />
               <label for="lastName">Last Name</label>
               <input id="lastName" name="lastName" type="text" />
            </li>
            <li>
               <label for="address">Address</label>
               <input id="address" name="address" type="text" />
            </li>
            <li>
               <label for="state">State</label>
               <input id="state" name="state" type="text" />
               <label for="city">City</label>
               <input id="city" name="city" type="text" />
               <label for="zip">Zip</label>
               <input id="zip" name="zip" type="text" />
            </li>
         </ol>
      </fieldset>         
   </body>
</html>

Thanks for the help.

saltedm8 · September 14, 2009

cool, sweet... nice one

Sign In

[SOLVED] Form: Put label above input; some labels/inputs next to each other

Recommended Posts

hostfreak

Link to comment

Share on other sites

saltedm8

Link to comment

Share on other sites

hostfreak

Link to comment

Share on other sites

saltedm8

Link to comment

Share on other sites

hostfreak

Link to comment

Share on other sites

saltedm8

Link to comment

Share on other sites

hostfreak

Link to comment

Share on other sites

saltedm8

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information