Coding Valid forms?

dresden_phoenix · January 14, 2011, 5:24am

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:


          <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!

Ijj · January 14, 2011, 7:09am

Ok, if I understand you correctly now, as an example, maybe you could do something like:

<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.

system · January 14, 2011, 5:42am

Stop putting divs, spans, until you need them. There is no reason for you to have divs in there yet.

Put type for input.

          <!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.

felgall · January 14, 2011, 5:47am

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.

Ijj · January 14, 2011, 5:48am

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.

system · January 14, 2011, 5:51am

Off Topic:

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

dresden_phoenix · January 14, 2011, 5:54am

I am just trying to understand the rules of VALID forms.
Falgall/ Ijj are you saying the legend tag is mandatory?

Ijj · January 14, 2011, 5:56am

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.

dresden_phoenix · January 14, 2011, 6:01am

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?

Ijj · January 14, 2011, 6:07am

HTML5: http://dev.w3.org/html5/spec/forms.html#the-fieldset-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.

<form enctype="multipart/form-data" action="this.html" method="GET">
   <label>Name: <input name="Name"></label>
   <label>Last Name: <input name="lastName"></label>
</form>

dresden_phoenix · January 14, 2011, 6:11am

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…

Ijj · January 14, 2011, 6:16am

This can still be accomplished.

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

If that’s the case and you’re using multiple fieldsets then, yeah, go for it.

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.

dresden_phoenix · January 14, 2011, 6:23am

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?


       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?

Ijj · January 14, 2011, 6:29am

Well, you could do:

label { display: block; text-align: right; }
label > input { float: left; width: 50%; }

It represents a set of related form controls.

dresden_phoenix · January 14, 2011, 6:32am

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…

system · January 14, 2011, 7:44am

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/sgmltut.html#h-3.3.3.1.

For forms, you have this content model:

[INDENT][/INDENT]<!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:

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.

 <!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>

<!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:

 <!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.

xhtmlcoder · January 14, 2011, 3:12pm

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.

dresden_phoenix · January 14, 2011, 7:36pm

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

system · January 14, 2011, 8:22pm

No problem. If you need us to linger more over the specs for forms, just say so

xhtmlcoder · January 14, 2011, 8:55pm

It’s a good choice and ‘normative’.

Topic		Replies	Views
Fancy Form Design Using CSS HTML & CSS	118	4012	July 23, 2010
Do I need all of this in <form>? HTML & CSS	47	1832	October 8, 2014
Question about Forms HTML & CSS	36	2038	November 4, 2010
Setting up Checkout form HTML & CSS	14	1477	September 21, 2020
Right margin HTML & CSS	14	4375	November 23, 2010

Coding Valid forms?

Related topics