Now let's write the HTML code for the form by adding the following
code below the <!--FORM FIELDS--> mark:
<fieldset>
<legend>
Some info about you:
</legend>
<input type="text" name="name" id="name" placeholder="e.g.
Sandro" title="Your name, required" required>
<label class="label" for="name"> Name: </label>
<input type="text" name="surname" id="surname" placeholder="e.g.
Paganotti" title="Your surname, required" required>
<label class="label" for="surname"> Surname: </label>
<input type="email" name="email" id="email" placeholder="e.g.
[email protected]" title="Your email address, a valid
email is required" required>
<label class="label" for="email"> E-mail: </label>
<input type="text" name="twitter" id="twitter" placeholder="e.g.
@sandropaganotti" title="Your twitter username, starting with @"
pattern="@[a-zA-Z0-9]+">
<label class="label" for="twitter"> Twitter:</label>
<footer></footer>
</fieldset>HTML5 offers some new attributes that we will explore briefly, as follows:
placeholder: This is used to specify some help text that is displayed within the field when empty.required: This is used to mark the field as required. It's a Boolean attribute that tells the browser to ensure that the field is not empty before submitting the form. This attribute is part of the new form validation features, which basically offer a way to specify some input constraints on the client side. Unfortunately, each browser handles the display of the error messages contained in thetitleattribute in a different way, but we'll check this later in the chapter.pattern: This is a powerful and sometimes complex way of specifying a validation pattern. It needs a regular expression as a value. This expression is then checked against the data inserted by the user. In case of failure, the message contained in thetitleattribute is displayed.In the given example, the pattern value is
@[a-zA-Z0-9]+, which means "one or more occurrences (the+sign) of glyphs from the rangesa-z(all lowercase letters),A-Z(all uppercase letters), and0-9(all digits)".Note
More ready-to-use patterns can be found at http://html5pattern.com/.
Like most of the features introduced by HTML5, even new form attributes such as the ones we saw in the code earlier suffer in terms of complete browser compatibility.
Note
To get a glimpse of the current browser support for these attributes and many other HTML5 and CSS3 features, I suggest going to http://caniuse.com/.
There's another oddity in this code: labels are placed after the fields they're linked to. This markup, although uncommon, is still valid and gives us some new interesting options to intercept user interaction with the form elements. This may sound mysterious, but we're going to analyze the technique in detail in a few pages from now.
Let's add another
fieldset element below the one we just wrote:
<fieldset class="preferences"> <legend> Your party preferences: </legend> <input type="radio" name="beers" id="4_beers" value="4"> <label class="beers" for="4_beers">4 beers</label> <input type="radio" name="beers" id="3_beers" value="3"> <label class="beers" for="3_beers">3 beers</label> <input type="radio" name="beers" id="2_beers" value="2"> <label class="beers" for="2_beers">2 beers</label> <input type="radio" name="beers" id="1_beers" value="1"> <label class="beers" for="1_beers">1 beers</label> <input type="radio" name="beers" id="0_beers" value="0" required> <label class="beers" for="0_beers">0 beers</label> <span class="label"> How many beers?: </span> <input type="radio" name="chips" id="4_chips" value="4"> <label class="chips" for="4_chips">4 chips</label> <input type="radio" name="chips" id="3_chips" value="3"> <label class="chips" for="3_chips">3 chips</label> <input type="radio" name="chips" id="2_chips" value="2"> <label class="chips" for="2_chips">2 chips</label> <input type="radio" name="chips" id="1_chips" value="1"> <label class="chips" for="1_chips">1 chips</label> <input type="radio" name="chips" id="0_chips" value="0" required> <label class="chips" for="0_chips">0 chips</label> <span class="label"> How many chips?: </span> <footer></footer> </fieldset>
Nothing to highlight here; we've just added two radio button groups. Now, if we try to run what we've done up to now in a browser, we are going to face some disappointment because the default browser's styles have been removed by the Reset stylesheet.
Time to add some basic styling!