We have most of the pages were coded, and now you can almost understand everything about the new HTML5 elements and their semantics. But before we start the site appearance before work (we will operate in Chapter 7), we will quickly bypass the HTML5 Herald home page to browse the registration page. This will be explained in the form of HTML5 Web has to offer.
HTML5 Web forms introduces new form element, input types, attributes, and other native forms verification functions. Over the years, we have been using many of these features in the interface: form validation, combo boxes, and other placeholder text. The difference is that, before we have to resort to such acts to create JavaScript; now they can be used directly in the browser. You need to do is to include properties in the markup to make it available.
HTML5 not only allows developers to more easily labeled form, but also better for the user. Since client authentication handled locally by the browser, and therefore more consistency between the different sites, and many pages can load faster without all the extra JavaScript cases.
Let's dive into it!
A reliable tool in the toolbox
Form is usually the last thing developers to add in their pages - many developers find form simply boring. The good news is HTML5 into a more fun encoded form. In the last chapter, we hope you look forward to using the appropriate form elements in the tag.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Let's start our registration forms from plain old 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>This sample registration form form elements used since the earliest versions of HTML can be used. By this form labeland pprovide clues about the type of data in each field to the desired user elements, so even if your IE5 and Netscape 4.7 users (like!) Can understand the form. It is effective, but it certainly can be improved.
In this chapter, we will carry out the form enhanced to include HTML5 forms capabilities. HTML5 provides a new input types to specific e-mail address, URL, numbers, dates, and the like. In addition to these, HTML5 introduced properties may be used with existing and new input type input type. These enable you to provide placeholder text, mark the fields as needed, and declared acceptable data types - all without JavaScript.
We will introduce all newly added input types later in this chapter. Until then, let us look at the new HTML5 form attributes provided.
