AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
WebDevTips Pick Of The Day : Beat The Spam Bots |

Print This Page

You are here : Home - Web Development - HTML - Forms - User Options

User Options

Users prefer form filling to composing an email to someone they don't know. You can make users feel comfortable by providing options that are relevant. Taking the guesswork away from the visitor can often help in them completing the form.


<input type="checkbox" name="" value="" checked>

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
<input type="radio" name="" value="" checked>
  • 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

the complete code for the above menu is

<select name="preferred scripting language" size="1"> 
    <option value="PHP" selected>PHP</option> 
    <option value="Javascript">Javascript</option> 
    <option value="Perl">Perl</option> 

So, as you can see the options are enclosed between the
<select> </select> tags.

<select name="" size="1"> 
  • 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

OPTION (multiple choices)

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

how forms work | the form tag | text input
user options | hidden and submit | forms in tables

Why not discuss this article in our forum?
Other related guides : accessible web forms | webpage basics | lists


[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]