Label Text Extended help Input or widgets
I really like the idea of wrapping the label tag around the whole lot, so that everything is associated with that single form element. It would also remove the need for <div class='formitem'>, a wrapper I used around each form element (label & input), since I can style the label with display:block;
<label for='f-title'>
News Post<br />
This is the title of your news post, which does not accept HTML input<br />
<input id='f-title' type='text' ... />
</label>
Although I'd like more control over the elements involved, so maybe something like (similar to Steven's example):
<label for='f-title'>
<h3>News Post Title</h3>
<p class='help'>This is the title of ...</p>
<input id='f-title' type='text' ... />
</label>... but maybe that's an abuse of H3 and P, and I should stick with generic DIVs or SPANS?
Justin French
On 23/07/2004, at 12:24 AM, Justin French wrote:
Hi all,
I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text:
<form...>
<div class='formitem'>
<label for='f-title'>...</label>
<input id='f-title' type='text'... />
<p class='help'>This is the title of your news post, which does not accept HTML input</p>
</div>
</form>
But logic tells me that in the above example, the <p> help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts.
Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. <fieldset>'s would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat.
I've been looking at many examples of "correct, semantic forms", but can't see anything like this out there.
TIA
--- Justin French http://indent.com.au
***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
--- Justin French http://indent.com.au
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
