SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML for Education section of Resume/CV site

    Can anybody advise if I've marked-up the below code correctly and semantically?

    I've been playing with this for too long and could use some fresh eyes to help refocus.

    Thanks in advance.
    Code HTML4Strict:
        <form>
            <ol>
                <li>
                	<fieldset><legend>Institution</legend>
                    <ol>
                        <li><label>Name:</label><input type="text" /></li>
                        <li><label>Duration:</label><input type="text" /></li>
                        <li>
                        	<ol>
                		     <li>
                                    <fieldset><legend>Qualifications</legend>
                                        <ol>
                                            <li><input type="text" /></li>
                                            	<li>
                                                    <fieldset><legend>Subjects</legend>
                                                        <ol>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                        </ol>
                                                    </fieldset>
                                		   </li>
                                        </ol>
                                    </fieldset>
                                </li>
                		    <li>
                                    <fieldset><legend>Qualifications</legend>
                                        <ol>
                                            <li><input type="text" /></li>
                                            	<li>
                                                    <fieldset><legend>Subjects</legend>
                                                        <ol>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                        </ol>
                                                    </fieldset>
                                				</li>
                                        </ol>
                                    </fieldset>
                                </li>
                				<li>
                                    <fieldset><legend>Qualifications</legend>
                                        <ol>
                                            <li><input type="text" /></li>
                                            	<li>
                                                    <fieldset><legend>Subjects</legend>
                                                        <ol>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                            <li><input type="text" /></li>
                                                        </ol>
                                                    </fieldset>
                                		</li>
                                        </ol>
                                    </fieldset>
                                </li>
                        	</ol>
                        </li>
                    </ol>
                    </fieldset>
                </li>
            </ol>
        </form>

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,262
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    The thing that strikes me right off is the use of nested lists. This might be OK, but I have never seen it before. If you are using lists to style the form, IMHO it would be better to keep the form "clean" and style it using CSS.

    Is there a valid reason for using nested lists?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    The thing that strikes me right off is the use of nested lists. This might be OK, but I have never seen it before. If you are using lists to style the form, IMHO it would be better to keep the form "clean" and style it using CSS.

    Is there a valid reason for using nested lists?
    Thanks for replying.

    The only reason for the nested lists is the semantics of subgrouping form elements.

    There is a Sitepoint article I used to help design this form that uses nested lists to subgroup form elements:

    http://www.sitepoint.com/article/fan...-design-css/6/

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Alpha1980 View Post
    The only reason for the nested lists is the semantics of subgrouping form elements.
    That's what the fieldsets are for...

    Quote Originally Posted by Alpha1980 View Post
    There is a Sitepoint article I used to help design this form that uses nested lists to subgroup form elements:
    Seemingly for styling purposes.
    Simon Pieters

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    Seemingly for styling purposes.
    The nested-lists are semantic too though, aren't they?

    Surely nobody would use lists for styling if they weren't also semantic.

  6. #6
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can validate code at validator.w3.org

    Also just off the bat first thing I noticed was

    <form>

    The form tag requires an action and You should use either a POST or a GET method.

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,262
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    According to the article http://www.sitepoint.com/print/fancy-form-design-css/
    However, you should see one glaring addition: inside the fieldset [64] elements is an ordered list whose list items wrap around each of the form element/label pairs that we're using.

    The reason for this addition? We need some extra markup in order to allow for all of the styling that we'll do to our forms in this chapter. There are just not enough styling hooks in the standard fieldset-label structure to allow us to provide robust borders, background colors, and column alignment.

    There are a number of superfluous elements that we could add to the form that would grant us the extra styling hooks. We could move the form elements inside their label [65] elements and wrap the label [66] text in a span [67], or wrap a div [68] around each form element/label pair. However, none of those choices would really contribute anything to the markup other than its presence.

    The beauty of using an ordered list is that it adds an extra level of semantics to the structure of the form, and also makes the form display quite well in the absence of styles (say, on legacy browsers such as Netscape 4, or even simple mobile devices).
    .......
    If you're vehemently opposed to the inclusion of an ordered list inside your form.markup, you can easily substitute it for some other wrapper element; all you need is one extra container around each form element/label pair in order to style your forms any way you want.
    So I guess there's nothing that wrong with using lists to get a style that may be difficult if not impossible to without them. But if your form isn't going to be "fancy" you don't need them. I'm not sure I agree with the statement that you "need an extra container around them". I get the feeling that it's just easier to get satisfactory cross-browser "fancy" styling by using them. I'll admit styling forms can be very frustrating, but then again, I'm not a CSS guru. I don't know if I'd worry about Netscape 4, but I guess if you want to have some semblance of styling in non-style supporting mobile devices, then this technique has merit. As long as it validates it should be OK.


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
  •