JavaScript 조작 폼동력 노드 자바 대학 정리

6436 단어 js조작 표
폼 자체 도 DOM 트 리 이기 때문에 자 바스 크 립 트 로 폼 을 조작 하 는 것 과 DOM 을 조작 하 는 것 은 유사 하 다.
그러나 폼 의 입력 상자,드 롭 다운 상자 등 은 사용자 의 입력 을 받 을 수 있 기 때문에 자바 스 크 립 트 로 폼 을 조작 하면 사용자 가 입력 한 내용 을 얻 거나 입력 상자 에 새로운 내용 을 설정 할 수 있 습 니 다.
HTML 폼 의 입력 컨트롤 은 주로 다음 과 같은 몇 가지 가 있 습 니 다.
  • 가 텍스트 상자,대응 하 는,텍스트 를 입력 하 는 데 사 용 됩 니 다
  • 가 구령 상자,대응 하 는는 구령 을 입력 하 는 데 사 용 됩 니 다
  • 가 단일 선택 상자,대응 하 는
  • 가 벼 운 체크 상자,대응 하 는,여러 가지 선택 에 사 용 됩 니 다
  • 아래쪽 상자,대응 하 는,사용 자 는 보이 지 않 지만 폼 을 제출 할 때 숨겨 진 텍스트 를 서버 에 전송합니다
  • 획득 값
    만약 에 우리 가노드 의 인용 을 얻 었 다 면 value 를 직접 호출 하여 해당 하 는 사용자 의 입력 값 을 얻 을 수 있 습 니 다.
    
    // <input type="text" id="email">
    var input = document.getElementById('email');
    input.value; // '      '
    이 방식 은 text,password,hidden,select 에 사용 할 수 있 습 니 다.단,체크 상자 와 체크 상자 에 대해 value 속성 은 HTML 에 미리 설 정 된 값 으로 되 돌아 갑 니 다.실제 사용자 가'체크'옵션 을 선 택 했 는 지 확인 해 야 하기 때문에 checked 로 판단 해 야 합 니 다.
    
    // <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
    // <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
    var mon = document.getElementById('monday');
    var tue = document.getElementById('tuesday');
    mon.value; // '1'
    tue.value; // '2'
    mon.checked; // true  false
    tue.checked; // true  false
    설정 값
    설정 값 은 가 져 오 는 값 과 유사 합 니 다.text,password,hidden 및 select 에 대해 서 는 value 를 직접 설정 하면 됩 니 다.
    
    // <input type="text" id="email">
    var input = document.getElementById('email');
    input.value = '[email protected]'; //          
    체크 상자 와 체크 상자 에 대해 서 는 checked 를 true 또는 false 로 설정 하면 됩 니 다.
    HTML 5 컨트롤
    HTML 5 는 date,datetime,datetime-local,color 등 표준 컨트롤 을 대량으로 추 가 했 습 니 다.모두탭 을 사용 합 니 다.
    
    <input type="date" value="2015-07-01">
    <input type="datetime-local" value="2015-07-01T02:03:04">
    <input type="color" value="#ff0000">
    HTML 5 를 지원 하지 않 는 브 라 우 저 는 새로운 컨트롤 을 식별 할 수 없습니다.type="text"로 표 시 됩 니 다.HTML 5 를 지원 하 는 브 라 우 저 는 포맷 된 문자열 을 가 져 옵 니 다.예 를 들 어 type="date"형식의 input 의 value 는 유효한 YYYY-MM-DD 형식의 날짜 나 빈 문자열 을 보장 합 니 다.
    양식 을 제출 하 다
    마지막 으로 자 바스 크 립 트 는 폼 제출 을 두 가지 방식 으로 처리 할 수 있 습 니 다(AJAX 방식 은 뒤에서 소개 합 니 다).
    방법 하 나 는
    요소 의 submit()방법 으로 폼 을 제출 하 는 것 입 니 다.예 를 들 어

    좋은 웹페이지 즐겨찾기