QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

XHTML-Strict Compliant Forms

Posted on October 22, 2007 at 2:21 PM in General

I am a web standards junkie. I get really agitated if my code doesn't validate to XHTML 1.0 Strict standards. Why? Adhering to the standards, well, there can be nothing but positive things that comes out of making the additional effort. For instance, I know that if it does validate, the chances of it looking good in a variety of modern browsers - even ones that I don't test in - are very much in my favor. While there are really only three browsers that I really place any real efforts in checking (FF, IE6, IE7), I like knowing that I'm not excommunicating someone from my sites just because they use some little-known browser.

Besides, once you train yourself to adhere to the standards, it's really a painless process and takes no more time than just pushing out crap code. And you'll thank yourself later.

I created my own form markup that I've used for a long time now. It works very well, but I've always wondered if there wasn't a better way to make it happen. Today, I found that better way. Hang with me to the end, it should be worth your while.

Here's the way I've been doing my forms...

1. <div id="myFormBox" class="formBox">
2. <form id="myForm" action="index.cfm">
3. <fieldset>
4. <div class="formRow">
5. <div class="formLabel">
6. <label for="myTextField">Text Field: </label>
7. </div>
8. <div class="formInput">
9. <input type="text" name="myTextField" id="myTextField" size="30" value="" />
10. <span id="myTextFieldMsg" class="formError"></span>
11. </div>
12. </div>
13. <div class="formRow">
14. <div class="formLabel">Checkboxes :</div>
15. <div class="formInput">
16. <div>
17. <input type="checkbox" name="myCheckboxField" id="myCheckboxField01" value="aValue" class="ckbox" />
18. <label for="myCheckboxField01">I love ColdFusion</label>
19. </div>
20. <div>
21. <input type="checkbox" name="myCheckboxField" id="myCheckboxField02" value="bValue" class="ckbox" />
22. <label for="myCheckboxField02">I'm going to marry ColdFusion</label>
23. <span id="myCheckboxFieldMsg" class="formError"></span>
24. </div>
25. </div>
26. <!-- submit button -->
27. <div class="formRow">
28. <div class="formLabel">
29. &nbsp;
30. </div>
31. <div class="formInput">
32. <input type="submit" class="submit" value=" Submit " />
33. </div>
34. </div>
35. </fieldset>
36. </form>
37. </div>

Depending upon what you do with your CSS, your form can appear on the screen in a variety of ways. There's also a place for built-in validation error messages (the <span id="myFieldMsg" class="formError"></span> portion). But I'll be honest, that's an awful lot of markup to write. Of course, I have snippets that inserts the code for me, but still, it bulks up the file size sent to the browser.

So then, today while I was glancing through the pile of CF-Talk messages in my inbox, and saw a thread on the topic of forms. Since I'm always looking for a better way to do forms, I decided to click on it. Glad I did, as I found this blog post from Chris Peterson.

Using the Uni-Form markup, our form now looks something like this:

1. <fieldset class="inlineLabels">
2. <div class="ctrlHolder">
3. <p id="error1" class="errorField"><strong>You screwed up!</strong></p>
4. <label for="myTextField"><em>*</em> Text Field: </label>
5. <input name="myTextField" id="myTextField" value="" size="35" maxlength="25" type="text" class="textInput" />
6. </div>
7. <div class="ctrlHolder">
8. <p class="label">
9. <em>*</em> Checkboxes:
10. </p>
11. <p id="error2" class="errorField"><strong>You screwed up!</strong></p>
12. <label for="myCheckboxField01" class="inlineLabel"><input name="myCheckboxField01" id="myCheckboxField01" value="aValue" type="checkbox" />I love ColdFusion</label>
13. <label for="myCheckboxField02" class="inlineLabel"><input name="myCheckboxField02" id="myCheckboxField02" value="bValue" type="checkbox" />I'm going to marry ColdFusion</label>
14. </div>
15. </fieldset>
16. <div class="buttonHolder">
17. <button type="submit" class="submitButton">Submit</button>
18. </div>

So now, instead of 37 lines of markup, the very same form is cut down to only 16. We've cut nearly 57% of the markup out of our form! And that's just a really simple form! Imagine how much of a difference it will make with a big form. I'm kinda excited about that! :-)

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

On 10/23/07 at 1:09 PM, Ben Nadel said:

The UniForm example is awesome. I was pouring over it the other night. I need to start applying those types of principles to my projects.

[Add Comment]