javascript 빠 른 입문 15 -- 폼

대부분의 웹 페이지 와 사용자 간 의 상호작용 은 폼 에서 발생 합 니 다. 폼 에는 텍스트 필드, 버튼, 체크 상자, 드 롭 다운 목록 등 대화 식 HTML 요소 가 많 습 니 다.문서 대상 차원 도 에서 볼 수 있 듯 이 폼 은 문서 에 포함 되 어 있 기 때문에 폼 에 접근 하려 면 document 대상 을 통 해 방문 해 야 합 니 다.
폼 개체
폼 이란 form 태그 와 그 안의 내용 을 말 합 니 다. 폼 대상 을 가 져 오 려 면 form 태그 에 id 속성 을 추가 한 다음 document. getElement ById 방법 으로 얻 을 수 있 습 니 다.document. getElementsByTagName ("form") 을 사용 하여 모든 폼 의 집합 을 가 져 온 다음 아래 표 시 를 통 해 접근 할 수 있 습 니 다.form 태그 에 name 속성 을 추가 한 다음 document. getElementsByTagName 을 사용 하여 접근 할 수 있 습 니 다. 또한 아래 표 시 를 사용 하여 접근 해 야 합 니 다.
사실, 0 레벨 DOM (0 레벨 DOM 은 어떠한 DOM 규범 도 아 닙 니 다. 사실은 BOM 의 내용 이지 만 브 라 우 저 는 모두 이 루어 지 는 것 이 좋 습 니 다) 은 더 간단 한 From 대상 에 접근 하 는 방법 인 document. formName 을 사용 합 니 다.

    <form name="formName"></form>
    var fm = document.formName;//              
    // document.getElementsByTagName("form")    document.forms  
    var fm = document.forms[0];//     Form  

 
접근 폼 요소
Form 대상 에 elements 속성 이 있 습 니 다. 가방 은 form 태그 에 있 는 모든 폼 컨트롤 (input, select 등 태그 이지 만 div 와 같은 태그 가 포함 되 지 않 습 니 다) 을 포함 하 는 가짜 배열 입 니 다.

    var fm = document.forms[0];
    alert(fm.elements.length);//length          

 
이전에 input 와 같은 탭 에 접근 하 는 것 은 다른 탭 에 접근 하 는 것 과 다 를 바 가 없습니다. ID 를 사용 할 수도 있 고 className 을 사용 할 수도 있 습 니 다. 그러나 폼 에 있 을 때 nam 을 사용 하여 접근 할 수 있 습 니 다.

    <form name="formName">
        <input name="textInput" type="text" value="   " />
    </form>
    alert(document.formName.textInput.value);

 
Form 대상 관련 이벤트 및 방법
폼 을 제출 할 때 submit 이벤트 가 발생 합 니 다. 이벤트 감청 을 설정 하고 사용자 가 폼 을 제출 할 때 폼 내용 을 검사 할 수 있 습 니 다.또한 사용자 입력 이 잘못 되 었 을 경우 폼 제출 을 막 으 려 면 이벤트 처리 함수 에서 return false 를 사용 하면 됩 니 다. 정확 할 때 폼 의 submit 방법 으로 폼 을 제출 할 수 있 습 니 다. 폼 의 submit 방법 을 사용 할 때 submit 이벤트 처리 함 수 를 실행 하지 않 습 니 다.

    document.formName.onsubmit = function () {
        //    
        if (result) {
            this.submit();
        } else {
            return false;
        }
    };

 
폼 이 리 셋 될 때 reset 이벤트 가 발생 하지만, 이 이 벤트 는 의미 가 크 지 않 습 니 다. reset 단추 자체 가 의미 가 크 지 않 기 때 문 입 니 다.동시에 reset 방법 도 있 습 니 다.

    document.formName.onreset = function () {
        if (confirm("         ？")) {
            this.reset();
        } else {
            return false;
        }
    };

 
폼 요소
체크 단추 와 체크 상자
체크 단추 와 체크 상자 의 공 통 된 속성 이 있 습 니 다. checked 는 이 단추 가 선택 되 었 는 지 여 부 를 가 리 킵 니 다.다른 것 은 여러 개의 체크 버튼 이 같은 name 을 사용 하여 같은 그룹 으로 나 뉘 고 한 개 만 선택 되 는 경우 가 많 습 니 다. 그러면 이 name 을 사용 하여 접근 할 때 여러 개의 버튼 이 같은 이름 을 사용 하기 때문에 하나의 배열 로 돌아 갑 니 다. 한 개 만 있 을 때 (사실은 체크 버튼 이 하나 밖 에 없 는 경우) 이 요 소 를 되 돌려 줍 니 다.

    var radios = document.formName.radios;//         name radios
    alert(radios.length);//        
    var one = document.formName.one;//    
    alert(one.checked);//       

 
