1. 양식 소개
Form <form>은 웹 페이지에서 가장 대화식 형식 중 하나입니다. 드롭 다운 목록 상자, 라디오 버튼, 확인란 및 텍스트 상자를 포함한 다양한 양식을 통해 사용자 데이터를 수신합니다. 이 기사는 주로 일반적으로 사용되는 속성과 방법을 형태로 소개합니다.
JavaScript는 효과적인 검증을위한 양식 데이터를 얻고, 형성 필드를 자동으로 할당하고, 양식 이벤트 처리 등을 자동으로 할당하는 등 양식을 작동하는 데 매우 편리 할 수 있습니다.
이 시점에서 각 형태는 물체, 즉 객체를 형성합니다. 이 객체는 Document.forms Collection을 통해 참조 할 수 있습니다. 예를 들어, NAMA 속성이있는 Form1의 양식을 사용할 수 있습니다.
다음과 같이 코드를 복사하십시오. document.forms [ "form1"]
뿐만 아니라 문서의 양식 색인을 통해 양식 개체를 참조 할 수도 있습니다. 예를 들어
다음과 같이 코드를 복사하십시오. document.forms [1]
참조 문서의 두 번째 형태 객체를 나타냅니다
다음은 여러 형식 요소를 포함하는 양식 요소이며, 각 요소에는 레이블 태그가 있으며 요소에 바인딩되므로 텍스트를 클릭하면 테이블로 설정하여 사용자 경험을 향상시킬 수 있습니다.
코드 사본은 다음과 같습니다.
<form method = "post"name = "myform1"action = "addinfo.aspx">
<p> <label for = "name"> 이름을 입력하십시오 : </label> <br> <input type = "text"name = "name"id = "name"> </p>
<p> <label for = "passwd"> 비밀번호를 입력하십시오 : </label> <br> <input type = "password"name = "passwd"id = "passwd"> </p>
<p> <label for = "color"> 좋아하는 색상을 선택하십시오 : </label> <br>
<name = "color"id = "color"를 선택하십시오
<옵션 값 = "빨간색"> 빨간색 </옵션>
<옵션 값 = "녹색"> 녹색 </옵션>
<옵션 값 = "blue"> blue </옵션>
<옵션 값 = "옐로우"> 옐로우 </옵션>
<옵션 값 = "시안"> Qing </옵션>
<옵션 값 = "보라색"> 보라색 </옵션>
</선택> </p>
<p> 성별을 선택하십시오 : <br>
<입력 유형 = "radio"name = "sex"id = "male"value = "male"> <label for = "male"> male </label> <br>
<입력 유형 = "radio"name = "sex"id = "여성"value = "female"> < "femal"> female </label> </p>
<p> 당신은 무엇을 좋아합니까 : <br>
<input type = "checkbox"name = "Hobby"id = "book"value = "book"> <label for = "book"> reading </label>
<input type = "checkbox"name = "Hobby"id = "net"value = "net"> < "net"> 인터넷에서 </label>
<입력 유형 = "checkbox"name = "Hobby"id = "sleep"value = "sleep"> <레이블 ""수면 "> 수면 </label> </p>
<p> <label for = "comment"> 메시지를 남기고 싶습니다 : </label> <br> <textarea name = "comment"id = "comment"cols = "30"rows = "4"> </textarea> </p>
<p> <입력 유형 = "제출"이름 = "btnsubmit"id = "btnsubmit"value = "제출">
<입력 유형 = "재설정"이름 = "btnreset"id = "btnreset"value = "Reset"> </p>
</form>
일반적으로 각 양식 요소에는 이름과 ID 속성이 있어야하며 이름은 서버로 넘겨주는 데 사용되며 ID는 바인딩 및 기능 필터링에 사용됩니다.
2. 양식의 액세스 요소
텍스트 상자, 라디오 버튼, 드롭 다운 버튼, 드롭 다운 목록 상자 또는 기타 컨텐츠 등 양식의 요소가 Form Elements Collection에 포함됩니다. 컬렉션에서 요소의 위치 또는 요소의 이름 속성을 사용하여 요소에 대한 참조를 얻을 수 있습니다.
코드 사본은 다음과 같습니다.
var oform = document.forms [ "form1"] // 양식을 얻습니다
var etextform = oform.elements [0]; // 첫 번째 요소를 얻습니다
var eTextPasswd = oform.elements [ "passwd"] // 이름 속성이있는 요소 가져옵니다.
가장 효과적이고 직관적 인 방법을 인용하십시오.
다음과 같이 코드를 복사하십시오. var ethtcomments = oform.elements.comments; // 이름 속성 주석으로 요소를 가져옵니다
3. 공개 속성 및 방법
형식의 모든 요소 (숨겨진 요소 제외)에는 몇 가지 일반적인 특성과 방법이 있습니다. 다음은 일반적으로 사용되는 몇 가지 목록입니다
코드 사본은 다음과 같습니다.
var oform = document.forms [ "form1"]; // 양식을 얻습니다
var imagestomments = oform.elements.comments; // 이름 속성 주석으로 요소를 가져옵니다
경고 (Oform.type); // 요소 유형보기
var etextPasswd = oform.elements [ "passwd"]; // 이름 Attribute Passwd의 요소를 가져옵니다
FoxtPasswd.focus (); // 특정 요소에 중점을 둡니다
4. 양식의 제출
버튼 기능이있는 버튼이나 사진을 통해 양식 제출이 완료됩니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "제출"이름 = "btnsubmit"id = "btnsubmit"value = "제출">
<입력 유형 = "image"name = "picsubmit"id = "picssubmit"src = "down.jpg">
사용자가 버튼 중 하나를 입력하거나 클릭하면 추가 코드없이 양식을 제출할 수 있습니다. 액션 속성을 양식으로 사용하여 제출 여부를 감지 할 수 있습니다.
코드 코드를 다음과 같이 복사하십시오. <form 메소드 = "post"name = "form1"action = "javaScript : alert ( 'submited')"> </form>
네트워크 속도가 너무 느리기 때문에 제출 과정에서 제출 버튼을 반복적으로 클릭 할 수 있습니다. 이것은 서버의 큰 부담이며 비활성화 된 속성을 사용하여 금지 될 수 있습니다. 예를 들어:
다음과 같이 코드를 복사하십시오. <input type = "button"value = "제출" />