Trimming form fields (repost)

Why am I republishing this article now, five years after I originally wrote it? One reason is that this article is still widely linked to and is one of the most read pages on this site. Also, because of the rise of jQuery, I would love someone much cleverer than I am to rewrite its Javascript (originally written by James Edwards) as a plugin for that framework. Who will volunteer for that task? Now, for the (updated) article.

Start by writing an semantic, with only a sprinkling of additional mark-up. Then add minimal CSS to provide users with a method for removing the optional fields. We will also ensure that the form works for users whose browsers or user-agents do not support Javascript or CSS to ensure that the form is accessible.

Before we crack on, here is a look at the finished result.

Mark-up

Set up a basic form containing structured elements.

<form id="example-form" method="post" action="">
<fieldset>
<legend></legend>
<label></label>
<input />
<br />

Etc.

You might notice that we've added <br />s after each form element. These are not semantically necessary, but will improve the layout when viewing with only browser default styles. If you are not worried about this plainly styled layout, these can safely be removed.

Enabling the field toggling

To enable field toggling, enclose optional fields and their respective labels in paragraphs with a class attribute value of optional.

<p class="optional">
<label for="fm-forename">First name</label>
<input type="text" name="fm-forename" id="fm-forename" />
<br />
</p>

Now add an empty paragraph with a unique id above the form, this will become our toggle switch.

<p id="linkContainer"></p>

Although we will use CSS to visually identify all required fields, such presentation is useless to text browsers or screen-readers. Whilst generated content would be the preferred solution, the lack of support in Internet Explorer 7 requires means that we should add Required to each required element label.

<p>
<label for="fm-surname">Surname (Required)</label>
<input type="text" name="fm-surname" id="fm-surname" />
<br />
</p>

Trimming form fields

First make use of that empty place holder. The anchor and link text are only generated if Javascript is enabled. In the script, generate the link text that is displayed as the page loads.

toggle.appendChild(document.createTextNode('Remove optional fields?'));

Then generate the display and remove fields link text.

this.firstChild.nodeValue = (linkText == 'Remove optional fields?') ?
'Display optional fields?' : 'Remove optional fields?';

Finally set the class name for all optional fields to optional.

if(tmp.className == 'optional') {
tmp.style.display = (tmp.style.display == 'none')
? 'block' : 'none'; }

That's it, a completed form that gives users the option to hide optional fields. Download the CSS and Javascript. Anyone up for the challenge of translating Trimming Form Fields into a jQuery plugin?