11.0 Forms

Like many elements in HTML, forms were once laid out using tables. These days they are best laid out using CSS, which makes forms far more accessible.

Pretty much any of the form tags (see the HTML Tuturial) can be used as selectors. For example, using the <label> tag:

<form method="post" action="#">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username" />  
</p>  
<p>
<label for="password">Password</label>  
<input type="password" id="password" name="pass" />
</p>  
<p>
<input type="submit" value="Submit" />
</p>
</form>

Then in the stylesheet we can add some styling:

p label		{
		width:100px;   
		float:left;   
		margin-right:10px;   
		text-align:right;   
		}

This would look like this in a browser:

Taking this further and using more form tags as selectors, we can transform the simple form into something rather elegant: For example:

fieldset	{
		border:1px solid #781351;
		width:20em
		}

legend		{
		color:#ffffff;
		background:#ffa20c;
		border:1px solid #781351;
		padding:2px 6px
		} 

label		{
		width:4em;
		float:left;
		text-align:right;
		margin-right:0.5em;
		display:block
		}

input		{
		color:#781351;
		background:#fee3ad;
		border:1px solid #781351
		}

.submit input	{
		margin-left:4.5em;
		color:#000000;
		background:#ffa20f;
		border:2px outset #d7b9c9;
		}

This would look like this in a browser:

Try this form