Form Labels and Floats

[J Windebank]

Hi guys,

I have the following form:

<form id="frmCreatePage" name="frmCreatePage" method="post" action="admin.php?action=create">

  <label for="txtName">Name</label>
  <input id="txtName" name="txtName" />
  <br />

  <label for="cbxType">Type</label>
  <select id="cbxType" name="cbxType">
    <option value="information" selected="selected">Information</option>
    <option value="object">Object</option>
    <option value="element">Element</option>
  </select>
  <br />

  <label for="txtParent">Parent</label>
  <input id="txtParent" name="txtParent" />
  <button onclick="toggleParentSelector(); return false;">+</button>
  <br />

This is giving me validation errors, and I believe it is due to the label being before the form object it is referencing. Is this the case? If so, does anybody know how I can work around this to get the same effect please?

My CSS:

#frmCreatePage label, #frmCreatePage 
{
  display: block;
  width: 500px;
  float: left;
  margin-bottom: 15px;
  padding: 2px;
  text-align: left;
}

#frmCreatePage select
{
  display: block;
  width: 508px;
  float: left;
  margin-bottom: 15px;
  padding: 2px;
}

#frmCreatePage button
{
  margin-left: 10px;
}

#frmCreatePage label
{
  text-align: right;
  width: 150px;
  padding-right: 20px;
  font-weight: bold;
}

#frmCreatePage br
{
  clear: left;
}

Thanks,
Jordan

[Mittineague]

Your snippet is missing the closing </form> tag. What error is the validator giving you?

[J Windebank]

Oh sorry Mittineague, my actual form contains a lot more similar input boxes, so I just cut it off. The closing form tag is in place.

The error the validator is giving me is:

# Error  Line 205 column 30: document type does not allow element "label" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

          <label for="txtName">Name</label>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

✉
# Error Line 206 column 45: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

        	<input id="txtName" name="txtName" /><br />

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

✉
# Error Line 206 column 51: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

        	<input id="txtName" name="txtName" /><br />

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

I figured this must have been the ordering but I am starting to think there is more of a problem here.

Regards,
Jordan

[J Windebank]

Hmmmmm, it seems I had to have a Div element inside my form for the markup to be valid. I have never seen this mentioned anywhere before, does anybody have a link to any information stating that form elements need a container?

Regards,
Jordan

[Tyssen]

I can't find where it states it explicitly, but it seems like you need to use a block level element inside the form (doesn't matter what it is) when using labels: http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1