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" class="name txtinput" name="name" placeholder="First" autofocus>
<input type="text" class="name txtinput" name="name" placeholder="Last">
...