Monday, November 2, 2009

Forms' element samples (checkbox,radio,select,option)

[HTML>
[HEAD>
[TITLE>Checkbox Inspector[/TITLE>
[SCRIPT LANGUAGE="JavaScript">
function inspectBox() {
if (document.forms[0].checkThis.checked) {
alert("The box is checked.")
} else {
alert("The box is not checked at the moment.")
}
}


function inspectRadio() {
for (var i = 0; i [ document.forms[0].sex.length; i++) {
if (document.forms[0].sex[i].checked) {
break
}
}
alert("You chose " + document.forms[0].sex[i].value + ".")
}


function verifySong(entry) {
var song = entry.value
alert("Checking whether " + song + " is a Beatles tune...")
}


function showCarSelected() {
var list = document.forms[0].carSelect
alert("SelectIndex="+list.selectedIndex+" Value="+list.options[list.selectedIndex].value+" "+list.options[list.selectedIndex].text+" Car is selected.");
}


function checkAll(field)
{
for (i = 0; i [ field.length; i++)
field[i].checked = true ;
}

function uncheckAll(field)
{
for (i = 0; i [ field.length; i++)
field[i].checked = false ;
}

[/SCRIPT>
[/HEAD>
[BODY>
[FORM>
[INPUT TYPE='checkbox' NAME='checkThis' onClick='javascript:inspectBox()'>Check here[BR>

[input type="radio" name="sex" value="male" onClick='javascript:inspectRadio()' > Male
[br />
[input type="radio" name="sex" value="female" onClick='javascript:inspectRadio()'> Female
[br>

[INPUT TYPE="text" NAME="song" VALUE = "Eleanor Rigby" onChange="verifySong(this)">[P>


[select name="carSelect" onChange="showCarSelected()" >
[option value="0" >Volvo[/option>
[option value="1" >Saab[/option>
[option >Mercedes[/option>
[option selected >Audi[/option>
[/select>


[/FORM>

[form name="myform" action="checkboxes.asp" method="post">

[b>Your Favorite Scripts & Languages[/b>[br>
[input type="checkbox" name="list" value="1">Java[br>
[input type="checkbox" name="list" value="2">Javascript[br>
[input type="checkbox" name="list" value="3">Active Server Pages[br>
[input type="checkbox" name="list" value="4">HTML[br>
[input type="checkbox" name="list" value="5">SQL[br>

[input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
[input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
[br>
[/FORM>
[/BODY>
[/HTML>

No comments: