SitePoint Sponsor

User Tag List

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

    Coding Valid forms???

    Ok, I thought I had the hang of HMTL forms. I did, that is , until I decided to try the WC3 validator service. Now am just confused about EVERYTHING.

    For starters, I thought forms could contain elements, just like DIVs as such any element was valid unless you did something stupid like putting a block element within an inline element. In another words... I should be able to place Ps and DIVs within FIELDSETs, right?

    Speaking of FIELDSETs... I thought LEGENDs were optional.

    for example, this INCREDIBLY SIMPLE form still produces 3 errors:
    Code:
              <form enctype="multipart/form-data" action="this.html" method="GET" name="formes">
              	<fieldset >
                             <div class="side">
                        	    <label for="name" >Name: </label>
                                 <input id="Name" name="Name">
                             </div>
                             <div class="side">
                        	   <label for="lastName">Last Name: </label>
                               <input id="lastName" name="lastName">
                             </div>
                   </fieldset>
              </form>
    2(two) of ("document type does not allow element 'DIV'")
    and 1(one) of ("end tag for 'FIELDSET' which is not finished)...


    am just confused.. I can see the fieldset AND ALL TAGS WITHIN IT are obviously closed... and again I have seen FORMS contain TABLES! why woudn't DIVs, which carry no semantic meaning, not be allowed...


    Any insight would be greatly appreciated!

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stop putting divs, spans, until you need them. There is no reason for you to have divs in there yet.

    Put type for input.


    Code:
              <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title></title></head>
    <body>
    <form action="this.html" method="POST" name="formes">
              	<fieldset>
                         <legend>Personal data</legend>
                              <div>
                        	    <label for="name" >Name: </label>
                                 <input id="Name" name="Name" type="text">
                               </div>
                              <div>
                        	   <label for="lastName">Last Name: </label>
                               <input id="lastName" name="lastName" type="text">
                               </div>
                   </fieldset>
              </form>
    </body></html>
    It's funny you think divs are OK for structure in your html, but not fieldsets. Which are precisely for adding structure in your forms.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You are missing the <legend></legend> tags immediately after the <fieldset> tag. You can't have a div tag as the first tag in a fieldset.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast Ijj's Avatar
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's saying the div isn't allowed because according to the html4 dtd, legend must be the first element of a fieldset. This is also why it's saying your fieldset isn't closed. You might be thinking of html5, where <legend> is completely optional.

    If you don't want to use a legend and you're only using a single fieldset to wrap your entire form's controls, I wouldn't bother using a fieldset. I would instead recommend validating your page as html5. The content models are a lot more logical than html4. Of course, I know there are many on this forum who would be eager to disagree with me there.

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    ^ No. It's the other way around. You are eager to disagree with most on this forum

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am just trying to understand the rules of VALID forms.
    Falgall/ Ijj are you saying the legend tag is mandatory?

  7. #7
    SitePoint Enthusiast Ijj's Avatar
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Off Topic:

    ^ No. It's the other way around. You are eager to disagree with most on this forum
    Off Topic:

    Well, I wouldn't disagree with that.


    @dresden, it's mandatory if you're validating your page against the html4 dtd. It's optional if you're using html5. The fieldset is optional as well because html5 allows any kind of flow content in forms.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Noonope,

    I am trying to add Structure with FIELDSETS, please keep in mind I am truncating my examples for brevity. But lets say the PART of the form I have shown is a fieldset for Name info... I would have another for contact info ( email, address, phone, etc) and another FIELDSET for whatever else.. and so forth. It somewhat reasonable, that I may want to be able to group labels and inputs together ( w/o nesting them inside each other)... thus it stands to reason to use DIVs.. or so I would have thought.


    Anyway, so there is NO way to avoid the Legend tag?

  9. #9
    SitePoint Enthusiast Ijj's Avatar
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Noonope,

    I am trying to add Structure with FIELDSETS, please keep in mind I am truncating my examples for brevity. But lets say the PART of the form I have shown is a fieldset for Name info... I would have another for contact info ( email, address, phone, etc) and another FIELDSET for whatever else.. and so forth. It somewhat reasonable, that I may want to be able to group labels and inputs together ( w/o nesting them inside each other)... thus it stands to reason to use DIVs.. or so I would have thought.


    Anyway, so there is NO way to avoid the Legend tag?
    HTML5: http://dev.w3.org/html5/spec/forms.h...eldset-element

    This is how I would do it in html5. I would drop the fieldset altogether because you're not using a legend anyway, and I would drop the divs. If you need wrappers, you can just wrap the inputs with the labels - it's a lot cleaner too.
    Code:
    <form enctype="multipart/form-data" action="this.html" method="GET">
       <label>Name: <input name="Name"></label>
       <label>Last Name: <input name="lastName"></label>
    </form>

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I used input and labvels outside each other, because it becomes difficult to style the other way around lining up the text to the right, or causing the text to display ABOVE the field.. etc...

    as noonnope was saying i would want to keep the fieldsets to separate different types of info in the form. I mean , I know I can always use legend{display:none} .. but it just seemed redundant to use CSS to kill something I never wanted displayed ever..

  11. #11
    SitePoint Enthusiast Ijj's Avatar
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I used input and labvels outside each other, because it becomes difficult to style the other way around lining up the text to the right, or causing the text to display ABOVE the field.. etc...
    This can still be accomplished.

    Code:
    label { display: block; }
    label > input { display: block; } /* the text will now be above the text input */
    Try to avoid making markup decisions based on presentational needs as much as possible. I know I technically made a presentational decision for you just now by telling you to use the labels as "wrappers", but that also happens to coincide with best markup practices.

    edit: didn't see you edited your post

    Quote Originally Posted by dresden_phoenix View Post
    as noonnope was saying i would want to keep the fieldsets to separate different types of info in the form.
    If that's the case and you're using multiple fieldsets then, yeah, go for it.

    Quote Originally Posted by dresden_phoenix View Post
    I mean , I know I can always use legend{display:none} .. but it just seemed redundant to use CSS to kill something I never wanted displayed ever..
    It's not redundant. The legends are serving a semantic purpose if you have multiple fieldsets in your form. However, I tend to think that a single fieldset wrapping the entire form's contents is useless, which is why I took out the fieldset entirely in my example.

    Like I said, try not to make markup decisions based on presentation. It might be hard to get used to, but it's perfectly okay to hide something with CSS.

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I try, but presentation versatility .. when it doesnt kill context or semantic must be taken into account.. other wise why design an aesthetic page at all??


    how would you go about having the input be 50% of the width, and the text be right alinegned then?

    Code:
           Name:________________________
    Last Name: _______________________
          Phone: _______________________
    ?

    BTW... strictly speaking, what does field set denote then? I thought it was an ARBITRARY sectioning of data... IN OTHER WORDS, I could have

    --FIELDSET--
    ID info inputs such as : Name, Last Name
    --FIELDSET--
    Contact info inputs such as : Phone, Adress, etc
    --FIELDSET--
    Opinon info inputs such as : Title and Comment

    but you could also group them like this (w/o changing the actual fields)

    --FIELDSET--
    Personal info inputs such as : Name, Last Name ,Phone, Address, etc
    --FIELDSET--
    Opinon info inputs such as : Title and Comment

    right?

  13. #13
    SitePoint Enthusiast Ijj's Avatar
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    how would you go about having the input be 50% of the width, and the text be right alinegned then?
    Well, you could do:
    Code:
    label { display: block; text-align: right; }
    label > input { float: left; width: 50%; }
    Quote Originally Posted by dresden_phoenix View Post
    BTW... strictly speaking, what does field set denote then?
    It represents a set of related form controls.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks, but I guess I wasnt clear on the style issue.

    I meant to say each label/input pair is supped to be 50% of the form width. The width of the input is supposed to either adjust to the remaining space or at least be equal within both fields: something like:


    ------------------------------------------------form------------------------------------------------

    name: ________________________ Last name: ________________________

    BTW, that mean I was right in a sense... if you have a group of text type inputs, grouping is somewhat arbitrary. Could assume something s"personal info" or "ID info" and "Contact info" and so forth...

  15. #15
    SitePoint Enthusiast Ijj's Avatar
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Thanks, but I guess I wasnt clear on the style issue.

    I meant to say each label/input pair is supped to be 50% of the form width. The width of the input is supposed to either adjust to the remaining space or at least be equal within both fields: something like:
    Ok, if I understand you correctly now, as an example, maybe you could do something like:
    Code:
    <style>
    	form { width: 600px; } /* example width */
    	label { width: 50%; float: left; }
    	input { width: 50%; float: right; margin-right: 20px; }
    </style>
    <form action="" method="GET">
    	<label>Name: <input type="text"/></label>
    	<label>Last Name: <input type="text"/></label>
    	<label>Another Thing: <input type="text"/></label>
    	<label>Other thing: <input type="text"/></label>
    </form>
    note: the margin-right is on the input to give it some space between the next label's text.

  16. #16
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For you to understand the right way to build a form mark-up, you need to read the specs: http://www.w3.org/TR/html401/ and interpret them according to content model definitions: http://www.w3.org/TR/html401/intro/s...html#h-3.3.3.1.


    For forms, you have this content model:

    <!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

    which is to say:
    • the element form has mandatory start and ends tags: <!ELEMENT FORM - -
    • it must contain (it can have as direct descendents) at least one of the two elements from a group of elements: (%block;|SCRIPT)+
    • it cannot contain another form: -(FORM)




    Now, looking at the &block definition:

    <!ENTITY % block
    "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
    BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

    you will notice you can have both div and fieldset as direct descendants for the form element (div | fieldset). But since you are in a form, draw your own conclusion on which one is more suitable, looking at those two examples below, as they are, no CSS, no JS. Aside, we see why they needed to include the exception for other form elements to appear inside another form, since the form element is listed also there, as a block.


    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title></title></head><body>
    <FORM action="http://somesite.com/prog/adduser" method="post">
        <div>
        First name: <INPUT type="text" name="firstname"><BR>
        Last name: <INPUT type="text" name="lastname"><BR>
        email: <INPUT type="text" name="email"><BR>
        <INPUT type="radio" name="sex" value="Male"> Male<BR>
        <INPUT type="radio" name="sex" value="Female"> Female<BR>
        <INPUT type="submit" value="Send"> <INPUT type="reset">
        </div>
     </FORM>
    </body></html>
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title></title></head><body>
    <FORM action="http://somesite.com/prog/adduser" method="post">
        <fieldset>
        <legend>Personal data</legend>
        First name: <INPUT type="text" name="firstname"><BR>
        Last name: <INPUT type="text" name="lastname"><BR>
        email: <INPUT type="text" name="email"><BR>
        <INPUT type="radio" name="sex" value="Male"> Male<BR>
        <INPUT type="radio" name="sex" value="Female"> Female<BR>
        <INPUT type="submit" value="Send"> <INPUT type="reset">
        </fieldset>
     </FORM>
    </body></html>

    Finally, a mix-up of the two:
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title></title></head><body>
    <FORM action="http://somesite.com/prog/adduser" method="post">
        <fieldset>
        <legend>Personal data</legend>
        First name: <INPUT type="text" name="firstname"><BR>
        Last name: <INPUT type="text" name="lastname"><BR>
        email: <INPUT type="text" name="email"><BR>
        <INPUT type="radio" name="sex" value="Male"> Male<BR>
        <INPUT type="radio" name="sex" value="Female"> Female<BR>
        <INPUT type="submit" value="Send"> <INPUT type="reset">
        </fieldset>
    
        <div>
        First name: <INPUT type="text" name="firstname"><BR>
        Last name: <INPUT type="text" name="lastname"><BR>
        email: <INPUT type="text" name="email"><BR>
        <INPUT type="radio" name="sex" value="Male"> Male<BR>
        <INPUT type="radio" name="sex" value="Female"> Female<BR>
        <INPUT type="submit" value="Send"> <INPUT type="reset">
        </div>
     </FORM>
    </body></html>
    Let's start with this and see if you need any more debate. We'll proceed with deeper fieldset explanation after all is clear here.

  17. #17
    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)
    However, if you were using XHTML 1.0 markup you obviously wouldn't necessarily need a LEGEND either in the presence of a FIELDSET. HTML5 is still non normative I believe.

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Noonnope:

    Thank you. I think I see. Reading the specs found here: http://www.w3.org/TR/html401/interact/forms.html. Summarizing what I have learned, I guess I just didnt understand that if I used FIELDSET I would NEED LEGEND to be the first tag in it ( when using in HTML 4.01, before anyone starts yelling) That really threw me for a loop. Thanks again

  19. #19
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. If you need us to linger more over the specs for forms, just say so

  20. #20
    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)
    Quote Originally Posted by dresden_phoenix
    [...]when using in html 4.01, before anyone starts yelling...
    It's a good choice and 'normative'.

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    when using in HTML 4.01, before anyone starts yelling
    Well it is the latest standard.

    It will probably be several more years before HTML5 becomes a standard and by then a lot of the proposed changes will be shown to not work in the way that was expected and they will either be changed to something different or removed.

    After all IE5 supported the CSS2 proposal at the time it was released and by the time CSS2 became a standard there had been massive changes made to it - the cause of all the CSS problems with IE5/6/7 today - too many people creating live pages using a preliminary draft rather than just testing with it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •