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”
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
yes! i heart google, the internet, and you for writiing such a helpful and needed post. Exactly the information i needed!
you rock
~ Mia
thanks, again, like the others, for helping me validate faster!
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”
}
}
}
I found this link via Google. Thanks for helping me clean up a custom search form from Feedster. Cheers mate.
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.
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
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.
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
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”.