ik zie regelmatig dat mensen formulieren samantisch positioneren met behulp van de <dl> tag en een <dd> en <dt> tag.
Dit is dus bedoeld voor definitielijsten.
Nu vroeg ik me af of iemand toevallig een tutorial of handleiding heeft hoe ik het beste hiermee een formulier kan opmaken.
Volgens een collegae hier op de vloer schijnt het minder code te gebruiken dan de vaak misbruikte <table>'s in HTML
Dus wie o wie kan vertellen hoe je met dl, dd, dt een formulier kan maken? En welke CSS ingredienten zijn nodig?
ik zie wel niet echt het geweldige eraan, of het minder code is...daar ben ik ook niet zo zeker van.
dan kan je net zo goed UL etc gebruiken...
En juist, dat wil je niet...
Je wilt toch een label hebben, en daarnaast het formulierobject? En dat in rechte lijn.
ul-tags lijken me dus af te vallen hiervoor?
verder heb ik die site van het W3C bezocht of die Dl's en daar staan ze dingen onder elkaar, maar ze moeten naast elkaar staan? (Die dt, en die dd)
Je kan een label een display:block; float: left; meegeven en een breedte.. Dan staan je formuliervelden keurig in 1 rechte lijn onder elkaar hoor. Het is prima te doen, dat gebruik ik zelf voor de opmaak van m'n formulieren.
Je kan een label een display:block; float: left; meegeven en een breedte.. Dan staan je formuliervelden keurig in 1 rechte lijn onder elkaar hoor. Het is prima te doen, dat gebruik ik zelf voor de opmaak van m'n formulieren.
Dus:
dt {
display: block;
float:left;
width: 80px;
Hoe zou het hele geheel er dan volgens jouw uitzien incl. de <dd> ???
Op die manier dus.
Mij lijkt het eerlijk gezegd semantischer om gewoon dl met dt en dd te gaan gebruiken?
iemand een tutorial of uitleg erover hoe die op te maken zijn in twee kolommen?
(voor de beschrijving, en de formulierobject)
Semantisch -> Je wilt dingen gebruiken waar ze voor zijn?
dl -> Definition list: A definition list is the container element for DT and DD elements. The DL element should be used when you want incorporate a definition of a term in your document, it is often used in glossaries to define many terms, it is also used in "normal" documents when the author wishes to explain a term in a more detail (Like this definition).
dt -> Definition term: The term currently being defined in the definition list. This element contains inline data.
dd ->Definition description: The definition description element contains data that describes a definition term. This data may be either inline, or it may be block level.
Semantisch moet je ze helemaal niet voor formulieren gebruiken! Een voorbeeld van waar je ze wel voor gebruikt is bijvoorbeeld:
<dl>
<dt><strong>Lower cost</strong>
<dd>The new version of this product costs significantly less than the
previous one!
<dt><strong>Easier to use</strong>
<dd>We've changed the product so that it's much easier to use!
<dt><strong>Safe for kids</strong>
<dd>You can leave your kids alone in a room with this product and
they won't get hurt (not a guarantee).
</dl>
