HTML5 양식의 새로운 속성에 대한 자세한 설명

H5에서는 양식이 페이지의 어느 곳에도 배치 될 수 있으며, 속성 값은 양식의 ID입니다.

 <form id = testform> <입력 유형 = 텍스트> </form> <textarea form = testform> </textarea>

H4에서는 양식의 제출 형태입니다

 <양식 action = 1.jsp> </form>

전체 양식을 제출하십시오

H5에서는 양식의 각 속성에 제출 된 JSP 페이지를 추가 할 수 있습니다.

 <양식 action = 1.jsp> <입력 유형 = 제출 조치 = 1-1.jsp> 1 페이지에 제출 </form> <입력 유형 = 제출 조치 = 1-2.jsp> 2 페이지 </form>에 제출 <입력 유형 = 제출 조치 = 1-3.jsp> 3 페이지에 제출 </form> </form>

양식의 각 요소의 제출 방법을 지정할 수 있습니다.

 <양식 action = 1.jsp> <입력 유형 = 제출 action = 1-1.jsp formmethod = post> 1 페이지에 제출, 게시물 제출 방법 </form> <입력 유형 = 1-2.jsp formmethod = get> 제출 2 페이지로 제출 방법 </form> </form>을 받으십시오

위와 동일, 역할과 모든 요소, 코드는 약간입니다.

위와 동일, 역할과 모든 요소, 코드는 약간입니다.

텍스트 상자, 선택 상자 및 버튼 컨트롤에 자동 초점 속성을 추가하면 화면이 열리면 초점이 자동으로 얻어집니다.

 <입력 유형 = 텍스트 action = 1-3.jsp autofocus> 3 페이지에 제출 </form>

자동 초점 속성이있는 페이지에 하나의 컨트롤이 있으며 남용 할 수 없습니다.

대부분의 입력 요소에서 사용될 수 있습니다. 입력 값이 비어 있으면 샤워 디스플레이 텍스트 정보를 제출할 수 없습니다.

양식의 모든 요소에 labls 속성을 추가 할 수 있으며, 속성 값은 Nodelist 객체이며 요소에 바인딩 된 레이블 요소 모음을 나타냅니다.

 <text/javaScript> Wind ') ;; = () {if (text.value.trim () ==) {//alert_labels.length) if (text.labels.length == 1) {var label = createElement (label); label.setattribute (for, text); 색상 : red);}} else if (text.labels.length> 1) form.removechild (text.labels [1]); BTN 유형 = 버튼 값 = 검증> </form>

사용자가 값을 입력하지 않으면 검증을 클릭하면 레이블 요소가 텍스트 상자에 입력되면 텍스트의 텍스트가 있습니다. 이름을 입력합니다

테이블 단위 요소를 레이블 안에 배치하고 태그의 제어 특성을 통해 테이블 ​​요소에 액세스 할 수 있습니다.

 <text/javaScript> function setValue () {console.log (1); <label id = label> 우편 번호 : <입력 id = txt_zip maxlength = 6> <small> 6 자리를 입력하십시오 </small> </label> <입력 유형 = 버튼 = 기본값 설정 oncliclk = setValue ()> < < /form>

관광객의 페이지를 열고 기본값 설정 버튼 설정을 클릭하면 텍스트 상자에 231456이 표시됩니다.

텍스트 상자가 선택 상태에있을 때 프롬프트 정보 (회색)를 입력하십시오.

 <입력 유형 = 텍스트 palceholder = hahah>

H5의 새로운 Datalist 요소와 결합하여 생산 프롬프트 박스

 텍스트 : <입력 유형 = 텍스트 이름 = 인사말> <!-사용 스타일 = 디스플레이 : 없음 디스플레이로 설정-> <datalist id = display : none> 옵션 값 = 사람입니다. PEOPLE </옵션> <옵션 값 = 당신은 돼지입니다.

텍스트 상자에 입력하면 아래에 세 개의 열이 있습니다

AutoComplete에는 3 개의 꺼짐 (지정되지 않음)이 있습니다. 지정되면 관광객의 기본값을 사용하십시오. 사용 방법은 다음과 같습니다

 <입력 유형 = 텍스트 이름 = 인사말 목록 = 인사 autocomplete = on>

당신이 사람 인 경우 텍스트 상자를 입력하면 제출을 클릭하고 이전 페이지로 돌아가서 텍스트 상자에 저를 입력하면 사람이되도록 촉구합니다.

HTML 부분에서 정규 표현식 판단의 입력 값이 요구 사항을 충족하는지 여부는 동일합니다.

내용을 입력하십시오 : <입력 유형 = 텍스트 패턴 = [0-9] [az] {3}>

이 코드 세그먼트는 입력이 잘못된 경우 3 개의 숫자 3 개의 대문자를 입력해야합니다.

입력의 텍스트 및 텍스트주의 요소의 경우, 사용자 가이 두 요소에서 텍스트의 일부를 선택하면 요소를 사용하여 선택 방향을 얻을 수 있습니다.

 <text/javaScript> 함수 alertSelectionDirection () {var 컨트롤 = var direction = tion;} </script> <input type = 텍스트 이름 = 텍스트> <입력 유형 = 버튼 값 = 기억 나게 onclick = alertsElectionDirection ()> </form>

Check Box의 경우 과거에 HTML5에서 선택 및 비 선택 상태 만 JS에서 인덱스 속성을 사용하여 확인란이 명확하게 선택되지 않았 음을 나타냅니다.

 <cript> var cb = getElementById (cb);

• 높이 : 그림 버튼에 그림의 높이를 지정합니다.
• 너비 : 그림 버튼에서 그림의 너비를 지정합니다.

 <입력 유형 = 이미지 src = img/2.png 너비 = 23 높이 = 23>

• MaxLength : 정수 값을 사용하여 설정하여 Textarea 요소에 입력 할 수있는 텍스트 수를 제한합니다.
• 랩 : 속성 값을 소프트 및 하드로 지정할 수 있습니다. 텍스트가 지정된 범위의 행에 사용되지 않고 자동으로 라인을 변경하면 양식을 제출할 때 양식이 변경 선에 추가됩니다. .

위의 내용은이 기사의 내용이 모든 사람의 학습이나 업무에 도움이되기를 바랍니다.