SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)

    Best practice:Form Headerer ?

    Let say you had a form for ...whatever. For example a poll.. whose title is important enough to be a header... "Whatcha doing for Xmas?" and some radio buttons and submit. Would you put the Hx tag inside the form tag or outside ? I would like to know what is considered best practice: <hx> </hx> <form></form> or <form><hx> </hx> </form>.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I would follow the same concept as how the <fieldset> element works personally, you have the legend then the form which makes it clear and easy to understand.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    so the does the fieldset represent the form tag ( the hx is within the form)?? or the Hx outside "then the form"? sorry I was kinda lost in your semantics.. no pun.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I was just referencing the <fieldset> element as a reference for the <legend> tag, basically in a semantic sense both of the examples below should yield the same SEO ouput since they are representing the content afterwards.

    HTML Code:
    <fieldset>
        <legend>Title</legend>
        <form></form>
    </fieldset>
    HTML Code:
    <hx>Title</hx>
    <form></form>
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The advantage of the Legend element (within a fieldset) is that the text is then explicitly associated with the form, too. But the code should be like this:

    Code:
    <form>
        <fieldset>
        <legend>Title</legend>
        ... other form elements ...
        </fieldset>
    </form>

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Well my conundrum comes from the fact That in some cases I could already have fieldsets with legends.. or that the content may seem headline like.... Although for a poll question I can see how it would fit semantically to use LEGEND.

    I suppose the feel I am getting thus far is that if a header must be involved it is best to put it outside the form tag.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I put *EVERYTHING* that is not a form control *outside* the form. Every time (well, not counting when I've been told to add "help text", which I then either stuff inside a form control or use ARIA to associate it). Users with a UA that has a "Forms Mode" will be getting only form controls inside the form, except ARIA-associated stuff.

    I put the header outside (and above), I put the instructions outside (above! I hate when the instructions are at the bottom, I don't see that until *after* I've already filled everything in), and legend-text (like "fields marked with * are required").
    *edit by "legend-text" I mean like a map legend, not the <legend> element

    Only on simple, dedicated form pages would I consider letting the (lone) legend do that work (often if it's redundant I'll just hide the legend rather than not have a header).

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    In this specific case the heading would typically belong outside of the form since you are introducing the form.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Yeah, makes sense. I was torn because I saw an opportunity to streamline the css and utilize an already existing container. BUT at the same time felt exactly the same way as what Mallory expressed. So I decided to do what any good leader would do and ask what everyone else was doing

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Haha, and as I come back to this thread, I'm currently battling a long, complicated single form who happens to have craploads of plain text inside it. It's sort of an output-like content, but the <output> tag is not correct for this case.

    Now going to have to break my head trying to figure out how to present all this content inside a form (basically people are adding and changing bits of text; their set text is displayed later, and there's descriptions of what these types of text are... and there simply aren't correct form controls for this text. #doomed


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
  •