Javascript에서는 페이지의 각 태그 쌍이 양식 객체라는 객체로 구문 분석됩니다. document.forms를 사용하면 문서에 있는 모든 양식 개체의 컬렉션을 소스 순서대로 가져올 수 있습니다. 如果一个表单对象定义如下: 获得该表单对象的方法: i> document.forms["frm1"]; // 根据name属性值 ii> document.forms[0]; // 根据索引号 iii> document.frm1; // 直接根据name值获得对象 주의해야 할 양식 속성: 요소: 가져오기 다음 소스 소스별로 정렬된 특정 형식의 모든 컨트롤 모음입니다. 하지만 개체는 이 컬렉션에 없습니다. var txtName = myform.elements[0]; //获得表单的第一个元素 var txtName = myform.elements["txtName"]; //获得name属性值为"txtName"的元素 var txtName = myform.elements.txtName; //获得name属性值为"txtName"的元素 enctype: 양식의 배수를 설정하거나 가져옵니다. MIME(인터넷 메일 확장) 인코딩을 사용합니다. 파일을 업로드하려면 multipart/form-data로 설정해야 합니다. 각 양식 요소의 텍스트 설명에는 이 태그는 텍스트를 해당 양식 요소에 바인딩하는 데 사용됩니다. 해당 for 속성은 바인딩된 양식 요소의 id 값을 지정합니다. 바인딩 후 텍스트를 클릭하면 마우스가 해당 텍스트 상자에 초점을 맞추거나 해당 옵션을 선택합니다. 특정 데스크탑 테마가 설치된 경우 일부 양식 요소도 색상을 변경하여 메시지를 표시하므로 사용자 경험이 크게 향상됩니다. 샘플 코드: 참고: i > 각 양식 요소는 태그를 사용하여 사용자 환경을 개선해야 합니다. ii > 각각의 각 양식 요소에는 name 속성과 id 속성이 할당되어야 합니다. name 속성: 서버에 데이터를 제출하는 데 사용됩니다. id 속성: 클라이언트에서 다음과 같은 해당 작업을 수행하는 데 사용됩니다. 등. (name 속성과 id 속성은 가능하면 동일하거나 관련된 값을 사용해야 합니다.) 작업에서는 name 속성을 사용하는 것을 선호합니다. 일부 특정 양식 요소(예: 라디오 버튼 등)의 경우 이름 속성을 사용하여 요소 값을 얻는 것이 더 쉽고 서버에 데이터를 전송하는 것이 더 편리하기 때문입니다! Javascript는 덜 일반적으로 사용되는 속성인 양식 양식 요소를 작동합니다. defaultChecked는 확인란 또는 라디오 버튼 상태를 설정하거나 가져옵니다. defaultValue는 객체의 초기 콘텐츠를 설정하거나 가져옵니다. 세트를 비활성화하거나 제어 상태를 가져옵니다. 양식 제출양식 제출 예: onclick="document.forms['frm'].submit();"> onclick="this.disabled=true; this.form.submit();"> 참고: onclick="document.forms['frm'].submit();"> onclick="this.disabled=true; this.form.submit();"> i > 요소는 트리거되지 않습니다. 이는 ii > 또는 버튼의 클릭 이벤트 사용자가 제출 버튼을 반복적으로 클릭하는 동작을 비활성화하려면 서버의 응답 부담을 줄이기 위해 텍스트 상자 설정 🎜>i > 텍스트 상자의 문자 수를 제어합니다 참고: 여러 줄로 구성된 텍스트 상자 의 최대 길이는 사용자 정의 속성입니다. 에 문자를 입력하면 줄 바꿈도 한 문자로 계산됩니다. ; ii > 마우스가 넘어가면 텍스트 상자가 자동으로 선택됩니다 window.onload = function(){ var txtName = document.getElementsByName("myName")[0]; txtName.onmouseover = function(){ this.focus(); }; txtName.onfocus = function(){ this.select(); }; } 행동과 구조의 분리를 달성합니다. 라디오 버튼 설정 선택한 라디오 버튼 가져오기 및 선택한 라디오 버튼 설정 </tr> <tr><td>//선택한 항목 가져오기</td></tr> <tr><td>function getChoice(){</td></tr> <tr> <td> var oForm = document.forms["myForm1"];</td> </tr> <tr><td> //radioName은 라디오 버튼의 이름 속성 값입니다.</td></tr> <tr><td> var aChoices = oForm.radioName;</td></tr> <tr><td> //단일 선택 목록 전체를 탐색</td></tr> <tr><td> for(i= 0 ;i<aChoices.length;i++) </td></tr> <tr><td> if(aChoices[i].checked) </td></tr> <tr><td> break; 선택한 항목을 찾으면 종료</td></tr> <tr><td> Alert("선택한 항목은 다음과 같습니다: "+aChoices[i].value);</td></tr> <td>}</td> <tr><td>//선택한 항목 설정</td></tr> <tr><td>function setChoice(_num){</td></tr> <tr><td> var oForm = document.forms["myForm1"];</td></tr> <tr> <td> //radioName은 라디오 버튼의 name 속성 값입니다.</td> </tr> <tr><td> oForm.radioName[_num].checked = true; //다른 옵션의 체크값은 자동으로 false로 설정됩니다.</td></tr> <tr><td>} td></td></tr> <tr><td> //获取选中项 function getChoice(){ var oForm = document.forms["myForm1"]; //radioName是单选按钮的name属性值 var aChoices = oForm.radioName; //遍历整个单选项表 for(i=0;i if(aChoices[i].checked) break; //如果发现了被选中项则退出 alert("您选中的是:"+aChoices[i].value); } //设置选中项 function setChoice(_num){ var oForm = document.forms["myForm1"]; //radioName是单选按钮的name属性值 oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false } //调用代码 //호출 코드 동일한 라디오 버튼 그룹의 name 속성 값이 동일한지 확인해야 합니다. 체크박스 설정 체크박스를 "모두 선택", "모두 선택 취소" 및 "선택 반전" 기능으로 설정 function changeBoxes(_action){ var myForm = document.forms["myForm1"]; //myCheckbox 为所有复选框的name属性值 var oCheckBox = myForm.myCheckbox; for(var i=0;i if(_action < 0)//反选 oCheckBox[i].checked = !oCheckBox[i].checked; else //_action为1是则全选,为0时则全不选 oCheckBox[i].checked = _action; } aa bb 드롭다운 목록 상자 설정 드롭다운 목록 상자의 다중 속성 드롭다운 목록을 설정하거나 가져오는 데 사용됩니다. 상자에서 여러 옵션을 선택할 수 있는지 여부입니다. 드롭다운 목록 상자는 기본적으로 하나의 항목만 선택할 수 있습니다. 여러 항목을 선택하도록 설정하려면 을 선택하세요. 유형 속성: JavaScript 언어는 유형 속성의 값을 기반으로 드롭다운 목록 상자 선택 컨트롤의 유형을 가져옵니다. type 속성의 값은 select-multiple 또는 select-one입니다(참고: 드롭다운 목록 상자의 유형은 multiple 속성에 의해 제어됩니다). i > 드롭다운 목록 상자의 옵션(단일 옵션 및 다중 옵션) function getSelectValue(_myselect){ var oForm = document.forms["myForm1"]; //根据参数(下拉列表框的name属性值)获得下拉菜单项 var oSelectBox = oForm.elements[_myselect]; //判断是单选还是多选 if(oSelectBox.type == "select-one"){ var iChoice = oSelectBox.selectedIndex; //获取选中项 alert("单选,您选中了" + oSelectBox.options[iChoice].text); } else{ var aChoices = new Array(); //遍历整个下拉菜单 for(var i=0;i if(oSelectBox.options[i].selected)//如果被选中 //压入到数组中 aChoices.push(oSelectBox.options[i].text); //输出结果 alert("多选,您选了:" + aChoices.join()); } } AA BB CC ii > 드롭다운 목록 상자 옵션 추가 끝에 새 옵션 추가 function AddOption(Box){ //追加选项到末尾 var oForm = document.forms["myForm1"]; var oBox = oForm.elements[Box]; var oOption = new Option("乒乓球","Pingpang"); oBox.options[oBox.options.length] = oOption; } 지정된 위치에 새 옵션 삽입 function AddOption(_select,_num){ var oForm = document.forms["myForm1"]; var oBox = oForm.elements[_select]; var oOption = new Option("text值","value值"); //兼容IE7,先添加选项到最后,再移动 oBox.options[oBox.options.length] = oOption; oBox.insertBefore(oOption,oBox.options[_num]); } 참고: 사용하는 경우 직접 insertBefore() 메서드가 옵션을 삽입하면 IE에 빈 옵션 버그가 나타납니다. IE의 이러한 버그를 해결하려면 새 옵션을 맨 끝에 추가한 후 insertBefore() 메서드를 사용하여 해당 위치로 이동하면 됩니다. 이와 비슷합니다. 브라우저의 특정 버그나 제한 사항을 우회하고 의도한 목적을 달성하기 위해 일반적으로 작은 트릭을 해킹이라고 합니다. iii > oBox.options를 통해 //替换选项 function ReplaceOption(_select,_num){ var oForm = document.forms["myForm1"]; var oBox = oForm.elements[_select]; var oOption = new Option("text值","value值"); oBox.options[_num] = oOption; //替换第_num 个选项 } 교체 _num] = oOption은 지정된 위치의 옵션을 생성된 새 옵션으로 직접 대체합니다. iv > oBox 옵션을 통해 직접 function RemoveOption(_select,_num){ var oForm = document.forms["myForm1"]; var oBox = oForm.elements[_select]; oBox.options[_num] = null; //删除选项 } ...... 옵션을 삭제하세요. [_num] = 삭제 옵션이 null입니다.