우리는 대부분의 페이지는 코딩하고 있고, 지금은 거의 새로운 HTML5 요소와 그 의미에 대한 모든 것을 이해할 수있다. 우리는 사이트 시작하기 전에 그러나 외관 작업 전에을 (우리가 7 장에서 작동), 우리는 신속하게 우회 HTML5 헤럴드 홈 페이지 등록 페이지를 탐색합니다. 이는 HTML5 웹의 형태로 설명 될 것이다 제공합니다.
HTML5 웹 소개하고 새로운 형태의 요소, 입력 유형, 특성 및 기능 검증, 다른 기본 형태를 형성한다. 양식 유효성 검사, 콤보 상자, 기타 위치 지정자 텍스트 : 수년에 걸쳐, 우리는 인터페이스에서 이러한 기능을 많이 사용하고있다. 이제 브라우저에서 직접 사용할 수의 차이는 우리가 그러한 행위에 의지해야하기 전에 자바 스크립트를 만들 수 있다는 것입니다. 당신은 그것을 사용할 수 있도록 마크 업의 특성을 포함하는 것입니다 할 필요가있다.
HTML5는 또한 더 나은 사용자에게보다 쉽게 라벨 형태로 개발을 할 수 있습니다뿐만 아니라. 클라이언트 인증 빠르게 추가 자바 스크립트의 경우 모든없이로드 할 수 있습니다 브라우저 및 다른 사이트간에 때문에 더 일관성, 그리고 많은 페이지가 로컬로 처리하기 때문에.
그것으로하자 다이빙!
도구 상자에서 신뢰할 수있는 도구
양식은 일반적으로 자신의 페이지에 추가 할 수있는 마지막 일 개발자입니다 - 많은 개발자들이 단순히 지루한 양식을 찾을 수 있습니다. 좋은 뉴스는 더 재미 인코딩 된 형태로 HTML5이다. 마지막 장에서, 우리는 당신이 태그에 적절한 형태 요소를 사용하여 기대 바랍니다.
프런트 엔드 학습 qun438905713 만들기, 그룹의 대부분은 제로 학습자, 우리는 서로에 대답하고, 또한 학습 자료를 많이 준비, 서로 도움이, 교환에 제로 주니어 파트너를 환영했다.
의 일반 오래된 HTML에서 우리의 등록 양식을 시작하자 :
<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>form</span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register<span style="color:#999999">"</span></span> <span style="color:#669900">method</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>post<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>header</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>h1</span><span style="color:#999999">></span></span>Sign Me Up!<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>h1</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I would like to receive your fine publication.<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>header</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>ul</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register-name<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>My name is:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register-name<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>name<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>address<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>My email address is:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>address<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>address<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>url<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>My website is located at:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>url<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>url<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>I would like my password to be:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>(at least 6 characters, no spaces)<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>rating<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>On a scale of 1 to 10, my knowledge of HTML5 is:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>rating<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>rating<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>startdate<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>Please start my subscription on:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>startdate<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>startdate<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>quantity<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>I would like to receive <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>quantity<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>quantity<span style="color:#999999">"</span></span><span style="color:#999999">></span></span> copies of <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>cite</span><span style="color:#999999">></span></span> The HTML5 Herald<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>cite</span><span style="color:#999999">></span></span>.<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>upsell<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>Also sign me up for <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>cite</span><span style="color:#999999">></span></span>The CSS3 Chronicle<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>cite</span><span style="color:#999999">></span></span><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>checkbox<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>upsell<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>upsell<span style="color:#999999">"</span></span> <span style="color:#669900">value</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>CSS Chronicle<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>submit<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register-submit<span style="color:#999999">"</span></span> <span style="color:#669900">value</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>Send Post Haste<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>ul</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>form</span><span style="color:#999999">></span></span></code></span>HTML의 초기 버전부터 사용이 샘플 등록 양식 양식 요소를 사용할 수 있습니다. 이 양식으로 label그리고 p당신의 IE5 및 Netscape 4.7 사용자는 (같은!) 양식을 이해 할 수 있습니다 경우에도, 원하는 사용자 요소에 각 필드의 데이터 유형에 대한 단서를 제공한다. 그것은 효과적이지만, 그것은 확실히 개선 될 수있다.
이 장에서는 HTML5 양식 기능을 포함하도록 향상 양식을 수행한다. HTML5는 특정 전자 메일 주소, URL, 숫자, 날짜 등을 새로운 입력 유형을 제공합니다. 이들 외에도 HTML5 물성 기존 및 새로운 입력 형 입력 방식으로 사용될 수있다 도입. 다음은 허용되는 데이터 형식을 사용하면, 자리 표시 자 텍스트를 제공 필요에 따라 필드를 표시 할 수 있도록하고, 선언 - 모든 자바 스크립트없이.
우리는이 장의 뒷부분에서 새로 추가 입력 유형을 소개합니다. 그 때까지, 우리가 제공하는 속성 새로운 HTML5 양식을 살펴 보자.
