Simple Fields Alignment

[weee]

How can I have this two fields next to each other?

<form action="test.asp" method="post">
<fieldset style="border: #26a solid 1px; margin-right: 20px; padding-bottom: 10px;">
<legend style="color: #BD3242; margin: 0px 2px; padding: 2px 4px;">Details</legend>

		<label for="firstName">First Name</label><br/>
		<input type="text" name="firstName" id="firstName" />

		<label for="lastName">Last Name</label><br/>
		<input type="text" name="lastName" id="lastName" />

		<input type="submit" name="submit" id="submit" value="Send />
</fieldset>
</form>

Thanks!

[mikepurvis]

Here's an example: http://uwmike.com/layout/forms/names.html

I've always been a fan of wrapping your <label> around the corresponding <input>, rather than having for="" all over the place:

<fieldset class="names clearfix">
  <label>
    <span>First Name:</span>
    <input type="text" name="firstName" id="firstName"/>
  </label>
  <label>
    <span>Last Name:</span>
    <input type="text" name="lastName" id="lastName"/>
  </label>
</fieldset>

This kind of approach is terrific, because it means that if you ever want to go to a traditional form approach of labels-left, fields-right, you just float all your <spans> and assign them a width of 50%.

[ray326]

The separated labels work the same way without the additional mark up, though. That gives me an idea, though, about using the wrapping labels but declare them display:block. I must play.

[weee]

So do I need to keep the spans?

[mikepurvis]

So do I need to keep the spans?

Basically, to have maximum control, I like to have the label, the inputbox, and then a wrapper around the pair. You can do it like this:

<div class="inputwrapper"><label></label><input /></div>

But I think it's classier to use the <label> as the wrapper, since then you don't need to introduce another class-- it's just label span that's known to be the element of the labeltext.

[ray326]

Yes, the more variety in the tags, the more styling fodder for the CSS. Depending on other design considerations, there may be no need for that div class as its "uniqueness" can be refactored up into its containers like the inclosing block or the form itself.

[weee]

It doesn't work for me. You see, I want to have three blocks in one line and each block I can have as many INPUT as I want.

I'm not sure what am I missing here...?

<style type="text/css" media="screen">
label { display: block;}
fieldset {border: #26a solid 1px; margin-right: 20px; padding-bottom: 10px; width: 100%; padding: 7px; margin-top: 5px;}
fieldset label {float: left; width: 100px; padding: 3px 0 3px 0;}
fieldset label span {display: block; padding-bottom: 2px;}
legend {color: #BD3242; margin: 0px 2px 0px 2px; padding: 2px 4px;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>

<fieldset>
<legend>Personal Details</legend>
<label>
<span>First Name:</span>
<input type="text" name="firstName" id="firstName"/>
</label>

<label>
<span>Last Name:</span>
<input type="text" name="lastName" id="lastName"/>
</label>

<label>
<span>First Name:</span>
<input type="text" name="firstName" id="firstName"/>
</label>

<label>
<span>Last Name:</span>
<input type="text" name="lastName" id="lastName"/>
</label>
</fieldset>

Thanks guyz!?

[mikepurvis]

It doesn't work for me. You see, I want to have three blocks in one line and each block I can have as many INPUT as I want.

I don't understand what you want.

If you just want three fields in a row, then you need to set the width of label to 33%. I'm not sure if you're trying to do fixed or liquid, so here's two versions:

http://uwmike.com/layout/forms/weee.php
http://uwmike.com/layout/forms/weee.php?style=fixed

Now, if you're try to do three columns of fields, then each "column" needs to be wrapped in something and floated. (fieldset would be a good choice...)