Styling the forms

After a quick revision of the new CSS3 properties, it's time to customize the old and boring forms.

In Chapter 1, Forms and Their Significance, we built a Health Survey Form. We will reuse that form example to talk about the new CSS3 as well as the basic CSS properties and how they work to enhance the creativity in the form.

For styling, we will just take the first part of the form which is Personal Information. With some minor changes which need no explanation, the following is the HTML code:

<form id="masteringhtml5_form"> <label for="heading" class="heading">Health Survey Form</label> <fieldset class="fieldset_border"> <legend class="legend">Personal Information</legend> <div> <label for="name">Name</label><br> <input type="text" ...

Get Mastering HTML5 Forms now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.