Interchangeable Form Elements

(Some of you will roll your eyes at how obvious this is, but it’s something novice web developers may find useful)

Most types of form element are easily interchangeable, letting you alter the user interface without touching the server-side code receiving the data. For example, let’s say you have a form where the user can optionally make a donation using a text field:

£<input type="text" name="donation" value="" />

If you decide you’d rather offer a set range of options, you could switch to a select list:

<select name="donation">
<option value="" selected="selected">None</option>
<option value="5">£5</option>
<option value="10">£10</option>
<option value="20">£20</option>
</select>

or some radio buttons:

<input type="radio" name="donation" id="donation0" value="" checked="checked" />
<label for="donation0">None</label><br />
<input type="radio" name="donation" id="donation5" value="5" />
<label for="donation5">£5</label><br />
<input type="radio" name="donation" id="donation10" value="10" />
<label for="donation10">£10</label><br />
<input type="radio" name="donation" id="donation20" value="20" />
<label for="donation20">£20</label>

Or if there’s no donation scheme any more and you don’t want to bother the user about it:

<input type="hidden" name="donation" value="" />

All four of those approaches will happily work and the server-side code won’t care what interface elements are used. You should always ensure suitable server-side validation is in place if the values are critical, but in many cases it won’t matter if, for example, a curious/mischievous user submits a value you haven’t included in your select list.

Fri 18th Apr 2008, 10:27am GMT

Filed under: Client-side Coding, Hints and Tips, Web

---

Comments

Add your comment

Comment	(text only; full URLs will be turned into links)
Your name
Your URL (optional)