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 responses to “Forms in XHTML 1.1”
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?
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!
Google search gave me this page and it was quite helpful and time-saving. Thanks for taking the time to provide it!
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!
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.
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 . . .
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!
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.
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.
Google brought me to this post, and it answered my question. Just wanted to say thanks!