Disabling Form Elements

In some cases, you may not want visitors to use certain parts of your form. For example, you might want to disable a submit button until all the required fields have been filled out.

Figure 17.58. Here, I use JavaScript and the disabled attribute to make the submit button inaccessible until other options are selected.

To disable a form element:

In the form element's tag, type disabled="disabled".

Figure 17.59. When the visitor first views the form, nothing is selected and the submit button is disabled.

Figure 17.60. When the visitor chooses an item, the submit button is no longer disabled (thanks to the JavaScript in Figure 17.58).

Tips

• In HTML, you can just use disabled by itself. XHTML requires the redundant value.

• You can change the contents of a disabled form element with a script. For more information on scripting, consult Chapter 19, Scripts. You'll also need some JavaScript expertise. The very simple way I've added here is to add onclick="document.vote.submit.disabled=false" to each radio button (where vote is the value of the form's name attribute, submit is the value of the disabled button's name attribute, and disabled is the attribute in that button whose value I want to change to false). So when one of the radio buttons is clicked, the Vote button will be enabled.

• If you disable a form element, its keyboard shortcut is also disabled. For more information on keyboard shortcuts, consult Adding Keyboard Shortcuts on page 278.