HTML5는 Whatwg (Web HyperText Application Technology Working Group)에 의해 시작되었습니다. 초기 이름은 웹 응용 프로그램 1.0입니다. 이 표준은 Web Forms 2.0 표준을 흡수했으며 W3C 조직이 차세대 HTML5 표준으로 병합하기 위해 채택되었습니다.
머리말
오늘날 가장 광범위한 프로그래밍 언어를 가진 언어로서 HTML 언어는 사용하기 쉬운, 빠르며, 다중 브라우징 플랫폼 호환의 특성을 가지고 있습니다. 그러나 Times의 진행 상황에 따라 HTML 표준이 정체되었습니다. 이번에는 여전히 개발중인 HTML5 표준의 업데이트는이 마크 업 언어에 새로운 활력을 가져 왔다고 말할 수 있습니다. 이 기사는 HTML5의 웹 양식 2.0, 즉 양식 부분에 중점을 둘 것입니다.
양식은 웹 페이지의 공통 컨트롤 (세트)입니다. 웹 사이트 등록 및 로그인에서 엔터프라이즈 데이터 관리 시스템에 이르기까지 기본적으로 양식이 있습니다. 양식이 중요한 이유는 주로 많은 사용자 및 웹 배경 데이터를 업데이트하고 상호 작용하는 작업에 책임이 있기 때문입니다. 웹 개발자는 웹 양식을 좋아하고 싫어한다고 말할 수 있습니다. 그들은 데이터를 수집하고 구성하는 편리한 기능을 좋아하며, 그들의 기능을 크게 미워합니다. 최종 웹 사이트 사용자에서 입력 유형 확인, 양식 검증, 오류 프롬프트 등과 같은 일부 기능은 모든 개발자가 자연스럽게 필요한 기능 지점을 충족시키기 위해 JavaScript 및 DOM 프로그래밍을 사용하는 데 많은 노력을 기울여야합니다. Ajax의 인기로 Dojo, Yui 등과 같은 일부 JavaScript 도구 라이브러리는 개발자의 부담을 줄이기 위해 편리한 JavaScript 위젯 또는 API를 제공했습니다.
HTML5 웹 양식 2.0은 현재 웹 양식에서 포괄적 인 개선입니다. 간단하고 사용하기 쉬운 기능을 유지하면서 많은 내장 컨트롤 또는 제어 속성을 추가하여 사용자의 요구를 충족시키고 개발자의 프로그래밍을 줄입니다. 제 생각에는 HTML5는 주로 다음 측면에서 현재 웹 양식을 개선했습니다.
<입력 유형 = url> </input><입력 유형 = 이메일> </input>
<입력 유형 = 날짜> </input>
<데이터 선택 = http : // domain/getmyoptions> </select>
<입력 유형 = 텍스트 필수> </input><입력 유형 = 숫자 min = 10 max = 100> </input>
<제출><필드 이름 = 이름 색인 = 0> 피터 </필드>
<필드 이름 = 비밀번호 색인 = 0> 비밀번호 </field>
</제출>
HTML5의 새로운 양식 시스템을 사용하여 사용자 이름, 비밀번호, 생년월일, 기밀성 문제 등을 포함한 간단한 사용자 등록 인터페이스를 만들 것입니다. 코드는 다음과 같습니다.
<! doctype html> <html> <head> <style> p 레이블 {너비 : 180px; 플로트 : 왼쪽; 텍스트 정렬 : 맞습니다. Padding-Right : 10px} 테이블 {margin-left : 80px} 테이블 td {border-bottom : 1px solid #cccccc} input.submit {margin-left : 80px} </style> </head> <body> <body> <form action = '/register'EncType =/x-ww-form+xml method = <p> < 'in id (post/x-ww-form+xml use email to register)</label> <input name='name' required type='email'></input> </p> <p> <label for='password'>Password</label> <input name='password' required type='password'></input> </p> <p> <label for='birthday'>Date of birth</label> <input type='date' name='birthday' /> </p> <p> <label for = 'gender'> 국적> <select name = 'country'data = 'country'data = 'country ='country.xml '> </select> </p> <p> <label for ='photo '> personal avatar </labatar> <입력 ='파일 '이름 ='photo 'accept ='image/*'/> </p> <Table> <Td> <Template = template = themplate = themplate = themplate = 질문 </td> <td> 답변 </td> <td> </td> <td> </td> </head> <tr id = QuestionId 반복 = 템플릿 반복-시작 = 1 반복 min = 1 repeat-max = 3> <td> <입력 유형 = 텍스트 이름 = QuestionS [Question] .q> </td> <td> <텍스트 이름 = Questions [Question]. type = remod> delete </button> </td> </tr> </table> <p> <입력 유형 = 'value ='send 'class ='제출 '/> </p> </body> </html>HTML5 표준이 여전히 개발 중이므로 다른 브라우저를 지원하는 HTML5 기능은 상당히 제한됩니다. 그중에서도 오페라는 형태로 더 잘 지원합니다. 이 예제는 일반적으로 Opera9에서 실행됩니다. 렌더링은 다음과 같습니다.
이 예제는 이메일 유형 입력 상자 (ID) 및 날짜 유형 입력 상자 (생년월일)와 같은 새로운 HTML5 양식 요소를 사용합니다. 중복 모델은 사용자가 기밀 문제를 채우도록 안내하는 데 사용됩니다. 개인화 된 아바타의 업로드에서 파일 유형을 제한하여 사용자는 표준을 충족하는 콘텐츠를 업로드하기위한 사진을 선택할 수 있습니다. 국적 사용자 선택을위한 드롭 다운 선택 입력 상자는 봉사 활동 데이터 소스의 형태로 사용됩니다. 아웃 리치 데이터 소스는 coutries.xml을 사용하며 컨텐츠는 다음과 같습니다.
<XMLNS = http : //www.w3.org/1999/xhtml> <sollite> 중국 </옵션> <pluxt> 일본 </옵션> <pluxt> 한국 </옵션> </select>
양식의 ENCTYPE는 Application/X-www-form+XML, 즉 HTML5 XML 제출입니다. 양식 검증이 전달되면 양식 내용은 XML로 제출됩니다. 또한 ID 입력 상자에 값이 없거나 비 에마일 유형 문자열이 입력되면 양식을 제출하려고하면 브라우저에 내장 된 오류 메시지가 나타납니다.
HTML5의 컨트롤 업데이트는 의심 할 여지없이 매우 흥미 롭습니다. 이 기사는 새로운 형태의 새로운 기능을 설명하며 몇 가지 새로운 기능도 매우 흥미 롭습니다. 나는 표준의 심층적 인 개발과 HTML5에 대한 브라우저 지원의 추가 개선으로 간단하고 사용하기 쉬운 양식을 설계하는 작업이 매우 쉬워 질 것이라고 생각합니다.