Tuesday, December 30, 2008

Proper use of Fieldsets, legends, spans, label, and input, oh my

Fieldsets are used to break up forms into sections
Legends are used to title those sections
Labels give focus to the input(helps usability and 508 standards)
Input...I hope everyone knows what an input is
Span helps with other minor areas

Also maybe some list elements for breaking the data up more, I prefer it to tables


so a typical form you would have

<form name="EditUser" id="EditUser" action="controllers/cnt_blah.cfc" method="post">
<fieldset>
<legend><span>Name:</span></legend>
<ul>

<li>
<label for="FirstName" class="required"> First Name: </label>
<input name="FirstName" id="FirstName" type="text" value="ImageTrend" maxlength="100" size="20" />
</li>
<li><span class="radios">Are you human</span></li>
<li>
<label for="humanYes"><input name="human" id="humanYes" value="yes" type="radio">Yes</label>
<label for="humanNo"><input name="human" id="humanNo" value="no" type="radio">No</label>
</li>
<li>etc...</li>
</ul>
</fieldset>
<fieldset>
<legend><span>Work Address:</span></legend>
<ul>
<li>

<label for="Address"> Street Address: </label>
<INPUT type="text" name="Address" id="Address" value="" width="30" maxLength="100" size="30">
</li>
<li>etc...</li>
</ul>
</fieldset>
<div class="buttons">
<input type="submit" name="Submit" class="button submit" value="Submit">
</div>
</form>

Your comments Here! Hover Your cursor to leave a comment.