• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Using Radio Buttons

Radio buttons are similar to check boxes, except they only let the user select one option from a group (such as day of the week). You group radio buttons into a group by giving them the same name using their NAME attributes. (You can have more than one radio button group in a single web page.) The browser will allow only one radio button in the group to be selected at one time. Here’s an example that uses radio buttons’ ONCLICK attribute to display a message when you click a radio button:

(Listing 12-14.html on the web site)

<HTML> 
    <HEAD> 
        <TITLE>Using Radio Buttons</TITLE> 
        <SCRIPT LANGUAGE="JavaScript"> 
            <!--
                function radio1Clicked()
					{
					document.form1.text1.value = "You clicked radio button 1."
					}
					function radio2Clicked()
					{
					document.form1.text1.value = "You clicked radio button 2."
					}
					function radio3Clicked()
					{
					document.form1.text1.value = "You clicked radio button 3."
					}
					function radio4Clicked()
					{
					document.form1.text1.value = "You clicked radio button 4."
					}
					function radio5Clicked() {
					document.form1.text1.value = "You clicked radio button 5."
					} 
               // --> 
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Using Radio Buttons</H1> 

        <FORM NAME="form1"> 
            <TABLE BORDER BGCOLOR = CYAN WIDTH = 200>
				<TR><TD><INPUT TYPE="RADIO" NAME = "radios" ONCLICK = "radio1Clicked()">Radio 1</TD></TR>
				<TR><TD><INPUT TYPE="RADIO" NAME = "radios" ONCLICK = "radio2Clicked()">Radio 2</TD></TR>
				<TR><TD><INPUT TYPE="RADIO" NAME = "radios" ONCLICK = "radio3Clicked()">Radio 3</TD></TR>
				<TR><TD><INPUT TYPE="RADIO" NAME = "radios" ONCLICK = "radio4Clicked()">Radio 4</TD></TR>
				<TR><TD><INPUT TYPE="RADIO" NAME = "radios" ONCLICK = "radio5Clicked()">Radio 5</TD></TR>
					</TABLE> 
            <BR> 
            <BR> 
            <INPUT TYPE="TEXT" NAME="text1" SIZE="30"> 
        </FORM> 
    </BODY> 
</HTML> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint