Forms in XHTML 1.1 »
If you're looking for XHTML 1.1 compatibility, then only minor changes are needed to your default Movable Type templates. I had the most difficulty with the comments form on the individual entry archive.
The first thing that got me was the form itself. The form tags need to be outside of your block - for instance, form, then div. Close your /div, then close the /form. If you don't do this, then the validator won't read your block correctly - it will throw all sorts of errors, mostly having to do with disallowed elements.
It will also make you think that "name" isn't a valid attribute. Indeed, you can see in this reference that name is a valid attribute for the input element. But it has to be inside that block, so get the container tags correct!
The second thing that got me was that name is not a valid attribute for the form element. Change that to "id". Important tip: do not change any other elements from name to id - just leave 'em alone or you'll break something else.
The final piece of the puzzle was the Javascript that handles the setting of the cookie. Because name is not a valid attribute for the form element, the default Javascript code won't work, since it references the form by it's name. Instead, you need to go after the elements in the form by their id instead. The id attribute must be unique in the document, so this should be fine.
I found a piece of code from the Plat that did the job. Here it is in case you're in need.
<script type="text/javascript">
<!--
document.getElementById('email').value = getCookie("mtcmtmail");
document.getElementById('author').value = getCookie("mtcmtauth");
document.getElementById('url').value = getCookie("mtcmthome");
if (getCookie("mtcmtauth")) {
document.getElementById('remember').checked = true;
} else {
document.getElementById('forget').checked = true;
}
//-->
</script>
One note about this code that could trip you up. The "remember" function is looking for an element with an id of "remember". This is a problem because the default id of that element is "bakecookie". I changed that value in the Javascript to "bakecookie" and it seems to work fine.
This reminds me of another potential issue - if you change (or remove) the name value on the radio buttons, they might not work as a team. If the radio buttons do not share the same "name", they won't work in conjunction with one another, so you can't select the "yes" value, which pretty much defeats the purpose of having the whole "remember me" function.
If your form suddenly stops responding on one of the radio buttons, this is the place to check - make sure that all of your "joined" buttons share the same name attribute. They should have different id attributes, but the name should be the same!
So, just change the id of the "remember" function in the code to match the id of the button, and you should be set. Recompile your templates and you should have a functional comments form that validates as XHTML 1.1.
Comments (40)
Google brought me to this post, and it answered my question. Just wanted to say thanks!
Posted by Dave S. on August 11, 2003 12:54 AM
Your information and advice on 'name' vs. 'id' on a 'form' in XHTML 1.0 was welcome. I have not yet tried your suggestions, but I wish to thank you for providing them, since no other Web site, including W3C's "forum" (or whatever) seems to consider the problem worth dealing with. For your information, the components that I am trying to get to work in harmony are:
XHTML 1.0 Strict in a local file;
Mozilla 1.0 running under Windows 98 SE;
Some not too antique version of JavaScript;
A version of TIDY that is dated 2002-01-18
that is known on my system as tidydbg.exe;
The HTML validator at the WDG site.
Posted by Jonathan Paul Hopkins on September 19, 2003 8:10 PM
Howdy,
I came across your website via Google. I just wanted to let you know that Mozilla currently indicates there's an XML validation problem with your web page, so you might want to get that fixed.
Posted by Abiola Lapite on October 14, 2003 6:39 PM
Sorry about that - modifying the way things work a bit and managed to leave a closing tag in there without a corresponding opening one. Should be fixed now. Thanks for the heads-up!
Posted by Chad Everett on October 14, 2003 7:47 PM
You are a good man, and thorough! Cheers for helping out in regions where (as Jonathan mentioned) no-one else seems willing to go. Once step closer to my fully XHTML-compliant site redesign . . .
Posted by Phil Evans on November 14, 2003 10:27 AM
I searched google for xhtml compliant forms and was brought here. See I was having problems validating my contact page which had a form on it. I also did the page in php for field validation and to send mail. Thank you for the info on putting form tags outside of divs cause my whole page is formatted using css and now it validates xhtml1.1
I also had an interesting problem with the xml version declaration, the php page would give an error and would not display anything on my page if xml declaration was at top of page.
If I deleted declaration my css div which was a block would start extending beyond the screen so you would have to scroll to the right to see the rest of my page.
Well I figured I could throw my declaration into a variable and echo it. Thank goodness it worked.
Have you had any problems like that?
Thanks again.
Posted by David Smith on January 11, 2004 12:59 PM
I haven't seen that, but then I don't use PHP on any pages where an XML declaration is required, so perhaps I just haven't run into it. Thanks for the warning!
Posted by Chad Everett on January 12, 2004 9:25 AM
Google search gave me this page and it was quite helpful and time-saving. Thanks for taking the time to provide it!
Posted by Darrell on February 23, 2004 5:22 PM
Praise Google. You saved a lot of my time with this because I was tearing my hair out over the javascript (since I never learnt js).
Thanks!
Posted by Jack on March 11, 2004 9:20 PM
I am taking a test and get confused with what is required for form mailto tags. I know that you will need the action and the method and the enctype. But are these required in xhtml, or is it the action that is a required attribute in xhtml?
Posted by Dessi Bravo on May 15, 2004 4:40 PM
Well, it depends on what you're asking, and that's not clear from the comment. For a form, you'll need an action and a method. You should probably have an ID, but I don't know off the top of my head if it's required for XHTML or not. Mailto, on the other hand, is contained in the href attribute of an anchor (a) tag.
You may have a form-to-mail feature, and in that case the form will have an action that points to the script that does the conversion, and the method will indicate what sort of processing to use. Mailto will likely never enter into the equation.
Posted by Chad Everett on May 15, 2004 5:11 PM
Thanks! (I think...I've not actually implemented your suggestions yet, but the editor is open and waiting for me to start as soon as I click the submit button on this comment.)
If you're open to suggestions, may I contribute that it might be helpful to further explain what you mean by:
"The first thing that got me was the form itself. The form tags need to be outside of your block - for instance, form, then div. Close your /div, then close the /form."
The only difference that I notice between the original MT code and yours is that you have ALL of your form elements inside the inner div block, whereas the original code only has some elements inside, while some of its elements are outside of the div block; so MT closed their /div, then later on - as you suggested - they close their /form. So, at this point, I'm mostly just confused.
Also, this page does not validate XHTML 1.1 - instead it throws the error, "Sorry, I am unable to validate this document because on line 317 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication." The problem, of course, is the trackback data below. Do you know how to prevent characters which would fail to validate from showing up in posts?
Posted by jeff on June 7, 2004 5:45 PM
Thanks for the note Jeff - those Trackbacks will get you! I simply updated the trackback itself to use entities instead of actual characters that were failing. Then I found I had another problem - apparently Movable Type spits out invalid XHTML when it writes comment author links. Don't know how I had missed that. I simply updated the code to not add the target attribute, and now everything looks okay. Thanks again!
Posted by Chad Everett on June 8, 2004 2:44 PM
Re: Comment author links: Do you mean that you edited Context.pm? That's what I did (I took out two references to -target=>'_blank', one in a subroutine for creating author's comments, and one for creating visitor's comments). I wonder if you did something different.
Posted by Jeff on June 10, 2004 8:01 PM
Jeff, that's exactly what I did - edited Context.pm to remove the references to the target=_blank. Hopefully 6A will update the code in the next release so that such steps aren't necessary!
Posted by Chad Everett on June 10, 2004 8:37 PM
jeff-
You say you're confused about the placement (or relation to each other) of the form and div tags and what was changed/why.
In XML all documents must be 'well formed'. If not the browser will typically throw an error, and it will obviously not be valid. My understanding of the term 'well formed' means that all tags which have opened inside of TAG, must close before TAG is allowed to close. All tags which did not open inside of TAG, are not allowed to close inside of TAG.
Here is what you can NOT do:
<div>
<form>
</div>
</form>
As you can see, the div opened outside of the form tag, and then closed INSIDE it, which is a no-no. If you opened outside, it must close outside, likewise for if it opened inside, it must close inside. There may NOT be a single instance of the above rule being broken in a document between ANY tags.
So when he said he had to change his document, he changed it to this:
<div>
<form>
</form>
</div>
The div opens and closes OUTSIDE of the form, likewise the form opens and closes INSIDE the div. This is ok too:
<div>
<form>
<div><p></p></div>
</form>
</div>
Another way to explain it would be to say all tags must close in the exact opposite order that they opened. if there was a tag that opened after it/inside of it, then that tag must close before it is allowed to close.
The only exception to this rule is for elements which are allowed a shorthand version of thier tags, for example:
<br></br> may be written as <br />
<input></input> may be written as as <input />
This is true because these elements effectively 'close' themselves upon opening(or never even open depending on how you look at it).
<div>
<span>
<p><br /></p>
</span>
<div>
<p><a></a></p>
</div>
</div>
That was well formed, but the next one....
<div>
<span>
<p><br /></p>
<div>
</span>
<p><a></a></p>
</div>
</div>
The span will cause an error because it has closed, and has an OPEN div tag inside of it. Just remember, no tag can close until all other tags inside of it have closed first.
Just write the open and close tags for each element at the same time, you'll never have a problem. ex:
<div> </div>
Then:
<div>
<span></span>
</div>
And so on....
It makes perfect sense if think you about it, we are creating a 2D document, not 3D. With only 2 dimensions (L x W), it is impossible to make a tag go through another tag.
Imagine many peices of cardboard on a flat table, different sizes, but all rectangular. Each repesents an element. To stack one on top of another or 'lay' it partially on top of another (like the planks on a wooden rooftop), would be adding a 3rd dimension-we can't do that.
You can put one inside another, but anything else would require cutting one of the sides, which breaks the box and thus breaks the markup language.
Note that layers are not a 3rd dimension, they are a stacking order or things which are infinitely flat. Until we able to set a "depth" attribute, we're 2D and z-index is again, a stacking order, which would actually be of little use if we could specify depth.
I hope that gives everyone a good understanding of it. If the 2D/3D part confused you, ignore it.
Posted by chris on June 23, 2004 2:25 PM
Chris, that was an excellent explanation. Thanks so much for posting it. One other tag that gets me pretty much constantly is the <img> tag. For whatever reason, I always forget to close it. So if you're using this tag in your documents, make sure to use:
<img /> and not <img>
Or you'll cause fits for those browsers trying to process well-formed data!
Posted by Chad Everett on June 24, 2004 8:03 AM
Hi, I've tried changing name to id, but I can't get my XHTML 1.1 page to work when I change it. I'm sure it's a syntax issue - any help would be appreciated :)
<script type="text/javascript" >
<!-- hide
function straightto(x){
if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}
// end hide -->
</script>
<form action="" name="form1">
<p style="text-align: center;">
<select name="jumpmenu" onchange="straightto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option value="index.htm">Go straight to...</option>
<option value="help/help.htm">Help Centre</option>
<option value="faqs.htm">FAQs</option>
<option value="downloads.htm">Downloads</option>
<option value="linktext.htm">Link to us</option>
<option value="about.html">About Us</option>
</select>
</p>
</form>
Posted by Paul on September 18, 2004 5:58 AM
Try using id and name, not just one or the other.
Posted by Chad Everett on September 18, 2004 7:09 AM
Thanks jayseae,
If I try that it still won't validate:
Line 65, column 32: there is no attribute "name"
<form action="" id="form1" name="form1">
Posted by Paul on September 18, 2004 11:02 AM
Okay, may be some confusion here - there is no "name" attribute on the form. Change it to "id". There is, however, a "name" attribute on individual elements of the form. On individual elements, you can use both "name" and "id".
Posted by Chad Everett on September 18, 2004 2:59 PM
Hi, Google brought me to this post too, I've been struggling to find how to validate this page ... http://www.oceania-audio.com/lighting/light_show/index.htm (only to XHTML 1.0 Transitional mind you! and, our site isn't even a Blog!) ... I keep getting "the name and VI delimiter can be omitted from an attribute specification only if SHORTTAG YES is specified" for the 'option selected' tag.
I'm a coding newbie ... so it's all pretty much Double Dutch to me!
Any clues over there?
Cheers
Swami
Posted by Swami on October 7, 2004 7:11 AM
In XHTML, every attribute must have a value. You have an option declaration that contains only the word "selected" (no value):
<option value="index.htm" id="lightshow" selected>
Change this so that "selected" actually has a value:
<option value="index.htm" id="lightshow" selected="1">
You don't have to use "1". You can use "yes" or "selected" or even "thisisdumb". It just needs to contain something.
Posted by Chad Everett on October 8, 2004 9:05 AM
That's brilliant Jayseae, I popped selected="selected" in and of course it now works a treat at the validation coalface.
Thanks so much!
Cheers
Swami
Posted by Swami on October 10, 2004 1:35 PM
I would just like to add some information about using radio buttons and forms. I noted from this website that I should use the id attribute with the form element instead of the name attribute to get XHTML validation. When I did that my JavaScript code for checking which button had been pressed failed to work.
Here is the HTML code:
<form name="HiOrLow" action="">
<p><input type="radio" name="radio_button" value="L" checked="checked" />Low quality MP3 - 32 kbits, 22 kHz, mono</p>
<p><input type="radio" name="radio_button" value="H" />High quality MP3 - 56 kbits, 22 kHz, stereo</p>
</form>
And here is the JavaScript code:
function playSong(fName){
var RadioForm = document.HiOrLow.radio_button[1].checked;
if (document.HiOrLow.radio_button[1].checked){
// High has been clicked
fName = "http://www.mark3music.com/mp3_hi/" + fName;
}
else {
fName = "http://www.mark3music.com/mp3_lo/" + fName;
}
document.Player.filename = fName;
document.Player.play();
}
I presume that I have found a bug in Internet Explorer 6.0. My OS is Win 98.
I hope that this helps someone else.
Best regards,
Mark M.
Posted by Mark on November 25, 2004 5:32 AM
I found this link via Google. Thanks for helping me clean up a custom search form from Feedster. Cheers mate.
Posted by Scott on January 5, 2005 8:18 PM
I'm having a problem accessing the elements (divs)in a form. this is dynamic (xslt) and my dynamic value is passed into the javascript method, but then my getElementsById(id) returns null. I have been trying everything.
Any suggestions would be appreciated.
Javascript code is below, I couldn't copy the whole xsl in this textarea.
function toggle(id) {
alert(id);
var show = document.getElementById(id);
alert("Show: " + show);
with (show.style) {
if ( display == "none" ){
display = ""
} else{
display = "none"
}
}
}
Posted by Craig on January 12, 2005 7:18 PM
thanks, again, like the others, for helping me validate faster!
Posted by ben on February 28, 2005 1:06 PM
yes! i heart google, the internet, and you for writiing such a helpful and needed post. Exactly the information i needed!
you rock
~ Mia
Posted by mia on April 7, 2005 1:43 PM
This helped me solve the problem of setting focus to the first text box in a form. The key was in the getElementById command
By changing the "name" attribute of the form to an "id" attribute, I was able to use the getElementById to set focus to the "yourname" text box.
my form definition contained id="emailform" and my body tag contained document.getElementById('emailform').yourname.focus()
It now valididates perfectly, thanks!
--DH
Posted by David Harris on May 15, 2005 7:59 PM
Great Job! Thanks for your good work. That works fine for the validator. Saved a lot of my time, dude!
Posted by Fusen on June 18, 2005 4:41 PM
Just wanted to say thanks. We're moving to XHTML strict, and most of the web seemed to not cover these little details. You saved me a lot of time.
Posted by Jeff Davis on June 28, 2005 7:14 PM
Thank God for this article. Been struggling for days to get the forms pages XHTML 1.0 strict validated. Works like a charm.
Thanks a mil! -Steven
Posted by Steven on January 12, 2006 12:40 PM
Wow, it's really a great article! I've never seen something like this, talking about an important point for a developer who starts using XHTML 1.1
Your article gave me the exactly answer I was searching for.
Thanks!
Posted by Caio Almeida on February 5, 2006 12:52 PM
Thank you so much! I just changed div/form to form/div and it is valid now!
Posted by André on February 26, 2006 4:56 PM
Great tips! Stay focused and determined. Don't forget about the small things... Check to make sure all your tags are LOWERCASE!!
Posted by David on March 13, 2006 5:17 PM
Thanks, a google search threw up this page, I am doing coursework at uni and I tried everything to get my webpage to validate in Strict xhtml, it kept throwing out errors for nearly every element between the tags. Our lecturers notes don't mention anything about it nor does my xhtml book, the W3C validator doesn't help much either because it doesn't give you any explanation why you need the extra tags.
Posted by Robert on March 23, 2006 4:45 PM
THANKS!
Posted by Sergey on April 27, 2006 12:53 AM
I spent a lot of time today cleaning up my site for 1.1 and then I realized I had to do the damn form in MT. This'll help, but I sure don't want to do it.
Thanks!
Posted by Tony on June 7, 2006 9:44 PM
Thanks for the info on the form-before-div! You solved my problem when the validator was less than helpful with the error messages
Posted by Ben on June 19, 2008 10:15 PM