In This Article we will discuss about How to design web pages using HTML and Java Script.
In this web page i have covered Radio Buttons and Check box.This validation code is very useful who are facing technical interviews because Interviewer may ask you write a code to design radio button and check box..so here we go..
Radio buttons are used to allow the user to select one, and only one, item from a group
of options. Radio buttons are always used in multiples there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead.
To define radio buttons for JavaScript, provide each object with the same name.
JavaScript will create an array using the name you've provided you then reference the buttons using the array indexes. The first button in the series is numbered 0,
the second is numbered 1, and so forth. Note that the VALUE attribute is optional
for JavaScript-only forms. You'll want to provide a value if you submit the form to
a CGI program running on the server, however.
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button1" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button2" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button3" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button4" onClick=0>
SAMPLE RESULT:
Following is an example of testing which button is selected. The for loop in the testButtonfunction cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).
form_radio.html
<HTML>
<HEAD>
<TITLE>Radio Button Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
for (Count = 0; Count < 3; Count++) {
if (form.rad[Count].checked)
break;
}
alert ("Button " + Count + " is select
ed");
}
</SCRIPT>
</HEAD>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click"onClick="testButton(this.form)"> <BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button1"onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button2"onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button3"onClick=0><BR>
<FORM>
</HTML>
Setting a radio button selection with HTML is simple. If you want the form to initially
appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button.
<INPUT TYPE="radio" NAME="rad" Value="rad_button1"CHECKED onClick=0>
You can also set the button selection programmatically with JavaScript, using the checked
property. Specify the index of the radio button array you want to checked.
form.rad[0].checked = true; // sets to first button in the rad group
Using Check Boxes:
Check boxes are stand-alone elements; that is, they don't interact with neighboring
elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked, false if it is not.
form check.html:
<HTML>
<HEAD>
<TITLE>Checkbox Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
alert (form.check1.checked);
}
</SCRIPT>
</BODY>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click"onClick="testButton(this.form)"><BR><INPUT TYPE="checkbox" NAME="check1" Value="Check1">Checkbox1 <BR>
<INPUT TYPE="checkbox" NAME="check2" Value="Check2">Checkbox2> <BR>
<INPUT TYPE="checkbox" NAME="check3" Value="Check3">Checkbox3 <BR>
</FORM>
</BODY>
</HTML>
As with the radio button object, add a CHECKED attribute to the HTML markup for that
check box you wish to be initially checked when the form is first loaded.
In this web page i have covered Radio Buttons and Check box.This validation code is very useful who are facing technical interviews because Interviewer may ask you write a code to design radio button and check box..so here we go..
Radio buttons are used to allow the user to select one, and only one, item from a group
of options. Radio buttons are always used in multiples there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead.
To define radio buttons for JavaScript, provide each object with the same name.
JavaScript will create an array using the name you've provided you then reference the buttons using the array indexes. The first button in the series is numbered 0,
the second is numbered 1, and so forth. Note that the VALUE attribute is optional
for JavaScript-only forms. You'll want to provide a value if you submit the form to
a CGI program running on the server, however.
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button1" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button2" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button3" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button4" onClick=0>
SAMPLE RESULT:
Following is an example of testing which button is selected. The for loop in the testButtonfunction cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).
form_radio.html
<HTML>
<HEAD>
<TITLE>Radio Button Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
for (Count = 0; Count < 3; Count++) {
if (form.rad[Count].checked)
break;
}
alert ("Button " + Count + " is select
ed");
}
</SCRIPT>
</HEAD>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click"onClick="testButton(this.form)"> <BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button1"onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button2"onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button3"onClick=0><BR>
<FORM>
</HTML>
Setting a radio button selection with HTML is simple. If you want the form to initially
appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button.
<INPUT TYPE="radio" NAME="rad" Value="rad_button1"CHECKED onClick=0>
You can also set the button selection programmatically with JavaScript, using the checked
property. Specify the index of the radio button array you want to checked.
form.rad[0].checked = true; // sets to first button in the rad group
Using Check Boxes:
Check boxes are stand-alone elements; that is, they don't interact with neighboring
elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked, false if it is not.
form check.html:
<HTML>
<HEAD>
<TITLE>Checkbox Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
alert (form.check1.checked);
}
</SCRIPT>
</BODY>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click"onClick="testButton(this.form)"><BR><INPUT TYPE="checkbox" NAME="check1" Value="Check1">Checkbox1 <BR>
<INPUT TYPE="checkbox" NAME="check2" Value="Check2">Checkbox2> <BR>
<INPUT TYPE="checkbox" NAME="check3" Value="Check3">Checkbox3 <BR>
</FORM>
</BODY>
</HTML>
As with the radio button object, add a CHECKED attribute to the HTML markup for that
check box you wish to be initially checked when the form is first loaded.
