HTML5 and CSS3, Second Edition

Once we add placeholder text to each field, the entire form’s markup looks

like this:

html5_placeholder/index.html

<formid="create_account"action="/signup"method="post">

<fieldsetid="signup">

<legend>CreateNew Account</legend>

<ol>

<li>

<labelfor="first_name">First Name</label>

<inputid="first_name"type="text"

autofocus

name="first_name"placeholder="'John'">

</li>

<li>

<labelfor="last_name">LastName</label>

<inputid="last_name"type="text"

name="last_name"placeholder="'Smith'">

</li>

<li>

<labelfor="email">Email</label>

<inputid="email"type="email"

name="email"placeholder="[email protected]">

</li>

<li>

<labelfor="password">Password</label>

<inputid="password"type="password"name="password"value=""

autocomplete="off"placeholder="8-10characters"/>

</li>

<li>

<labelfor="password_confirmation">PasswordConfirmation</label>

<inputid="password_confirmation"type="password"

name="password_confirmation" value=""

autocomplete="off"placeholder="Typeyourpasswordagain"/>

</li>

<li><inputtype="submit"value="SignUp"></li>

</ol>

</fieldset>

</form>

You may have noticed we’ve added the autocomplete attribute to the password

fields on this form. HTML5 introduces an autocomplete attribute that tells web

browsers they should not attempt to automatically fill in data for the field.

Some browsers remember data that users have previously typed in, and in

some cases, we want to tell the browsers that we’d rather not let users do

that.

Since we’re once again using the ordered-list element to hold our form fields,

we’ll add some basic CSS to make the form look nicer.

report erratum • discuss

Providing Hints with Placeholder Text • 51

Download from Wow! eBook <www.wowebook.com>