SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Form Labels and Floats

    Hi guys,

    I have the following form:
    HTML Code:
    <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:
    HTML Code:
    #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

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,457
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    form tag

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

  3. #3
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    # 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

  4. #4
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •