We would like to know how to use OL to layout form controls.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
li {<!--from w w w .j a v a2 s .c om-->
margin-bottom: 8px;
}
input {
border: 1px solid #000000;
font-size: 12px;
line-height: 12px;
padding: 5px 0;
width: 100%;
}
label {
float: left;
width: 4.5em;
}
span {
display: block;
overflow: hidden;
}
</style>
</head>
<body>
<form>
<legend>Sign in</legend>
<fieldset>
<ol>
<li><label for="email" class="email-label">E-mail</label>
<span><input type="email" spellcheck="false" required /></span>
<li><label for="password" class="passwd-label">Password</label>
<span><input type="password" id="password" required /></span>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
</body>
</html>
The code above is rendered as follows: