Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

By : Ben Frain
5 (1)
Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

5 (1)
By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Understanding the component parts of HTML5 forms


There's a lot going on in our HTML5 powered form, so let's break it down. The three sections of the form are each wrapped in a fieldset with a legend:

<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
  <label for="film">The film in question?</label>
  <input id="film" name="film" type="text" placeholder="e.g. King Kong" required>
</div>

You can see from the previous code snippet that each input element of the form is also wrapped in a div with a label associated with each input (we could have wrapped the input with the label element if we wanted to too). So far, so normal. However, within this first input we've just stumbled upon our first HTML5 form feature. After common attributes of ID, name, and type, we have placeholder.

placeholder

The placeholder attribute looks like this:

placeholder="e.g. King Kong"

Placeholder text within form fields is such a common requirement that...