Josh Knutson

Pondering Life Away

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>

0 responses to “Proper use of Fieldsets, legends, spans, label, and input, oh my”

Leave this field empty: