Alternative HTML in Forms

One aspect of HTML that beginners don't seem to understand so well are some of the options that are available for coding forms. I have seen requests from beginners in various forums asking how to arrange their code so that only one of several checkboxes can be selected or how to make an image behave like a submit button. In both these cases it is just a matter of choosing the right fields to add into your form and they will do exactly what you want without any extra code needed to get those behaviours.

Let's start by looking at checkboxes. Now a checkbox has two possible states - it is either selected or it is not. Now one issue with checkboxes that beginners are unaware of is that the checkbox field itself will only be passed to the server if it is selected. We need to supply slightly more than just a checkbox field by itself to ensure that the field will be passed regardless or whether or not it will be selected.

<input type="hidden" name="cbox" value="no" />
<input type="checkbox" name="cbox" value="yes" />

With the addition of the hidden field immediately in front of the checkbox field and with the same name we now always pass a value to the server in that field with the value changing if the field is selected - making it easier to test the field.

Duplicating checkbox fields to provide multiple answers isn't going to work. Only the last field in the form with a given name will be passed to the server. Our above code works because if the checkbox isn't selected then that field isn't passed and the prior field with the same name is therefore the last of that name in the form. Adding a second checkbox to provide another answer will not work fully since while the last one selected will be passed there is no mechanism in place to automatically unselect the preceding entries. To add that mechanism to checkboxes is rather pointless since radio buttons already provide that exact functionality. All we need do to allow exactly one of several options to be selected is to use radio buttons instead of checkboxes.

<input type="hidden" name="rbutton" value="unknown" />
<input type="radio" name="rbutton" value="yes" />;
<input type="radio" name="rbutton" value="no" />

With this code selecting one button automatically deselects the prior selection and we can include as many buttons as we like in the knowledge that only one of them can be selected. The hidden field in this instance will only be passed if none of the other buttons has been selected. Once a button is selected it can only be unselected by selecting a different button so once a selection is made the hidden value would never be passed. If we set one of the buttons as selected by default then the hidden field becomes redundant (except if you are dynamically creating the buttons and having just one button is possible - in which case it is needed in order to ensure that the buttons are an array in JavaScript regardless of the number of buttons).

Moving on to how your form gets submitted and here we have three possible options while beginners are usually only aware of one.

<input type="submit" value="Submit" />

This is the simplest submit button where the content of the button is just plain text defined by the value. We can replace that plain text with anything that HTML can create by using an alternative way of coding the submit button.

<button type="submit">Submit</button>

This submit button looks and functions exactly as the preceding one does but now the text is outside of the tag where we can replace it with anything that can be coded in HTML. Now we could put an image in there to make the submit button display an image but doing it that way will still display it as a button with the image as the content in the button. If we just want the image without it being wrapped in a button then we can use the third way of defining a submit button.

<input type="image" src="submit.gif" width="100" height="100" alt="submit" />

We now have an image on our web page that will submit the form. One difference to note with this way of submitting the form compared to the others is that if you give each of the submit "buttons" a name then what each will pass to the server in that field will be different. The first of these will pass the value of the button which is the same as the text it displays. The second allows you to give the button a value that is different from what it displays. The third passes two values representing the coordinates of where the mouse clicked on the image (or 0,0 if the enter key was used).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow