여기서 우리는 양식 요소에 대한 지식과 양식 제출을 소개합니다.
형태 요소 양식 요소의 DOM 인터페이스는 HTMLFormElement 이며 HTMLElement 에서 상속되는 HTMLFormElement이므로 다른 HTML 요소와 동일한 기본 속성을 가지지 만 몇 가지 고유 한 속성 및 방법이 있습니다.
| 속성 값 | 설명 |
|---|---|
| 수락-문자 | 서버가 처리 할 수있는 문자 세트, 여러 문자 세트는 공백으로 나뉩니다. |
| 행동 | 요청을 수락하는 URL,이 값은 폼 요소에서 입력 또는 버튼 요소의 Compartion 속성으로 덮을 수 있습니다. |
| 강요 | 모든 제어 세트 (htmlcollection) |
| ENCTYPE | 요청 된 코딩 유형,이 값은 폼 요소의 입력 또는 버튼 요소의 formenctype 속성으로 덮을 수 있습니다. |
| 길이 | 양식의 컨트롤 수 |
| 방법 | 전송 될 HTTP 요청 유형은 일반적으로 입력 또는 버튼 요소의 Formmethod 속성으로 처리 할 수 있습니다. |
| 이름 | 양식의 이름 |
| 리셋 () | 모든 양식 도메인을 기본값으로 재설정하십시오 |
| 제출하다 () | 양식을 제출하십시오 |
| 목표 | 요청 보내기 및 응답 수신의 창 이름,이 값은 양식 요소의 입력 또는 버튼 요소의 FormTarget 속성으로 덮을 수 있습니다. |
| 자동 완성 | 테이블 요소를 자동으로 구성할지 여부 |
입력 요소는 매우 널리 사용되는 양식 요소입니다.
텍스트 입력 <입력 유형 = 텍스트 이름 =>
입력 제출 <입력 유형 = 제출>
단일 버튼 입력 <입력 유형 = 무선 이름 = 동일한 이름 값을 가져야합니다.
입력 <input type = checkbox name = 동일한 이름 값 = 다른 해당 값>
디지털 입력 <입력 유형 = 숫자 min = max => 입력 상자는 숫자 만 입력 할 수 있으며 최대 값과 최소값을 설정할 수 있습니다.
범위 입력 <입력 유형 = 범위 min = max => 숫자와 유사하지만 입력 상자 대신 슬라이딩 바가 표시됩니다.
색상 입력 <input type = color>가 색상 선택기가 나타납니다.
날짜 입력 <input type = date>가 날짜 선택기를 나타냅니다.
이메일 입력 <입력 유형 = 이메일>은 텍스트 입력 상자로 표시되고 사용자 정의 키보드가 나타납니다.
전화 입력 <입력 유형 = 전화> 이메일 입력과 유사합니다.
URL Input <입력 유형 = URL> 이메일 입력과 유사하게 사용자 정의 키보드도 나타납니다.
Textarea 요소는 멀티 라인 텍스트 영역을 만들 수 있습니다.
<textArea name = id = color = 30 줄 = 10> </textArea>
cols와 행의 속성 값은 텍스트 영역의 너비와 높이를 나타냅니다.
선택 요소 및 옵션 요소를 사용하여 드롭 다운 메뉴를 만들 수 있습니다.
<name = id => <옵션 값 => </옵션> <옵션 값 => </옵션> <옵션 값 => </oplct>
라디오그룹화하는 방법?
예:
<입력 유형 = 라디오 이름 = 좋아하는 값 = 플레이 게임> 게임 게임
<입력 유형 = 무선 이름 = 좋아하는 값 = 쓰기 코드> 쓰기 코드
<입력 유형 = 무선 이름 = 성 가치 = 남자> 남성
<입력 유형 = 무선 이름 = 성 가치 = 여성> 여성, 여성,
이것은 라디오의 두 그룹입니다
자리 표시 자입력 필드의 예상 값을 설명 할 수있는 신속한 정보 (힌트)를 제공합니다.
입력 필드가 비어있을 때 프롬프트가 표시되며 필드가 초점을 맞추면 사라집니다.
유형 = 숨겨진숨겨진 입력을 정의하십시오. 숨겨진 필드는 사용자에게 보이지 않습니다. 숨겨진 필드는 일반적으로 기본값을 저장하며 JavaScript로 값을 수정할 수도 있습니다.
예를 들어, 보안의 경우 백그라운드에서 사용자에게 보이지 않는 이름 및 값 값을 사용하여 배경을 확인하여 위조 페이지를 확인하고 방지 할 수 있습니다.
제출 버튼제출 버튼을 추가하여 사용자가 양식을 제출할 수 있도록 구성하십시오.
다음 세 버튼은 클릭 할 때 양식 제출 이벤트를 트리거 할 수 있습니다.
<입력 유형 = 제출 /> <버튼 유형 = 제출> < /button> <입력 유형 = 이미지 />
사양에서 버튼 요소의 유형 기본값이 제출되지만 명상 값은 IE678의 버튼이므로 유형 = 항목을 호환성에서 버튼 요소에 수동으로 추가해야합니다.
이벤트 제출초기 사람은 양식 제출 버튼의 클릭 이벤트에 의해 양식 제출이 트리거 될 수 있습니다.
form.adeventListener ( '제출', function (e) {if (valid ()) {...} e.preventDefault ()}) 양식 요소에 위에서 언급 한 세 개의 버튼 중 하나가 없으면 사용자는 양식을 제출할 수 없습니다 (Enter 키는 유효하지 않음 submit() . 양식 검증의 작동은 submit() 방법을 호출해야합니다.
if (value ()) {form.submit ()} 양식 제출 및 사용자 경험현재 인기있는 Ajax+Cross -Domain Post (CORS) 기술을 기반으로, 우리는 Form Element를 사용하여 서버에 직접 데이터를 제출하지 않을 것입니다. 이것은 가능하지만 대부분의 경우 분해 현상이 있습니다.
JavaScript 양식 확인JavaScript를 사용하여 데이터가 서버로 전송되기 전에 이러한 입력 데이터를 HTML 양식으로 확인할 수 있습니다.
JavaScript로 검증 된 이러한 일반적인 양식 데이터는 다음과 같습니다.
사용자가 양식의 필요한 항목을 작성 했습니까?
사용자가 입력 한 메일 주소가 합법적입니까?
사용자가 법적 날짜를 입력 했습니까?
사용자는 숫자 필드에 텍스트를 입력합니까?
필수 (또는 선택 해야하는) 프로젝트다음 기능은 사용자가 양식의 필수 (또는 필수) 항목을 채웠는지 확인하는 데 사용됩니다. 채우거나 옵션이 비어 있으면 경고 상자가 나타나고 함수의 반환 값이 False입니다. 그렇지 않으면 함수의 반환 값이 참입니다 (데이터가 문제가 없음을 의미합니다).
함수 value_required (field, alerttxt) {with (value == null || value ==) {alerttxt};아래는 HTML 양식의 코드입니다.
<html> <head> <script type = text/javaScript> value_required (field, alerttxt) {with (value == null || value ==) {alert (alert lerttxt); {return true}} function value_form (this) {with (this) {if (value_required (이메일, 이메일을 작성해야합니다!) {email.foc us (); return false}}} < /script> < /head> <body> <form action = subctage.htm onsubmit = return validate_form (this) method = post> 이메일 : <입력 유형 = 텍스트 이름 = 30> <입력 유형 = 제출 값 = 제출> </form> </body> < /html> 이메일 확인다음 기능은 입력 데이터가 이메일 주소의 기본 구문과 일치하는지 여부를 확인합니다.
이는 입력 데이터에@ 기호와 도트 번호 (.)가 포함되어야 함을 의미합니다. 동시에,@@는 이메일 주소의 첫 번째 문자가 아니며@ 同时 이후에 최소한 1 점 번호 :
함수 value_email (field, alerttxt) {with (field) {apos = value.indexof = value.lastIndexof (. else {return true}}}아래는 HTML 양식의 전체 코드입니다.
<html> <head> <script type = text/javaScript> 함수 value_email (field, alerttxt) {with (field) {apos = value.indexof (@) dotpos = value .lastIndexof (.) if (apos <1 || dotpos-apos <2) {alert (alerttxt); return false} else {return true}} validate_form (with (thisform) {if (validate_ema) il (이메일, 유효한 전자 메일 주소가 아님) = {email.focus (); 텍스트 이름 = 이메일 크기 = 30> <입력 유형 = 제출 값 = 제출> </form> </body> </html> 바로 가기 키 제출양식 요소 패키지가 없으면 현재 페이지의 초점이 폼 요소에 있더라도 Enter 키를 누르면 키보드 제어에서 마우스/제스처 제어로 전환해야합니다. , 원본 흐름을 파괴합니다. 가장 쉬운 솔루션은 외부 층의 양식 요소로 래핑하고 양식 요소에 제출 버튼이 적어도 있는지 확인하는 것입니다. 이 시점에서 양식의 입력 도메인이 집중되면 사용자는 Enter 키를 눌러 제출을 트리거합니다.
브라우저 계정 비밀번호를 기억합니다양식을 제출할 때 모바일 브라우저를 포함한 높은 수준의 브라우저는 사용자에게 일반 사용자에게 매우 유용한 기능입니다. 폼 요소가 없으면 브라우저는 문의 창을 나타 내지 않습니다.
요약양식 응용 프로그램을 개발할 때 양식 요소를 직접 제출하려고하지 않아야합니다. 제출 버튼의 클릭 이벤트가 아닌 양식 요소 제출 이벤트에서 제출 된 사고 처리.
참조 :
요소를 양식 및 양식 제출하십시오