HTML5 강화 요소 중에서 가장 주목할만한 요소는 형태 요소입니다. HTML5에서 양식이 크게 트림되었으며 이전에 필요한 JavaScript 인코딩이 코딩없이 쉽게 구현할 수 있습니다. 토론을 시작하기 전에 주목해야 할 사항은 다음과 같습니다.
html5에서, 양식 제어는 그것이 속한 하나 이상의 형태의 외부에있을 수있다. 따라서 FieldSet, 레이블 및 입력과 같은 양식 컨트롤에는 양식 제어가 속한 양식을 식별하기 위해 모든 양식 속성이 추가되었습니다. html5에서 :1. 양식 요소 자체는 두 가지 새로운 속성을 추가합니다 : autocomplete와 novalidate. 자동 완성 속성은 드롭 다운 제안 목록 기능을 활성화하는 데 사용되며 Novalidate 속성은 양식 검증 기능을 끄는 데 사용되며 테스트 할 때 유용합니다.
2. FieldSet 요소는 세 가지 새로운 속성, 즉 비활성화, 이름 및 양식을 추가합니다. 비활성화 속성은 필드 셋을 비활성화하는 데 사용되며 이름 속성은 필드 셋의 이름을 설정하는 데 사용되며 형식 속성의 값은 필드 셋이 속한 하나 이상의 양식의 ID입니다. 앞에서 언급했듯이, 필드셋이 양식 외부에 배치되면 FieldSet이 하나 이상의 양식과 올바르게 연관 될 수 있도록 FieldSet 태그의 형태 특성을 설정해야합니다.
3. for 속성 외에도 레이블 요소는 양식 속성 만 추가합니다. 여기서는 이전에주의를 기울이지 않은 For Attribute를 언급 할 가치가 있습니다. for 속성은 레이블에 첨부 된 양식 컨트롤을 지정하는 데 사용됩니다. 이 방법 으로이 레이블을 클릭하면 첨부 된 양식 컨트롤이 다음과 같은 초점을 얻습니다.
<form action = "demo_form.asp"id = "form1">
<label for = "name"> me </label> <input id = "name"type = "text"> </input>를 클릭하십시오
<입력 유형 = "제출"값 = "제출" />
</form>
나를 클릭하면 다음 입력 상자가 초점을 맞 춥니 다.
4. 입력 요소는 양식의 유용성을 향상시키기 위해 몇 가지 새로운 유형과 속성을 소개합니다. 이러한 새로운 입력 유형은 데이터를 구성하고 분류하는 데 매우 유용합니다. 불행히도 브라우저는 이러한 모든 유형을 잘 지원할 수 없습니다.
원본 버튼, 텍스트, 제출, 확인란, 라디오, 선택, 암호 외에도 HTML5는 다음과 같은 새로운 입력 유형을 추가합니다.
색상 : 색상다양한 날짜 : 날짜, dateTime, dateTime-local, 월, 주, 시간
이메일 : 이메일
번호 : 번호
범위
검색 : 검색
전화 : 전화
URL 유형 : URL
다음 예제를 실행하여 다른 브라우저의 지원 상태를 볼 수 있습니다.
<form action = "demo_form.asp">
좋아하는 색상을 선택하십시오 : <input type = "color"name = "favcolor" />
생일 : <입력 유형 = "날짜"이름 = "bday" />
생일 (날짜와 시간) : <입력 유형 = "dateTime"name = "bdaytime" />
생일 (날짜 및 시간) : <입력 유형 = "dateTime-local"name = "bdaytime" />
생일 (월 및 연도) : <input type = "month"name = "bdaymonth" />
시간을 선택하십시오 : <input type = "time"name = "usr_time" />
일주일을 선택하십시오 : <입력 유형 = "주"이름 = "Week_year" />
수량 (1과 5 사이) : <입력 유형 = "숫자"이름 = "수량"min = "1"max = "5" />
수량 (1과 10 사이) : <입력 유형 = "범위"이름 = "포인트"min = "1"max = "10" />
검색 Google : <입력 유형 = "검색"이름 = "Googlesearch" />
전화 : <입력 유형 = "tel"name = "usrtel" />
홈페이지를 추가하십시오 : <input type = "url"name = "homepage" />
이메일 : <입력 유형 = "이메일"이름 = "usremail" />
<input src = "submitbutton.png"type = "제출" />
</form>
다음은 새로 추가 된 입력 속성입니다.
AutoComplete : 값을 켜거나 끄고 이전에 입력 한 정보를 자동으로 표시합니다. 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 데이트 피커, 범위 및 색상 유형에 적용 할 수 있습니다. 자동 초점 : 페이지가로드 된 후 자동으로 초점을 맞 춥니 다. 형태 : 입력이 속한 양식을 지정하며, 이는 다중 일 수 있습니다. 형식 : 양식이 제출 된 후이 입력을 처리하는 페이지 (URL) 또는 파일을 지정합니다. FormEnctype : 양식을 제출 한 후 데이터가 인코딩되는 방법을 지정합니다. Formmethod : 해당 양식의 HTTP 방법을 무시하는 양식 데이터를 전송하기위한 HTTP 방법을 지정합니다. formnovalidate : 데이터의 유효성은 제출 전에 확인되지 않습니다. formtarget : 제출 후 양식의 내용을 표시 할 위치를 지정합니다. 높이, 너비 : 입력 상자 길이 및 너비, 이미지 유형에만 적용됩니다. MAX, MIN : 입력 값의 최대 및 최소값. 의미있는 숫자, 범위, 날짜 유형에 적용됩니다. 다중 : 여러 값을 입력 할 수 있는지 여부, 이메일 및 파일 유형에 적합합니다. 패턴 : 텍스트, 검색, URL, TEL, 이메일, 비밀번호에 적용 할 수있는 입력 값을 확인하기 위해 정규 표현식을 지정합니다. 자리 표시 자 : 입력 전 신속한 정보, 텍스트, 검색, URL, 전화, 이메일, 비밀번호에 적용됩니다. 필수 : 필요한 경우 필요한 경우 양식을 제출할 수 없습니다. 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 번호, 확인란, 라디오 및 파일 유형에 적용됩니다. 단계 : 자동으로 성장할 때 단계 값을 입력하고 수, 범위, 날짜, DateTime, DateTime-Local, 월, 시간 및 주 유형에 적합합니다. 목록 : 입력 항목의 후보 목록은 데이터리스트 요소와 함께 사용해야합니다. 목록 속성은 텍스트, 검색, URL, 전화, 이메일, 날짜, 번호, 범위 및 색상과 같은 이러한 유형에서 사용할 수 있습니다. Firefox에서 유효한 것으로 추정됩니다. 작은 예를 참조하십시오.<fieldset>
<전설> 즐겨 찾기 </범례>
<p>
<라벨>
<입력 유형 = "텍스트"이름 = "즐겨 찾기"목록 = "옵션">
<datalist id = "옵션">
<옵션 값 = "a">
<옵션 값 = "b">
<옵션 값 = "C">
</datalist>
</레이블>
</p>
</fieldset>
다음 예제는 다양한 속성을 사용하려고 시도하며, 이는 실제 효과를보기 위해 다른 브라우저에서 실행할 수 있습니다.
<form action = "demo_form.asp">
이메일 : <입력 유형 = "이메일"이름 = "이메일"autocomplete = "on" />
이미지 : <입력 유형 = "image"src = "img_submit.gif"/>
1980-01-01 이전 날짜를 입력하십시오. <입력 유형 = "날짜"이름 = "bday"max = "1979-12-31">
2000-01-01 이후 날짜를 입력하십시오. <입력 유형 = "날짜"이름 = "bday"min = "2000-01-02">
수량 (1과 5 사이) : <입력 유형 = "숫자"이름 = "수량"min = "1"max = "5" />
이미지 선택 : <input type = "file"name = "img"multiple = "multiple" />
국가 코드 : <입력 유형 = "text"name = "country_code"pattern = "[a-za-z] {3}" />
이름 : <입력 유형 = "text"name = "fname"자리 표시기 = "이름" />
사용자 이름 : <input type = "text"name = "usrname"필수 = "필수" />
숫자 : <입력 유형 = "숫자"이름 = "points"step = "3" />
<입력 유형 = "제출" />
<입력 유형 = "제출"형식 = "demo_admin.asp"value = "admin으로 제출" />
<input type = "제출"포뮬라 파티 파트 = "multipart/form-data"value = "multipart/form-data로 제출"/>
<input type = "제출"formula = "post"format = "demo_post.asp"value = "post를 사용하여 제출" />
<입력 유형 = "제출"formnovalidate = "formnovalidate"value = "검증없이 제출" />
<입력 유형 = "제출"formtarget = "_ blank"value = "새 창에 제출" />
</form>
<form action = "demo_form.asp"id = "form1">
이름 : <입력 유형 = "text"name = "fname" />
<입력 유형 = "제출"값 = "제출" />
</form>
성 : <입력 유형 = "text"name = "lname"form = "form1" />
제안 : 모든 브라우저가 모든 유형을 지원하는 것은 아니지만 브라우저가 지원하지 않더라도 간단한 텍스트 입력 상자로 변성하기 때문에 이러한 새로운 유형을 사용하는 것이 좋습니다. 실제 참조 : W3C 튜토리얼 : http://www.w3schools.com/html5/default.asp공식 html5 지침 : http://dev.w3.org/html5/html-author/
꽤 좋은 가이드 웹 사이트 : http://html5doctor.com/
html5 중국 자습서 : http://www.html5china.com/
좋은 프론트 엔드 블로그 : http://www.pjhome.net/default.asp?cateid=1
JS 운영 양식에 대한 관련 지식 : http://www.vevb.com/xugang/archive/2010/08/12/1798005.html