이 기사에서는 참조를위한 JS 양식 제어의 예를 보여줍니다. 특정 내용은 다음과 같습니다
예 1 : 양식의 모든 제어를 반복합니다
<script type = "text/javaScript"> // 양식 기능 getValues () {var f = document.forms [0]; // 양식을 얻습니다. Dom var elements = F. elements; // 모든 제어 배열을 가져옵니다 var str = ''; // split String // loop traversal for (var i = 0; i <elements.lenges; i ++) {var e = elements [i]; // 전류 제어 str += e.Value; // 분할 제어 값 str += '/n'; // 분리기 분할} alert (str); // 프롬프트 상자와 함께 결과를 표시} </script> <form> 텍스트 상자 : <input type = "text"name = "mytext"/> <br/> 라디오 박스 : <input type = "radio"name = "myradio"value = "1"/> 1 <입력 유형 = "radio"name = "myradov"value = "2"<br deplow <br depling list :> value = ""> == 선택 == </옵션> <옵션 값 = "1"> 1 </옵션> <옵션 값 = "2"> 2 </옵션> </select> <br/> <input type = "button"value = "getValues ()"/> </form>예 2 : 제어 이름을 통해 특정 제어 액세스
<script type = "text/javaScript"> // 제어 이름 함수를 통한 특정 컨트롤 액세스 getFormdom () {var f = document.forms [0]; // 양식을 얻습니다 dom var mytext = f.mytext; // 이름으로 제어 돔을 가져옵니다. // 제어 이름과 값 알림 (mytext.name + ":" + mytext.value); } </script> <form> 텍스트 상자 : <input type = "text"name = "mytext"/> <br/> <입력 유형 = "버튼"value = "getControl"onclick = "getFormdom ()"/> </form>예 3 : 양식에서 텍스트 상자 수를 얻습니다.
<script type = "text/javaScript"> // 양식에서 텍스트 상자 수를 얻습니다. getInputCount () {var f = document.forms [0]; // dom var elements = f.elements 양식을 가져옵니다. // 모든 제어 배열을 가져옵니다. var count = 0; // 총 숫자를 통계하십시오. // if (e.tagname == 'input'&& e.type == 'text') {count ++; // 총 숫자가 자체적으로 추가됩니다}} // 프롬프트 상자를 사용하여 결과 경고를 표시합니다 ( "텍스트 상자는" + count + "s"); } </스크립트>예 4 : 양식 수정을위한 제출 방법
메소드 속성은 양식을 제출할 때 사용되는 HTTP 메소드 (get 또는 post)를 지정합니다. get을 사용하면 페이지 주소 표시 줄에 양식 데이터가 표시되며 페이지 주소 표시 줄에 제출 된 데이터가 보이지 않기 때문에 게시물이 더 안전합니다.
<script type = "text/javaScript"> // 양식 제출 메소드 수정 함수 modifyMethod () {var f = document.forms [0]; // dom var method = f.mymethod.value 양식을 가져옵니다. // 선택한 메소드 F.method = 메소드; // 선택한 제출 방법 수정 // 프롬프트 상자를 사용하여 결과 경고를 표시합니다 ( "양식의 현재 제출 방법 :" + method); } </script> <form method = "post"> 제출 방법을 선택하십시오 : <select name = "mymethod"> <옵션 값 = ""> == 선택 == </옵션> <옵션 값 = "get"> get </옵션> <옵션 값 = "post"> post </옵션> </selep> <br/> input type = "valling"value = "onclick ="onclick " </form>예 5 : 양식의 동작 속성을 동적으로 지정합니다.
액션 속성은 양식을 제출할 때 수행 된 작업을 정의합니다.
제출 버튼을 사용하기 위해 양식을 서버에 제출하는 것이 일반적입니다.
일반적으로 양식은 웹 서버의 웹 페이지에 제출됩니다.
작업 속성이 생략되면 작업이 현재 페이지로 설정됩니다.
<script type = "text/javaScript"> // 동적으로 형식의 동작 속성을 지정하여 modifyAction () {var f = document.forms [0]; // 양식을 얻습니다. dom var newurl = f.newurl.value; // 선택된 메소드 F.Action = NewUrl; // 제출 된 양식의 조치 주소를 수정 // 프롬프트 상자를 사용하여 결과 경고를 표시합니다 ( "양식의 현재 동작 :" + f.action); } </script> <form method = "post"> 제출 메소드를 선택하십시오 : <input type = "text"name = "newurl"/> <br/> <입력 유형 = "value ="modify doverify action "onclick ="modifyAction () "/> </form>예 6 : 동적 선택적 초점 제어
<script type = "text/javaScript"> // 첫 번째 라디오 박스는 Focus function focusit () {var f = document.forms [0]입니다. // 양식 GET DOM VAR MYRADIO = F.MYRADIO; // 라디오 박스를 얻습니다 Myradio [0] .focus (); // 첫 번째 라디오 박스가 초점을 맞 춥니} </script> <form> 텍스트 상자 : <input type = "text"name = "mytext"/> <br/> 라디오 박스 : <input type = "radio"name = "myradio"value = "1"/> <입력 유형 = "radio"name = "myradio"value = "2"/>> <br depfown lists <my select "> <옵션. value = ""> == 선택 == </옵션> <옵션 값 = "1"> 1 </옵션> <옵션 값 = "2"> 2 </옵션> </select> <br/> <input type = "button"value = "첫 번째 라디오 상자는 초점"onclick = "focusit ()"/> </form>입니다.예 7 : 형식의 모든 컨트롤의 값을 초기 상태로 초기화합니다.
<script type = "text/javaScript"> // 양식의 모든 컨트롤 값을 초기 상태 함수 init () {var f = document.forms [0]; // dom f.reset () 양식을 가져옵니다. // reset () function} </script>를 사용합니다예 8 : 배치 모든 양식 컨트롤에 설명 추가
<script type = "text/javaScript"> // 모든 양식 컨트롤에 대한 설명 배치 기능 batchcomment () {var f = document.forms [0]; // 양식을 얻습니다 Dom var children = f.childnodes; // var newarr = [] 양식의 모든 자식 요소를 가져옵니다. // 새 요소 정의 배열 var j = 0; // 새 요소 배열의 위시 정의 // (var i = 0; i <children.length; i ++) {var e = children [i]; // 현재 자식 요소 NewArr [j ++] = e; // 새 배열에 추가 // (e.tagname == 'input'|| e.tagname == 'select') {// 텍스트 설명이있는 노드 추가 var text = document.creatextNode ( "이 항목이 필요하다"); newarr [j ++] = 텍스트; // 새 배열에 대한 노드 추가}} // 기존 양식 컨텐츠 F.InnerHtml = ''; // 배치 설명 (var i = 0; i <newarr.length; i ++) {// 오래된 요소와 설명 노드를 F.AppendChild (newarr [i])에 추가합니다. }}} </script>예 9 : 숨겨진 컨트롤을 사용하여 양식에 매개 변수를 추가합니다.
<script type = "text/javaScript"> // 함수 함수 showParams () {// 숨겨진 변수의 값을 설정합니다. 이 값은 태그의 값 문서의 값을 통해 지정할 수 있습니다. forms [0] .myHidden.value = '나는 숨겨져 있습니다'; // 문자 스 플라이 싱 변수 var str = '양식으로 제출 된 매개 변수는 다음을 포함합니다.'; // 연도 매개 변수 str + = '/n 년 :' + document.forms [0] .myyear.value; // 분할 이름 매개 변수 str + = '/n 이름 :' + document.forms [0] .myname.value; // 숨겨진 매개 변수 분할 str + = '/nhide 변수 :' + document.forms [0] .myHidden.Value; 경고 (str); // 문자의 값 표시} </script> <form> <입력 유형 = "hidden"name = "myHidden"/> 연도 : <select name = "myyear"> <옵션 value = "2012"> 2012 </옵션 </옵션 value = "2013"> 2013 </옵션> <옵션> <옵션> </select> <br/> <br/>>> <br/> <br/> 이름 = "myName"/> <br/> <br/> <input type = "button"value = "제출"onclick = "showparams ();"/> </form>예 10 : 모든 확인란을 확인하십시오
<script type = "text/javaScript"> // 모든 함수 확인 함수 checkall (c) {// 모든 확인란 가져 오기 var arr = document.getElementsByName ( 'myName'); if (c) {// (var i = 0; i <arr.length; i ++) {arr [i] .checked = true; // select}} else {// 모두를 선택하지 말고 모든 확인란을 전송하지 마십시오. <br> <input type = "checkbox"name = "myall"onclick = "checkall (this.checked)" /> all <br> <input type = "checkbox"name = "myName" /> 모든 <input type = "checkbox"name = "myName" /> 모든 <input type =.예 11 : 양식의 초점 컨트롤을위한 시선을 사로 잡는 스타일 설정
<script type = "text/javaScript"> function init () {var f = document.forms [0]; // 양식을 얻습니다. Dom var elements = F. elements; // 모든 제어 배열을 가져옵니다 var str = ''; // split Strings // loop traversal for (var i = 0; i <elements.length; i ++) {var e = elements [i]; // 현재 제어 e.onfocus = function () {// 초점에 대한 스타일 콜백 정의 // 테두리를 빨간색으로 수정 this.style.border = '1px solid red'; } e.onblur = function () {// 초점을 호출 this.style.border = ''; // 원래 테두리 스타일을 복원}}}} </script>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.