Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?
I've come across a few examples recently that do things like:
<dl>
<dt>Full Name:</dt>
<dd><input type="text" name="fullname"></dd>
<dt>Email Address:</dt>
<dd><input type="text" name="email"></dd>
</dl>
for doing HTML forms. Why is that? What is the advantage over using tables?
I guess it's up to you to determine the semantics, but in my opinion:
Rather than a definition list, form-related properties should be used.
<form>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</form>
The "for" attribute in the <label> tag should reference the "id" attribute of a <input> tag. Note that when labels are associated with fields, clicking the label will put the associated field in focus.
You can also use tags like <fieldset> to cluster sections of a form together and <legend> to caption a fieldset.
I've successfully used the technique outlined in this article several times.
I agree with sjstrutt that you should use form related tags like label and form in you forms, but the HTML outlined in his example, will often lack some code you can use as "hooks" for styling your form with CSS.
As a consequence of this I markup my forms like this:
<form name="LoginForm" action="thispage">
<fieldset>
<legend>Form header</legend>
<ul>
<li>
<label for="UserName">Username: </label>
<input id="UserName" name="UserName" type="text" />
</li>
<li>
<label for="Password">Password: </label>
<input id="Password" name="Password" type="text" />
</li>
</ul>
</fieldset>
<fieldset class="buttons">
<input class="submit" type="submit" value="Login" />
</fieldset>
</form>
This approach leaves me with a comprehensible set of tags, which contains enough hooks to style the forms in a lot of different ways.
This is a subset of the issue of semantics vs formatting. A definition list says what they are, a list of related key/value attributes, but does not say how to display it. A table says more about layout and how to display the data then what the data inside is. It limits how the list can be formatted both by overspecifying the format and by underspecifying what it is.
HTML, historically, has mixed up semantics with formatting. Font tags and tables being the worst examples. The move to CSS for the formatting and the stripping of a lot of the pure formatting tags out of XHTML restores, somewhat, the separation of meaning from formatting. By separating formatting into CSS you can display the same HTML in many different ways reformatting it for a wide browser, a small mobile browser, printing, plain text, etc...
For enlightenment, visit the CSS Zen Garden.
链接地址: http://www.djcxy.com/p/15512.html