Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

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>

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.


checkbox also

<label> <input type="checkbox" name="test" id="a" />a</label>
<label> <input type="checkbox" name="test" id="b" />b</label>
<label> <input type="checkbox" name="test" id="c" />c</label>

Greek Movies, 19th Apr, 1:00pm

Comments are now closed for this entry.