checked 와 유사 합 니 다. default Checked 속성 이 있 습 니 다. HTML 에서 지정 한 기본 선택 여 부 를 되 돌려 줍 니 다.
단일 텍스트 상자 와 여러 줄 텍스트 상자
한 줄 텍스트 상 자 는 type 속성 을 text 로 설정 한 input 태그 입 니 다. 여러 줄 텍스트 상 자 는 textarea 입 니 다. 다른 input 태그 와 같은 value 속성 을 제외 하고 defaultValue 속성 은 텍스트 상자 의 기본 텍스트, 즉 HTML 에서 지정 한 value 값 을 표시 합 니 다.
텍스트 상자 에 또 하나의 방법 이 있 습 니 다. select 는 텍스트 상자 의 텍스트 를 선택 한 상태 로 만 들 수 있 습 니 다.
대상 선택
폼 요소 중 가장 복잡 한 것 은 select 대상 이 라 고 할 수 있 습 니 다.select 는 option 탭 을 포함 하고 optgroup 탭 을 포함 할 수도 있 습 니 다.비록 select 는 많이 선택 할 수 있 지만, 우 리 는 여기 서 단일 선택 만 토론 하고, 많이 선택 하 는 것 은 유사 하 다!

    //  ，  select      name（  ID    ， name   ）
    var select = document.formName.mySel;
    //           ，      selectedIndex
    alert(select.selectedIndex);//       0   
    //select    options        ，      option，         
    alert(select.options[select.selectedIndex].value);//      
    alert(select.options[select.selectedIndex].text);//text   option     
    //      select      option，    options.length
    // HTML DOM select      length  
    alert(select.length);//   options.length  

 
선택 한 값 가 져 오기

    var mySel = document.formName.mySel;
    alert(mySel.options[mySel.selectedIndex].value);
    //      
    alert(mySel.value);

 
select 대상 에 option 을 추가 하면 document. createElement 및 appendChild 등 방법 을 사용 할 수 있 지만 HTML DOM 은 우리 에 게 더욱 편리 한 방법 을 제공 합 니 다.

    var opt = new Option("      ","   ");//document.createElement("option");
    var select = document.formName.mySel;
    select.add(opt,select.options[0]);// opt      option   
    select.add(opt);// IE ，        ，  opt     
    //      FF    ，         
    select.add(opt,null);//   IE   
    //          ,     
    select.add(opt,select.options[select.length-1]);
    //  option   remove
    select.remove(1);//remove        

 
options 배열 의 가장 특별한 점 은 실제 배열 과 매우 비슷 하 다 는 것 입 니 다. length 를 설정 하여 요 소 를 줄 일 수도 있 고 요 소 를 특정한 항목 에 직접 부여 하여 수정 할 수도 있 습 니 다.

    var opts = document.formName.mySel.options;
    opts[0]=new Option("Text","Value");
    opts.length=2;//         option
    opts[3]=new Options("ABC",123);//        

 
Option 대상 에 도 default Selected 속성 이 있 습 니 다. HTML 에서 기본 선택 항목 인지 지정 합 니 다.
폼 요소 특성 이벤트
폼 컨트롤 이 초점 을 잃 었 을 때 blur 이벤트 가 발생 하고 컨트롤 이 초점 을 얻 었 을 때 focus 이벤트 가 발생 합 니 다.이에 대응 하여 blur 방법 은 폼 컨트롤 에 초점 을 잃 게 합 니 다. focus 방법 은 컨트롤 에 초점 을 맞 춥 니 다. Form 대상 의 submit 방법 과 마찬가지 로 자바 스 크 립 트 를 사용 하여 blur 방법 과 focus 방법 은 관련 이벤트 감청 함 수 를 촉발 하지 않 습 니 다.
select 대상 의 change 이벤트: 사용자 가 옵션 을 선택 하거나 선택 을 취소 하면 change 이벤트 가 발생 합 니 다.
textarea 대상 의 change 이벤트: 사용자 가 텍스트 영역의 값 을 바 꾸 고 키보드 초점 을 다른 곳 으로 이동 하여 변경 사항 을 확인 할 때 change 이벤트 가 발생 합 니 다.
select 이벤트: 텍스트 상자 의 텍스트 가 선택 되 었 을 때 발생 합 니 다.