change one version and not the other. Whenever possible, build your Java-
Script solution on top of the non-JavaScript solution. You’ll end up with
better markup, better code, and better accessibility in the long run.The Profile Form
HTML5 introduces the contenteditable attribute that is available on almost every
element. Simply adding this attribute to an element turns the element into
an editable field. So, let’s construct the profile form. Create a new HTML page
called show.html with a standard HTML template:html5_content_editable/show.html
<!DOCTYPEhtml>
<htmllang="en-US">
<head>
<metacharset="utf-8">
<title>ShowUser</title>
<linkrel="stylesheet"href="stylesheets/style.css">
</head>
<bodyid="forms">
</body>
</html>Inside the
tag, we add the editable fields.html5_content_editable/show.html
<h1>Userinformation</h1>
<divid="status"></div>
<uldata-url="/users/1">
<li>
<b>Name</b>
<spanid="name"contenteditable>HughMann</span>
</li>
<li>
<b>City</b>
<spanid="city"contenteditable>Anytown</span>
</li>
<li>
<b>State</b>
<spanid="state"contenteditable>OH</span>
</li>
<li>
<b>PostalCode</b>
<spanid="postal_code"contenteditable> 92110 </span>
</li>
<li>
<b>Email</b>
<spanid="email"contenteditable>[email protected]</span>
</li>
</ul>Chapter 3. Creating User-Friendly Web Forms • 60
Download from Wow! eBook <www.wowebook.com> report erratum • discuss