HomeUser Options
The checkbox has 2 possible values checked or unchecked. If the checkbox is ticked then the name and value get processed and look something like this Mailing list=Yes
- name : name="" used to give the field an appropriate name - for example, if by ticking the box the user agrees to join a mailing list then you could use name="Mailing List"
- value : If the box is ticked then the value is passed along with the name. example, value="Yes I want to join the mailing list"
- checked : This sets the default state of the checkbox when the form loads. If you want the box ticked then use
<input type="checkbox" name="" value="" checked>
If the checkbox is to be unticked then use
<input type="checkbox" name="" value="">
Radio buttons are useful for multiple choice type options. Radio buttons are grouped by sharing the same name, so only 1 can be selected. Heres an example
| Sex | Prefer not to say Male Female |
- name : name="" used to give the field an appropriate name - each button in a group must share the same name. In the above example name="sex"
- value : If the box is ticked then the value is passed along with the name. example, value="prefer not to say"
- checked : This sets the default state of the radio button when the form loads. If you want a button checked then use
<input type="radio" name="" value="" checked>
The remaining buttons in the group must be unchecked
<input type="radio" name="" value="">
You can also have all buttons unchecked but in the above example you are enticing the user into making a choice by having one already selected :) Remember if you decide to have an option checked then the rest in the group MUST be unchecked
This list is also known as a menu. First I'll describe the single selection where only 1 item from the list can be chosen
<select name="preferred scripting language" size="1">
<option value="PHP" selected>PHP</option>
<option value="Javascript">Javascript</option>
<option value="Perl">Perl</option>
</select>
So, as you can see the options are enclosed between the
<select>
</select> tags.
- name :name="" used to give the field an appropriate name - each option contained between the <select>
</select> tags will be part of that group. In the above example name="preferred scripting language" So, the email result will look something like this
preferred scripting language=whichever option was selected. - size : This sets how many lines of the list are visible I used size="1" but as its a small list I could have used size="3" which would look like this
The <option value="" SELECTED>text</option> tag
- value : This contains the information you want sent if this option is selected. So, for example if the user selected Perl from the list your emil would contain something like
preferred scripting language=Perl - selected : Optional, use selected if you want an item already selected as default. Only 1 per menu, the rest must not be selected as in the example above.
- text : this is simply the text you want to appear in the list
The code is nearly identical to the above but with one difference, by holding the ctrl key the users can choose more than 1 item from the list. Ideally, if allowing multiple selections you should increase the size to make selecting easier
so the only difference made to the code above is this
<select name="preferred scripting language" size="3" multiple>
The adding of the attribute multiple allows more than 1 choice to be made.
So, if the user selected PHP and Perl from the list your email would contain the following
preferred scripting language=PHP
preferred scripting language=Perl
Next we'll look at the hidden and submit options available
Why not discuss this article in our forum?
Other related guides : accessible web forms | webpage basics | lists
]
[
]