HTML5 and CSS3, Second Edition

<li>

<labelfor="state">State</label>

<inputtype="text"name="state"value=""id="state">

</li>

<li>

<labelfor="postal_code">PostalCode</label>

<inputtype="text"name="postal_code"value=""id="postal_code">

</li>

<li>

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

<inputtype="email"name="email"value=""id="email">

</li>

</ol>

</fieldset>

<p><inputtype="submit"value="Save"></p>

</form>

</body>

</html>

We’ll add some styles to stylesheets/style.css to make this form look good, using

similar styles to the ones we’ve used for our other forms:

html5_content_editable/stylesheets/style.css

ol{

padding:0;

margin:0;

list-style:none;

}

ol>li{

padding:0;

clear:both;

margin:0 0 10px0;

}

label{

width:150px;

float:left;

}

/* EN:edit_styles*/

Then we’ll add a link to edit.html on show.html.

html5_content_editable/show.html

<h1>Userinformation</h1>

<sectionid="edit_profile_link">

<p><ahref="edit.html">EditYourProfile</a></p>

</section>

<divid="status"></div>

Chapter 3. Creating User-Friendly Web Forms • 64

Download from Wow! eBook <www.wowebook.com> report erratum • discuss