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>
Tuesday, December 30, 2008
Proper use of Fieldsets, legends, spans, label, and input, oh my
Subscribe to:
Post Comments
(
Atom
)