Skip Navigation | Home | Code Samples | Articles | Links | About | Contact Me | Make a Payment

Licensing

I've gotten alot of email asking about using this work in various projects and sites. These requests often need me to license my work using one of the myriad of open source licenses. Unfortunately, for the people requesting, I don't like any of these licenses as pretty much all of them require me to allow redistribution, which I'm not ok with. So, to quell any further requests in that vein, let me just say that anybody looking to use my work should check my copyright as everything is clearly laid out in there. In essence, if you want to hire me to implement this work in a project or site or it'll be for a non-commercial project that won't be redistributed, then we can probably work something out.

Backend

For those that automatically assume I'm using PHP, sorry to burst your bubble. This site is proudly built using ColdFusion. I won't make the server-side source code for this work available, however, for those interested, I am fine with giving a rundown on the approximate logic flow to accomplish the error messages.

Most of the CSS-only, table-less forms available suck. So, not wanting to stoop to mediocrity, I decided to take on the task of coming up with something better. This is the result of my efforts. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.

The problems with Mac/IE5.2 probably aren't worth fixing. The minor layout differences in Safari are related to the ugly (in my opinion), egotistical forcing of the Aqua-skinned form elements upon the browser and what that does to sizing. It wouldn't be so bad if skinned elements rendered at the sizes defined in the CSS, but they don't. I'm not sure I care about that actually.

Additionally, no amount of persuading, convincing, or beating into submission will get Safari or Firefox on Mac OS 10.2 to honor the tabindexes. It is simply unable or unwilling to pass focus to selects, radio buttons, checkboxes, file inputs, or buttons when the user tabs from an input or textarea. Additionally, what is wrong with Safari and labels? Click all you want, the focus won't be moved to the element the label is bound to. Until Apple fixes these (along with numerous show-stopping OS-specific concerns), my stance will remain that Macs are inherently inaccessible. Ironically, MacIE5.2 does not have these issues. I wonder how many workarounds Microsoft had to employ to get this to work correctly.

Submitting the form will allow you to see how this form displays with error messages for the user. To get a feel for longer error messages, enter username for the username.

This is a fictitious form, designed purposely to include every possible layout I can anticipate wanting/needing to use.

Thanks to the excellent CAPTCHA component from Alagad Systems, I'm able to include CAPTCHA as an example image/field combination in this form. For accessibility reasons I'd also like to add audio, but that'll have to wait.

Update

June 28, 2006 — Safari v2.0.4 on Mac OS 10.4.6 now at least focuses selects when tabbing. However, radio buttons, checkboxes, and submit buttons are still not available via the keyboard. Firefox, as of v1.5.0.4, is still very broken with respect to the keyboard access to form elements.

October 30, 2006 — Over the past few days, I've received several emails about tabbing to radio buttons, checkboxes, and buttons in browsers on OSX. According to these readers, OSX allows these elements to be included or excluded from access by tabbing. In a completely brain-dead move (not the first, I assure you), Apple felt that these shouldn't be included in tabbing by default. So, for thsoe of you who want to correct an incredible oversight in default settings, you simply need to go into keyboard settings in system settings.

Expression Evaluations:

Bold fields are required.

Personal Information

Personal Information

Please enter your name and address as they are listed for your debit card, credit card, or bank account.

Contact Information

Contact Information

Please enter your full email address, for example, name@domain.com

It is important that you provide a valid, working email address that you have access to as it must be verified before you can use your account.

Please enter a land line number, not a mobile phone number.

Your phone number will not be shared or used for telemarketing. Your information is protected by our Privacy Policy.

How to Contact You?
We will never sell or disclose your email address to anyone. Once your account is setup, you may add additional email addresses.
Must match the email address you just entered above.
Message Subject:
Must be 250 characters or less.
We'd love to get your feedback on any of the products or services we offer or on your experience with us.
We only accept JPG files.
Use the CTRL key to select more than one.
Availability:
Login Information

Login Information

Your username and password must both be at least 8 characters long and are case-sensitive. Please do not enter accented characters.

We recommend that your password is not a word you can find in the dictionary, includes both capital and lower case letters, and contains at least one special character (1-9, !, *, _, etc.).

Your password will be encrypted and stored in our system. Due to the encryption, we cannot retrieve your password for you. If you lose or forget your password, we offer the ability to reset it.

May only contain letters, numbers, and underscore (_) and 8-20 characters long.
Must be 8-25 characters long.
Must match the password you entered just above.
If you don't want to bother with having to login every time you visit the site, then checking "Remember Me" will place a unique identifier only our site can read that we'll use to identify you and log you in automatically each time you visit.
Verification

Verification Information

Type the characters you see in this picture. This ensures that a person, not an automated program, is creating this account.


/* form.css */

* {
  margin: 0;
  padding: 0;
}

form {
  margin: 0;
  padding: 0;
  font-size: 100%;
  min-width: 560px;
  max-width: 620px;
  width: 590px;
}

form fieldset {
  clear: both;
  font-size: 100%;
  border-color: #000000;
  border-width: 1px 0 0 0;
  border-style: solid none none none;
  padding: 10px;
  margin: 0 0 0 0;
}

