This is the most recent product in a continuing attempt at making a flexible form that doesn't require lists:
<fieldset id="floatlabel"> <legend>Floated Labels</legend> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label>Lorem ipsum</label> <div class="optionGroup"> <label for="Radio1"> <input type="radio" name="radMenut" id="Radio1" value="1" /> Omnivorous</label> <label for="Radio2"> <input type="radio" name="radMenut" id="Radio2" value="2" /> Vegetarian</label> <label for="Radio3"> <input type="radio" name="radMenut" id="Radio3" value="3" /> Vegan</label> </div><hr /><!-- if div not needed for styling, etc., h-rule can be used here to create structure without css, fix for ie6 --> </div> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label for="txtMiddle0">dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Why the absurdly long label? Good to test in case of dynamic or translated text.</label> <p><b>Note:</b> Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p> <input type="text" id="txtMiddle0" /> <i>ex: Typi non habent claritatem insitam;</i><hr /></div> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, </label> <div class="optionStack"> <label for="Checkbox1"> <input type="checkbox" name="chkSeatingt" id="Checkbox1" value="1" /> Stage</label> <label for="Checkbox2"> <input type="checkbox" name="chkSeatingt" id="Checkbox2" value="2" /> Dancefloor</label> <label for="Checkbox3"> <input type="checkbox" name="chkSeatingt" id="Checkbox3" value="3" /> Balcony</label> </div><hr /></div> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label for="txtFirst">First Name</label> <input type="text" id="Text1" /><hr /></div> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label for="txtMiddle">Middle Name</label> <input type="text" id="Text2" /><hr /></div> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label for="txtLast">Last Name</label> <input type="text" id="Text3" /><hr /></div> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label for="selSuffix0">vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</label> <select id="Select1"><option>(none)</option><option>Sr.</option><option>Jr.</option></select> <i>ex: Typi non habent claritatem insitam;</i><hr /></div> <div onmouseover="this.className='hilite';" onmouseout="this.className='';"> <label for="btnSubmit" class="buttonLabel">Submit this:</label> <input type="button" id="btnSubmit" value="Go Ahead" /> <input type="button" id="btnCancel" value="Nevermind" /><hr /></div> </fieldset>
It's heavier than it needs to be because it has both a div wrapping each item and a horizontal rule after. One or the other does the trick. I'm pleased that it manages, even with both tags, to have fewer tags than you'd need for a form with the same elements nestled in a list, which seems to be the cool thing to do these days (myself, I'm in the not every collection is a list camp). I'm curious what a list would offer it that it doesn't have now. I think this looks better with the CSS stripped out than it would if everything had excess bullets next to it, as well.
The CSS is like so:
.example, .note, i, p { color: #999; font-style: italic; line-height: 1em; }
.example, i { white-space: nowrap; }
.note, p { background-color: #f6f6f6; padding: 10px; }
input, select { line-height: 1em; font-size: inherit; margin-bottom: .8em; position: relative; }
hr { display: none; }
.hilite { clear: both; position: relative; overflow: hidden; height: 100%; }
.buttonLabel { visibility: hidden; }
.optionStack *, .optionStack label *, .optionGroup label *, .optionGroup * , .optionLabel * { vertical-align: middle; }
#floatlabel { position: relative; border: 1px solid #999; padding: 10px; margin: 10px 0px; font-family: Garamond; font-size: 1.1em; }
#floatlabel div { margin: 5px 0px 0px; padding: 0px; clear: both; position: relative; overflow: hidden; height: 100%; }
#floatlabel .hilite { background-color: #f3f3ee; border: none; padding: 0px; margin: 5px 0px 0px; }
#floatlabel label { margin-bottom: .8em; border-bottom: solid #999 1px; position: relative; float: left; width: 300px; clear: both; display: block; line-height: 1.5em !important; margin-right: 10px; }
#floatlabel input, #floatlabel select, #floatlabel .optionGroup, #floatlabel .optionStack {
float: left; display: block; position: relative; top: 0px; margin-bottom: .8em; margin-right: 10px; font-family: Garamond; font-size: 1em; }
#floatlabel input, #floatlabel select { border: double #999 3px; }
#floatlabel .hilite input, #floatlabel .hilite select { border: double #cc8 3px; }
#floatlabel i, #floatlabel p { position: relative; float: left; }
#floatlabel i { width: 200px; white-space: normal; left: 0px; }
#floatlabel p { background: transparent url(/newsletters/img/flourish.jpg) center 95% no-repeat; padding-bottom: 20px; width: 200px; float: right; display: inline; margin: 0px; border: double #999 3px; }
#floatlabel .optionGroup, #floatlabel .optionStack { overflow: hidden; margin: 0px 0px .8em; clear: none; }
#floatlabel .optionGroup label, #floatlabel .optionStack label { border: none; width: auto; margin-bottom: 0px !important; vertical-align: center; }
#floatlabel .optionGroup, #floatlabel .optionGroup label { clear: none; }
I'm still working on it - the CSS could be cleaned up - but it's nice to know that it can be done. The important things, to me, are that it allows for infinitely expanding labels, as well as notes and examples.
[caption id="attachment_13" align="aligncenter" width="300" caption="Screenshot of the finished product"]
[/caption]