Radio Object

By: aathishankaran Viewed: 187 times  Printer Friendly Format    


You use the radio object to let a user select a single option from a group of options. If one option within a set is selected, no others can be selected at the same time. The act of clicking a radio button deselects any other radio button that was selected. 

The radio object is different from the other form objects you have worked with.

Whereas other form objects have a one-to-one correspondence to an HTML tag, a radio object has a one-to-many relationship with a set of <INPUT type="radio"> elements within the HTML source code. Each element of a radio object is defined as 

Syntax 

<INPUT TYPE="radio" [NAME="groupName"] [VALUE="value"] [CHECKED]

[onClick="methodName"]> [displayText] 

You do not group each of these elements together as you do the items in a select object The way they are grouped together is based on the NAME=parameter of the radio buttons. Each element in a radio object must use the same value in that parameter. For example, the following set of radio buttons are treated as a single radio object called weekdays: 

Syntax 

<INPUT TYPE="radio" NAME=”weekdays" VALUE="Monday">Monday <INPUT

TYPE="radio" NAME=”weekdays" VALUE="Tuesday">Tuesday <INPUT

TYPE=”radio" NAME=”weekdays" VALUE=”Wednesday”>Wednesday <INPUT

TYPE=”radio" NAME=”weekdays" VALUE="Thursday">Thursday <INPUT

TYPE="radio" NAME="weekdays" VALUE="Friday”>Friday <INPUT TYPE=”radio"

NAME=”weekdays" VALUE=”Saturday”>Saturday <INPUT TYPE=”radio"

NAME=”weekdays" VALUE="Sunday">Sunday 

Example 

<Html>

<Head>

<Title>

Radio Button Example

 

</Title>

<Body>

<H1>Example for Radio Button</H1>

<H2>Click on the Radio Button and Know your Gender </H2>

<Hr>

<Form Name=form1>

<Center>

Gender</H2>

Male

<Input Type=Radio

 

Name = r1

onClick="alert('You selected Male')">

 

Female

<Input Type=Radio

Name=r1

onClick="alert ('You selected Female')">

<Hr>

 

</Center>

</Form>

</Body>

</Html> 

Output 

 

If you click on the Male Button

If you click on the Female Button



Most Viewed Articles (in JSP )

Latest Articles (in JSP)

Comment on this tutorial