DOM 기본 튜토리얼: DOM을 사용하여 양식 제어_기본 지식

1. 양식소개

폼

은 드롭다운 목록 상자, 라디오 버튼, 체크박스, 텍스트 상자 등 다양한 형식을 통해 사용자 데이터를 받는 웹 페이지의 양식 중 하나입니다. 사용된 속성 및 메소드
효과적인 검증을 위한 폼 데이터 획득, 폼 필드에 자동으로 값 할당, 폼 이벤트 처리 등 JavaScript로 폼을 쉽게 조작할 수 있습니다.
이때 각 양식은 객체, 즉 양식 객체로 구문 분석됩니다. 이러한 객체는 document.forms 컬렉션을 통해 참조할 수 있습니다. 예를 들어 form1이라는 속성을 가진 양식은 을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

document.forms["form1"]

그뿐만 아니라 문서의 색인을 통해 양식 개체를 참조할 수도 있습니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

document.forms[1]

은 참조 문서

의 두 번째 양식 개체를 나타냅니다.

다음은 여러 양식 요소를 포함하는 양식입니다. 각 요소에는 레이블 태그가 있으며 이러한 방식으로 텍스트를 클릭하여 양식을 설정하고 선택할 수 있으므로 사용자 경험이 향상됩니다.

코드 복사 코드는 다음과 같습니다.

이름을 입력하세요:
< ; /p>

비밀번호를 입력하세요:
< ; /p>

가장 좋아하는 색상을 선택하세요:


红
녹색
<옵션 값="블루">블루
<옵션 값="노란색">黄
<옵션 값="청록색">青
<옵션 값="보라색">보라색

성별을 선택하세요:

male

female

무엇을 좋아하시나요:

독서
online
sleep

메시지를 남기고 싶습니다:

일반적으로 각 양식 요소에는 name 및 id 속성이 있어야 하며, name은 이를 서버에 전달하는 데 사용되고, id는 바인딩 및 기능 필터링에 사용됩니다.

2.

형식의 요소에 액세스합니다.

텍스트 상자, 라디오 버튼, 드롭다운 버튼, 드롭다운 목록 상자 또는 기타 콘텐츠 등 양식의 요소는 양식의 요소 컬렉션에 포함됩니다. 컬렉션 또는 요소의 이름 속성을 사용하여 이 요소에 대한 참조를 가져옵니다.

코드 복사 코드는 다음과 같습니다.

var oForm = document.forms["form1"]//양식 가져오기
          var otextForm = oForm.elements[0] //첫 번째 요소 가져오기
           var otextPasswd = oForm.elements["passwd"] //이름 속성이 passwd인 요소 가져오기

가장 효과적이고 직관적인 방법으로 인용하세요:

코드 복사 코드는 다음과 같습니다.

var otextcomments = oForm.elements.comments; 설명 요소인 name 속성

3. 공용 속성 및 메서드

양식의 모든 요소(숨겨진 요소 제외)에는 몇 가지 공통 속성과 메서드가 있습니다. 다음은 일반적으로 사용되는 몇 가지 사항입니다

코드 복사 코드는 다음과 같습니다.

var oForm = document.forms["form1"] //양식 가져오기
                 var otextcomments = oForm.elements.comments //이름 속성이 주석인 요소 가져오기
               Alert(oForm.type) //요소 유형 보기
                var otextPasswd = oForm.elements["passwd"] //이름 속성이 passwd인 요소 가져오기
​​​​​​otextPasswd.focus(); //특정 요소에 포커스

4. 양식 제출

폼 제출은 버튼 기능이 있는 버튼이나 이미지를 통해 완료

코드 복사 코드는 다음과 같습니다.

          

사용자가 Enter 키를 누르거나 버튼 중 하나를 클릭하면 추가 코드 없이 양식 제출을 완료할 수 있습니다. 양식의 action 속성을 통해 제출 여부를 확인할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

양식을 제출하는 동안 네트워크 속도가 느려서 사용자가 제출 버튼을 반복적으로 클릭할 수 있는데, 이는 서버에 큰 부담이 됩니다. 이 동작은 비활성화된 속성을 사용하여 금지할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

;