HTML5의 강화된 요소 중 가장 주목할 만한 것은 폼 요소입니다. HTML5에서는 양식이 크게 개선되었으며 이전에 JavaScript 코딩이 필요했던 일부 기능을 이제 코딩 없이 쉽게 구현할 수 있습니다. 토론을 시작하기 전에 다음 사항에 유의해야 합니다.
HTML5에서 양식 컨트롤은 자신이 속한 하나 이상의 양식 외부에 있을 수 있습니다. 따라서 fieldset, label 및 input과 같은 양식 컨트롤에는 양식 컨트롤이 속한 양식을 식별하기 위해 양식 속성이 추가되었습니다.
HTML5 :
1. 양식 요소 자체에 autocomplete 및 novalidate라는 두 가지 새로운 속성이 추가됩니다. autocomplete 속성은 "드롭다운 제안 목록" 기능을 활성화하는 데 사용되고 novalidate 속성은 테스트 중에 유용할 수 있는 양식 유효성 검사 기능을 끄는 데 사용됩니다.
2. fieldset 요소는 세 가지 새로운 속성(disable, name 및 form)을 추가합니다. 비활성화 속성은 필드세트를 비활성화하는 데 사용되고, name 속성은 필드세트의 이름을 설정하는 데 사용되며, form 속성의 값은 앞서 언급한 것처럼 필드세트가 속한 하나 이상의 폼의 ID입니다. fieldset가 양식 외부에 배치되는 경우 fieldset이 하나 이상의 양식과 올바르게 연결될 수 있도록 fieldset 태그의 양식 속성을 설정해야 합니다.
3. for 속성 외에 label 요소에는 form 속성만 추가됩니다. 여기서 언급할 가치가 있는 것은 for 속성인데, 이전에는 이 속성을 실제로 눈치채지 못했습니다. for 속성은 레이블에 첨부된 양식 컨트롤을 지정하는 데 사용되므로 레이블을 클릭하면 첨부된 양식 컨트롤에 초점이 맞춰집니다. 예:
4. 입력 요소에는 양식의 유용성을 향상시키기 위해 몇 가지 새로운 유형과 속성이 도입되었습니다. 이러한 새로운 입력 유형은 데이터를 구성하고 분류하는 데 매우 유용하지만 안타깝게도 모든 유형을 제대로 지원하는 브라우저는 없습니다.
원래 버튼, 텍스트, 제출, 체크박스, 라디오, 선택, 비밀번호 유형 외에도 HTML5에는 다음과 같은 새로운 입력 유형이 추가되었습니다.
다음 예를 실행하여 다양한 브라우저의 지원을 확인할 수 있습니다.
자동 초점: 페이지가 로드된 후 자동으로 초점을 얻습니다.
form: 입력이 속하는 형식을 지정합니다. 여러 개일 수 있습니다.
formaction: 양식이 제출된 후 이 입력을 처리할 페이지(URL) 또는 파일을 지정합니다.
formenctype: 양식이 제출된 후 데이터를 인코딩하는 방법을 지정합니다.
formmethod: 양식 데이터를 전송하기 위한 HTTP 방법을 지정합니다. 이 방법은 해당 양식의 HTTP 방법을 재정의합니다.
formnovalidate: 제출 전에 데이터의 유효성을 확인하지 않습니다.
formtarget: 양식이 제출된 후 응답 콘텐츠를 표시할 위치를 지정합니다.
높이, 너비: 입력란의 길이와 너비, 이미지 유형에만 적용 가능합니다.
max, min: 입력값의 최대값과 최소값입니다. 의미 있는 숫자, 범위 및 날짜 유형에 적합합니다.
다중: 여러 값을 입력할 수 있는지 여부로 이메일 및 파일 형식에 적용됩니다.
패턴: 텍스트, 검색, URL, 전화, 이메일, 비밀번호에 적합한 입력값을 확인하기 위한 정규식을 지정합니다.
자리 표시자: 입력하기 전에 정보를 묻는 메시지를 표시하며 텍스트, 검색, URL, 전화, 이메일, 비밀번호에 적용됩니다.
필수: 필수 항목인지 여부. 필수 항목이 작성되지 않은 경우 문자, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기에 해당 양식을 제출할 수 없습니다. 번호, 확인란, 라디오 및 파일 형식.
step: 숫자, 범위, 날짜, 날짜/시간, 날짜/시간-로컬, 월, 시간, 주 유형에 적용 가능한 자동 성장을 위한 단계 값을 입력합니다.
list: datalist 요소와 함께 사용해야 하는 입력 항목의 후보 목록입니다. 목록 속성은 텍스트, 검색, URL, 전화, 이메일 등의 유형에 사용할 수 있습니다. 날짜, 숫자, 범위 및 색상은 FireFox에서 작동합니다. 간단한 예를 살펴보세요.
사용처:
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.cnblogs.com/xugang/archive/2010/08/12/1798005.html