js 제어 폼 작업 의 상용 코드 소결

1.마우스 가 지나 갈 때 텍스트 코드 를 자동 으로 선택 합 니 다.

:<input type="text" value=" " onMouseOver="this.focus();" onfucus="this.seelct()" />
2.선택 단추 코드 를 설정 합 니 다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js </title>
<script language="javascript">
function getChoice(){
var oForm=document.forms["myForm1"];
var aChoice=oForm.camera;
for(i=0;i<aChoice.length;i++)
if(aChoice[i].checked)
break;
alert(" :"+aChoice[i].value);
}
function setChoice(iNum){
var oForm=document.forms["myForm1"];
oForm.camera[iNum].checked=true;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p> </p>
<p>
<input type="radio" name="camera" id="canon" value="Canon">
    <label for="canon">Canon</label>
</p>
<p>
<input type="radio" name="camera" id="nikon" value="Nikon">
    <label for="nikon">Nikon</label>
</p>
<p>
<input type="radio" name="camera" id="sony" value="Sony">
    <label for="sony">Sony</label>
</p>
<p>
<input type="radio" name="camera" id="pentax" value="Tentax">
    <label for="pentax">Tentax</label>
</p>
<p>
<input type="button" value=" " onClick="getChoice();">
    <input type="button" value=" Canon" onClick="setChoice(0);">
</p>
</form>
</body>
</html>
3.체크 상자 코드 를 설정 합 니 다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js </title>
<script language="javascript">
function changeBoxes(action){
var oForm=document.forms["myForm1"];
var oCheckBox=oForm.hobby;
for(var i=0;i<oCheckBox.length;i++)//
if(action<0) //
oCheckBox[i].checked=!oCheckBox[i].checked;
else
oCheckBox[i].checked=action;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<input type="checkbox" name="hobby" id="ball" value="ball">
    <label for="ball"> </label>
</p>
<p>
<input type="checkbox" name="hobby" id="TV" value="TV">
    <label for="TV"> </label>
</p>
<p>
<input type="checkbox" name="hobby" id="net" value="net">
    <label for="net"> </label>
</p>
<p>
<input type="checkbox" name="hobby" id="book" value="book">
    <label for="book"> </label>
</p>
<p>
<input type="checkbox" name="hobby" id="run" value="run">
    <label for="run"> </label>
</p>
<p>
       <input type="button" value=" " onClick="changeBoxes(1);">
    <input type="button" value=" " onClick="changeBoxes(0);"/>
    <input type="button" value=" " onClick="changeBoxes(-1);"/>
</p>
</form>
</body>
</html>
4.드 롭 다운 메뉴 드 롭 다운 메뉴 에서 가장 중요 한 것 은 사용자 가 선택 한 옵션 에 접근 하 는 것 입 니 다.드 롭 다운 메뉴 는 selected Index 속성 을 통 해 쉽게 접근 할 수 있 습 니 다.Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js </title>
<script language="javascript">
function checkSingle(){
var oForm=document.forms["myForm1"];
var oSelectBox=oForm.constellation;
var iChoice=oSelectBox.selectedIndex;//
alert(" :"+oSelectBox.options[iChoice].text);
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<select id="constellation" name="constellation">
     <option value="Aries" selected="selected"> </option>
        <option value="Taurus"> </option>
        <option value="Gemin"> </option>
        <option value="Leo"> </option>
        <option value="Virgo"> </option>
    </select>
</p>
<p>
<input type="button" value=" " onClick="checkSingle();" />
</p>
</form>
</body>
</html>

좋은 웹페이지 즐겨찾기