PDA

View Full Version : adding <label> moves my textbox



runnerjp
Mar 14th, 2009, 07:28 PM
for some reason when i add the <label> tags to Distance:&nbsp;<input type="text" name="userDistance" size="10" class="timeData" readonly /> it makes this box appear under the drop down menu i have above/next to it but i want it to appear next to it... how can i fix this ??

what it does = http://www.runningprofiles.com/test3.php
what i want = http://www.runningprofiles.com/test2.php

here is the form on the one that works

<select name="distance" onchange="setDistance(this.value)">
<option value="#|Distance">Select the distance</option>
<option value='withoutMinutes|100m' >100m</option>
<option value='withoutMinutes|200m'>200m</option>
<option value='withoutMinutes|400m'>400m</option>
<option value='withoutHours|800m'>800m</option>
<option value='withoutHours|1500m'>1500m</option>
<option value='withoutHours|3000m'>3000m</option>
<option value='withoutHours|5000m'>5000m</option>
<option value='withoutHours|10,000m'>10,000m</option>
<option value='withoutHours|5k Road'>5k Road</option>
<option value='withoutHours|10k Road'>10k Road</option>
<option value='withHours|H Marathon'>H Marathon</option>
<option value='withHours|Marathon'>Marathon</option>
<option value='withoutHours|3k S/Chase'>3k S/Chase</option>
<option value='withoutMinutes|110m Hurdles'>110m Hurdles</option>
<option value='withoutMinutes|400m Hurdles'>400m Hurdles</option>
<option value='withoutMinutes|60m (I)'>60m (I)</option>
<option value='withoutMinutes|60m Hurdles'>60m Hurdles</option>
</select>

<label>Distance:&nbsp;<input type="text" name="userDistance" size="10" class="timeData" readonly></label>

and here is the one on the one the doesnt


<form id="submit">

<p align="center">Add a new personal best (Enter pb as 2:01.1 or 13:25.3 ect): oh any your id is <?php echo $id;?>
</p>
</p>
<p align="center">

<select name="distance" size="1" onchange="setDistance(this.value)">
<option value="#|Distance">Select the distance</option>
<option value='withoutMinutes|100m' >100m</option>
<option value='withoutMinutes|200m'>200m</option>
<option value='withoutMinutes|400m'>400m</option>
<option value='withoutHours|800m'>800m</option>
<option value='withoutHours|1500m'>1500m</option>
<option value='withoutHours|3000m'>3000m</option>
<option value='withoutHours|5000m'>5000m</option>
<option value='withoutHours|10,000m'>10,000m</option>
<option value='withoutHours|5k Road'>5k Road</option>
<option value='withoutHours|10k Road'>10k Road</option>
<option value='withHours|H Marathon'>H Marathon</option>
<option value='withHours|Marathon'>Marathon</option>
<option value='withoutHours|3k S/Chase'>3k S/Chase</option>
<option value='withoutMinutes|110m Hurdles'>110m Hurdles</option>
<option value='withoutMinutes|400m Hurdles'>400m Hurdles</option>
<option value='withoutMinutes|60m (I)'>60m (I)</option>
<option value='withoutMinutes|60m Hurdles'>60m Hurdles</option>
</select>
<label> Distance:&nbsp;<input type="text" name="userDistance" size="10" class="timeData" readonly /></label>
</p>
<p align="center">



<input type="button" name="Submit" value="OK" onClick="javascript: formget(this.form, 'http://www.runningprofiles.com/do5.php');">
</p>
<div align="center">
<div id="output" style="color: blue;"> </div> </div>
</form>
</fieldset>

i cant see any reaosns why it does not work ??

macwiz
Mar 14th, 2009, 09:05 PM
Don't wrap the <input> tag inside the <label> tag. It should be:


<label>Distance</label> <input type="text" name="userDistance" size="10" class="timeData" readonly />


Take a look at the W3School's information on the HTML label tag (http://www.w3schools.com/tags/tag_label.asp).

runnerjp
Mar 14th, 2009, 09:58 PM
i did that yet still repositions the labeled area :S

Arbitrator
Mar 15th, 2009, 09:54 AM
for some reason when i add the <label> tags to Distance:&nbsp;<input type="text" name="userDistance" size="10" class="timeData" readonly /> it makes this box appear under the drop down menu i have above/next to it but i want it to appear next to it... how can i fix this ??

what it does = http://www.runningprofiles.com/test3.php
what i want = http://www.runningprofiles.com/test2.phpYou have a number of problems that you need to address:


Neither of the two linked documents are written in conforming HTML 4.01. You should really start by fixing that problem. I've linked to error reports for each of your pages:


http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.runningprofiles.com%2Ftest2.php
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.runningprofiles.com%2Ftest3.php

Because of the previous problem, your documents are being rendered in Quirks Mode where they can't be reliably troubleshooted.
You didn't specify what browser (with version number) that the issue is occurring in.

Those things said, in the first linked document, everything should be on one line since select and label are both inline elements. If you want the label element to move to the next line, apply the CSS declaration display: block to one or both elements.

In the second example, i.e., "what [you] want", I'm not certain why Firefox 3.0, Opera 9.6, or Windows Internet Explorer 7.0 are giving the renderings that they are. The only browser that seems to render your code correctly (at a glance) is Safari 3.2 where the floated label appears on the same line and to the left of the two form control elements.


Don't wrap the <input> tag inside the <label> tag. It should be:


<label>Distance</label> <input type="text" name="userDistance" size="10" class="timeData" readonly />


Take a look at the W3School's information on the HTML label tag (http://www.w3schools.com/tags/tag_label.asp).Wrapping an input element inside a label element is perfectly fine as far as the HTML 4.01 specification is concerned.

When you don't do that though, you need use the for attribute to associate the label with its relevant form control. And, in order to do that, you need to have an id attribute on that form control to reference for the association. Your code is missing both.

Additionally, in XML (since you're using XHTML syntax), attribute minimization is not permitted; you have to expand readonly to readonly="readonly".

Note that that W3Schools reference leaves information out about implicit label-form control association (i.e., wrapping one within the other) and uses an invalid code example.

abduraooft
Mar 15th, 2009, 01:20 PM
Note that that W3Schools reference leaves information out about implicit label-form control association (i.e., wrapping one within the other) and uses an invalid code example. Yes, it's worth to look the ALA article http://www.alistapart.com/articles/prettyaccessibleforms