form fieldset legend {
  font-size: 150%;
  font-weight: normal;
  color: #000000;
  margin: 0 0 0 0;
  padding: 0 5px;
}

label {
  font-size: 100%;
}

label u {
  font-style: normal;
  text-decoration: underline;
}

input, select, textarea {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 100%;
  color: #000000;
}

textarea {
  overflow: auto;
}

form div {
  clear: left;
  display: block;
  width: 354px;
  zoom: 1;
  margin: 5px 0 0 0;
  padding: 1px 3px;
}

form fieldset div.notes {
  float: right;
  width: 158px;
  height: auto;
  margin: 0 0 10px 10px;
  padding: 5px;
  border: 1px solid #666666;
  background-color: #ffffe1;
  color: #666666;
  font-size: 88%;
}

form fieldset div.notes h4 {
  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;
  padding: 3px 0 3px 27px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #666666;
  color: #666666;
  font-size: 110%;
}

form fieldset div.notes p {
  margin: 0em 0em 1.2em 0em;
  color: #666666;
}

form fieldset div.notes p.last {
  margin: 0em;
}

form div fieldset {
  clear: none;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 197px;
}

form div fieldset legend {
  font-size: 100%;
  padding: 0 3px 0 9px;
}

form div.required fieldset legend {
  font-weight: bold;
}

form div label {
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px;
  margin: 0 0 5px 0;
  text-align: right;
}

form div.optional label, label.optional {
  font-weight: normal;
}

form div.required label, label.required {
  font-weight: bold;
}

form div label.labelCheckbox, form div label.labelRadio {
  float: none;
  display: block;
  width: 200px;
  zoom: 1;
  padding: 0;
  margin: 0 0 5px 142px;
  text-align: left;
}

form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {
  margin: 0 0 5px 0;
  width: 170px;
}

form div img {
  float: left;
  border: 1px solid #000000;
  margin: 0 0 5px 0;
}

p.error {
  background-color: #ff0000;
  background-image: url(/images/icon_error.gif);
  background-repeat: no-repeat;
  background-position: 3px 3px;
  color: #ffffff;
  padding: 3px 3px 5px 27px;
  border: 1px solid #000000;
  margin: auto 100px;
}

form div.error {
  background-color: #ffffe1;
  background-image: url(/images/required_bg.gif);
  background-repeat: no-repeat;
  background-position: top left;
  color: #666666;
  border: 1px solid #ff0000;
}

form div.error p.error {
  background-image: url(/images/icon_error.gif);
  background-position: top left;
  background-color: transparent;
  border-style: none;
  font-size: 88%;
  font-weight: bold;
  margin: 0 0 0 118px;
  width: 200px;
  color: #ff0000;
}

form div select, form div textarea {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 0;
}

form div input.inputText, form div input.inputPassword {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 0;
}

form div input.inputFile {
  width: 211px;
}

form div select.selectOne, form div select.selectMultiple {
  width: 211px;
  padding: 1px 3px;
}

form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {
  display: inline;
  height: auto;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  margin: 0 0 0 140px;
}

form div.submit {
  width: 214px;
  padding: 0 0 0 146px;
}

form div.submit div {
  display: inline;
  float: left;
  text-align: left;
  width: auto;
  padding: 0;
  margin: 0;
}

form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {
  background-color: #cccccc;
  color: #000000;
  width: auto;
  padding: 0 6px;
  margin: 0;
}

form div.submit div input.inputSubmit, form div.submit div input.inputButton {
  float: right;
  margin: 0 0 0 5px;
}

form div small {
  display: block;
  margin: 0 0 5px 142px;
  padding: 1px 3px;
  font-size: 88%;
  zoom: 1;
}
/* form.import.css */

label img {
  behavior: url(/behaviors/label_img.htc);
}

form fieldset legend {
  line-height: 150%;
}

form input, form select, form textarea {
  background-color: #ffffff;
}

form textarea.expanding {
  overflow: auto;
  overflow-x: auto;
  overflow-y: visible;
}

div.optional label:before {
  content: '';
}

div.required label:before {
  content: '';
}
  
form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {
  display: block;
  width: 190px;
  zoom: 1;
  padding: 4px 0 0 18px;
  text-indent: -18px;
  line-height: 120%;
}

form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {
  margin: 0;
}

form div fieldset input.inputText, form div fieldset input.inputPassword, form div fieldset input.inputFile, form div fieldset textarea.inputTextarea {
  width: 160px;
  margin: 0 0 0 18px;
  margin: expression(setCntr(), '0px 0 0 -124px');
}

form div label.compact {
  display: inline;
  width: auto;
  padding: 4px 10px 0 0;
  text-indent: 0;
  margin: 0 0 0 0;
}

form div.wide label {
  float: none;
  display: block;
}

form div label.wide {
  width: 348px;
}

form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {
  width: 344px;
  margin: 0;
}

form div.notes p, form div small {
  line-height: 125%;
}

form div.wide small {
  margin: 0 0 5px 0;
}