[html] opmaak van formulieren*

[Anoniem: 219508]

Ik ben bezig een contactformulier te maken, maar zit er een beetje mee wat een nette manier is om het te op te maken.

Wat ik wil is een aantal inputvelden onder elkaar, met voor elk inputveld een labeltekst.
Die inputvelden moeten allemaal even ver uitgelijnd zijn, daarom gebruiken veel mensen een tabel en stoppen daar de labels en inputvelden in. Maar in principe zijn tabellen daar niet voor bedoeld toch?

Ik kan het wel oplossen door twee divjes naast elkaar te zetten, maar dan is het een enorm karwei om de tekst op dezelfde hoogte te krijgen als de inputvelden met line-height.

Ik heb op w3c gekeken, maar zij gebruiken af en toe ook tabellen om het uit te lijnen.

Wat is een goede manier om een contactformulier netjes op te maken?

[disjfa]

css forms

Kies een manier Kijk rond wat ander mensen bedenken.

[K-Jay]

Op Naar Voren staat ook een mooi stukje over het opbouwen van formulieren. Doe er je voordeel mee

[TeeDee]

Om aardig wat gezever te voorkomen kan je aan zo'n structuur denken:

HTML:

<table>
<tr>
<td><label>Naam: </label></td><input type="text" /></td>
</tr>
</table>

De reden waarom er een table gebruikt is? Er is namelijk ruimte tot discussie of het nu wel of geen tabulaire data is. Tevens is dit veruit te makkelijkste manier.

Je kan natuurlijk ook het e.e.a in een <ul>, <ol> of zelfs een <dl> stoppen.

Resumerend:
Makkelijk (en in een grijsgebied) tabel. Kies je voor lastig(er): ul, ol of dl.

Mocht je het e.e.a. in een tabel stoppen neemt niet weg dat je deze <table> alleen als 'structuurdrager' gebruikt. Styling etc. etc. doe je natuurlijk op de form-elementen.

[Bosmonster]

Wat is er nou moeilijk aan het gebruiken van een OL met daarin je labels.

Geef je labels een vaste breedte, float ze links en voila, klaar is kees.

[TeeDee]

Bosmonster schreef op woensdag 13 augustus 2008 @ 12:49:
Wat is er nou moeilijk aan het gebruiken van een OL met daarin je labels.

Geef je labels een vaste breedte, float ze links en voila, klaar is kees.

Ik vind het persoonlijk niet lastiger, maar bij het gebruik van OL of wat dan ook heb je vaak nog dat je de specifieke stijlen (padding, margin, list-styles etc. etc.) van lijstelementen weg moet halen wil je het e.e.a. netjes uitgelijnd krijgen. Een tabel is in dit geval makkelijker. Alleen om gezeik te voorkomen. Meer niet.

[Bosmonster]

code:

ol {
   margin: 0;
   padding: 0;
   list-style: none;
}

sowhee wat een werk Stuk minder code dan een hele tabel.

[ Voor 19% gewijzigd door Bosmonster op 13-08-2008 13:34 ]

[Anoniem: 219508]

Gebruik nu deze html/css om een formulier te maken, het werkt idd prima

HTML:

<form action="#" method="#">
    <fieldset>
        <legend>Formulier</legend>
        <ol>
            <li><label for="naam">naam</label><input id="naam" type="text" size="30" /></li>
            <li><label for="adres">adres</label><input id="adres" type="text" size="30" /></li>
            <li><label for="telefoon">telefoon</label><input id="telefoon" type="text" size="30" /></li>
            <li><label for="etc">etc</label><input id="etc" type="text" size="30" /></li>
        </ol>
    </fieldset>
</form>

Cascading Stylesheet:

fieldset{
border:none; 
width:350px; 
padding:0px; 
margin:0px;
}

label{
float:left; 
width:100px;
}

ol{
margin:0px; 
padding:0px; 
list-style:none;
}

li{
margin-bottom:10px;
}

[ Voor 3% gewijzigd door Anoniem: 219508 op 13-08-2008 14:17 ]

[Anoniem: 177275]

Anoniem: 219508 schreef op woensdag 13 augustus 2008 @ 11:12:
Maar in principe zijn tabellen daar niet voor bedoeld toch?

Vuistregel bij het gebruik van tabellen is: zou je offline/op papier ook een tabel gebruiken? Zo ja, dan "mag" je in html ook een tabel gebruiken.

Ik vind een formulier een typisch geval van tabulaire data. Als je een tabel gebruikt om de ingevoerde data weer te geven, waarom zou je 'm dan niet gebruiken voor nog in te vullen data?

Kortom: gewoon een tabel gebruiken.

[TeeDee]

Bosmonster schreef op woensdag 13 augustus 2008 @ 13:33:

code:

ol {
   margin: 0;
   padding: 0;
   list-style: none;
}

sowhee wat een werk Stuk minder code dan een hele tabel.

Jaja Tegen mij hoef je je standpunt niet te verdedigen hoor. Vond alleen dat ik het recht had om een pragmatische oplossing aan te dragen.

Als we dan toch bezig gaan;
- Text only: dan zien je forms er zonder stylesheets best wel ranzig uit. (Ervan uitgaande dat je Textonly browser prima in staat is om een table te renderen.
- Vertical alignment. In een table (weliswaar met extra attribuut) gaat dat ook iets makkelijker.

[Bosmonster]

Textonly browsers weten ook wel wat een OL is hoor. Dat is juist de hele semantische waarde van een OL gebruiken hier.

Mensen die een textbrowser gebruiken doen dit 9/10x voor het gebruik van een screenreader. Al eens geluisterd naar een screenreader die een formulier in een tabel voorleest?

[Blaise]

Al eens geluisterd naar een screenreader die een formulier in een tabel voorleest?

Ja, gaat prima in FireVox: "Username, detects field is empty". Welke screenreader gebruik jij en wat gaat er mis?

[Bosmonster]

Blaise schreef op woensdag 13 augustus 2008 @ 15:21:
[...]
Ja, gaat prima in FireVox: "Username, detects field is empty". Welke screenreader gebruik jij en wat gaat er mis?

Firefox is niet echt een textbrowser nietwaar

Sowieso wel enigszins verwaarloosbaar, maar hij begon over textbrowsers.

Persoonlijk vind ik een formulier geen tabulaire data. Misschien als je alleen maar enkelvoudige inputvelden onder elkaar hebt, maar zodra er iets van vormgeving inkomt (en je dus geforceerd bent dat met je tabel op te gaan lossen), ben je verkeerd bezig. Bijvoorbeeld als je meerdere kolommen gaat toepassen om velden naast elkaar te krijgen. Een tabel suggereert namelijk horizontale en verticale relaties en die zijn er dan niet.

Je kunt jezelf voor de gek houden en het voor jezelf goedpraten om een tabel te gebruiken omdat het anders te moeilijk wordt voor je, maar das wel een beetje omgekeerde wereld natuurlijk.

[ Voor 59% gewijzigd door Bosmonster op 13-08-2008 16:56 ]

[TeeDee]

Bosmonster schreef op woensdag 13 augustus 2008 @ 16:52:
[...]
Sowieso wel enigszins verwaarloosbaar, maar hij begon over textbrowsers.

Hij ben ik? Ik begon daar inderdaad over ja. Gewoon even wat loze argumenten over waarom je voor een tabel zou kunnen kiezen.

Persoonlijk vind ik een formulier geen tabulaire data.

Jouw mening. Eigen beeldvorming. Nogmaals; een grijs gebied. En over het algemeen ook mijn mening. Nogmaals: om gezever te voorkomen.

Misschien als je alleen maar enkelvoudige inputvelden onder elkaar hebt, maar zodra er iets van vormgeving inkomt (en je dus geforceerd bent dat met je tabel op te gaan lossen), ben je verkeerd bezig.

Contextueel gezien heeft TS enkelvoudige inputvelden onder elkaar.

[ Voor 4% gewijzigd door TeeDee op 13-08-2008 16:58 ]

[Blaise]

Ik vind een tabel, geordende lijst en definitielijst allemaal verdedigbaar en prima oplossingen. De vraag is eerder wat praktisch is, en dat verschilt per geval.

[Bosmonster]

TeeDee schreef op woensdag 13 augustus 2008 @ 16:57:
[...]
Jouw mening. Eigen beeldvorming. Nogmaals; een grijs gebied. En over het algemeen ook mijn mening. Nogmaals: om gezever te voorkomen.

Yes dat zeg ik, 'persoonlijk'. Dit is een forum, hier kan ik mijn mening posten, net als jij.

Contextueel gezien heeft TS enkelvoudige inputvelden onder elkaar.

Als het alleen maar wat veldjes onder elkaar zijn, wat is dan uberhaupt nog de reden om moeilijk te gaan doen met een tabel Als het er meer worden in de breedte, is het de vraag of een tabel nog semantisch verantwoord is.

Daarom zie ik geen reden ooit een tabel te gebruiken voor formulieren. (Mijn mening is nog wel enigszins onderbouwd).

Beetje non-discussie aan het worden, tijd om naar huis te gaan.

[ Voor 14% gewijzigd door Bosmonster op 13-08-2008 18:07 ]

[crisp]

Ben ik nu de enige die een ordered list een beetje vreemde keuze vind?
Normaliter gebruik je een ordered list als de volgorde van belang is voor de betekenis van je document, maar heeft:

naam: [        ]
adres: [        ]
woonplaats: [        ]

nu daadwerkelijk een andere betekenis dan:

woonplaats: [        ]
adres: [        ]
naam: [        ]

Enkel in het geval van een vragenlijst waarbij het antwoord op een (specifiek) eerdere vraag effect heeft op eventueel volgende vragen kan ik me iets bij een ordered list voorstellen.

Ik ben zelf voorstander van het gebruik van een definition list als je met puur <label>'s niet genoeg 'hooks' hebt voor styling, een 'label' wellicht geassocieerd kan worden met meerdere inputs en/of je een sterkere binding wilt hebben tussen je labels en je inputs dan enkel de id-for constructie in verder puur inline content. HTML5 schrijft o.a. over de definition list (emphasis mine):

quote: http://www.whatwg.org/spe...age/semantics.html#the-dl

Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value data.

Verder geeft een definition list geen stricte volgorde aan, maar wel dat de volgorde mogelijk van belang kan zijn:

The order of the list of groups, and of the names and values within each group, may be significant.

Dat sluit meer aan op het feit dat hoewel de volgorde van bijvoorbeeld naam, adres, woonplaats niet echt relevant is voor de betekenis van een document of formulier het wel een zekere logische volgorde betreft.

Een tabel is natuurlijk uitermate geschikt voor opmaak van formulieren waar je meerdere gelijke records invoert:

            Naam        Adres       Plaats
Record 1  [        ]  [        ]  [        ]
Record 2  [        ]  [        ]  [        ]
Record 3  [        ]  [        ]  [        ]

maar ook voor simpele forms is een tabel imo niet 'verboden', zolang je met <label>'s maar de juiste assiciaties legt tussen de labels en de invoer-velden

[Boelie-Boelie]

Ik ben ook niet zo voor tabellen, maar zolang je het tweekoloms houdt en labels gebruikt, schijnt het qua toegankelijkheid wel te kunnen: www.webaim.org/techniques/forms/screen_reader.php

Zelf gebruik ik geen lijsten of tabellen, maar fietdsets en af en toe een br:
www.webstandards.org/lear...sible-forms/intermediate/

Het is denk ik allemaal maar om het even.. (edit:) Ordered list is bij nader inzien wel ietwat vreemd.. Dan eerder een ul.

[ Voor 9% gewijzigd door Boelie-Boelie op 14-08-2008 00:15 ]

[Blaise]

quote: crisp

Ben ik nu de enige die een ordered list een beetje vreemde keuze vind?
Normaliter gebruik je een ordered list als de volgorde van belang is voor de betekenis van je document, maar heeft: [voorbeeld]

quote: crisp

Dat sluit meer aan op het feit dat hoewel de volgorde van bijvoorbeeld naam, adres, woonplaats niet echt relevant is voor de betekenis van een document of formulier het wel een zekere logische volgorde betreft.

Als je het omdraait: ik vind dat een onlogische volgorde de betekenis kan veranderen. In jouw voorbeeld met drie elementen is de chaos nog te overzien, maar met meer elementen is het effect al groter. Daarom zou ik kiezen voor een ol (maar heb ik ook begrip voor een ul).

Het handige aan een ol/ul kan zijn dat je de <li> als container-element hebt, dat heb je niet bij een dl.

Overigens kies ik ook het liefst de naakte variant met alleen labels + for/id, maar de ontwerpers met wie ik samenwerk verzinnen soms de raarste dingen

[crisp]

Een <ol> ziet er bij dergelijke formulieren imo ongestyled toch raar uit met nummertjes ervoor, alsof ik per-sé eerst m'n naam moet invoeren en dan pas m'n adres.

Qua container element, daar kan je gewoon je <label> voor gebruiken natuurlijk:

HTML:

<label>Naam <input type="text" name="naam"></label>

alleen jammer dat IE dat niet als een impliciete associatie ziet, wat het per-spec wel is...

Voor groepering binnen forms gebruik ik meestal fieldsets met legends, da's meestal ook genoeg als container element voor styling buiten het toepassen van float op dt/dd. Gewoon meerdere dl's toepassen kan natuurlijk ook nog.

Wat ik laatst een keer zag was overigens wel erg over the top: dl's binnen listitems van een unordered list:

HTML:

<ul>
  <li>
    <dl>
      <dt><label for="naam">Naam</label></dt>
      <dd><input type="text" name="naam" id="naam"></dd>
    </dl>
  </li>
  <!-- etcetera -->
</ul>

[disjfa]

Blaise schreef op donderdag 14 augustus 2008 @ 00:42:
[...]
Als je het omdraait: ik vind dat een onlogische volgorde de betekenis kan veranderen. In jouw voorbeeld met drie elementen is de chaos nog te overzien, maar met meer elementen is het effect al groter. Daarom zou ik kiezen voor een ol (maar heb ik ook begrip voor een ul).

Het handige aan een ol/ul kan zijn dat je de <li> als container-element hebt, dat heb je niet bij een dl.

Hij zegt niet dat het feit dat de volgorde van belang is maar de lijst een overbodige entiteit is in zo`n formulier, terwijl je dit zonder veel gemakkelijker kan oplossen. Aangezien een formulier theoretisch geen lijst van opvolgingen is, maar gewoon een formulier.

[crisp]

In aanvulling op disjfa: inderdaad; een 'logische' volgorde wordt imo al gedicteerd door het voorkomen binnen het document/formulier, daar heb je geen element voor nodig die een stricte volgorde dicteert (uitzonderingen daargelaten zoals het vraagformulier/enquete voorbeeld). Dan zouden we al onze paragrafen ook in een <ol> moeten zetten, immers moet je eerst paragraaf 1 lezen en dan pas paragraaf 2

[ Voor 9% gewijzigd door crisp op 14-08-2008 01:02 ]

[Blaise]

Wat een snelle reacties op dit tijdstip!

Hij zegt niet dat het feit dat de volgorde van belang is maar de lijst een overbodige entiteit is in zo`n formulier, terwijl je dit zonder veel gemakkelijker kan oplossen. Aangezien een formulier theoretisch geen lijst van opvolgingen is, maar gewoon een formulier.

Ah ok, dat aspect zag ik inderdaad anders. Ik gebruik natuurlijk ook geen ol voor mijn paragrafen, het ging me in mijn reactie voornamelijk om ol versus ul. Met deze redenatie zijn zowel ol als ul fout.

[crisp]

Een ul kan wel, in dit soort situaties:

HTML:

<p>Voer de namen van je teamleden in:</p>
<ul>
  <li><input name="naam[]" type="text"></li>
  <li><input name="naam[]" type="text"></li>
  <li><input name="naam[]" type="text"></li>
  <li><input name="naam[]" type="text"></li>
</ul>

[TeeDee]

Het blijft imo dus gewoon een grijs gebied. Sommigen verdedigen (want het is tenslotte een discussieforum) hun eigen idee/opvatting/beeld.

Blijft dus dat je het e.e.a. gewoon in perspectief of context moet zien welke 'container' je hiervoor het beste kan gebruiken.

[TheRookie]

Bosmonster schreef op woensdag 13 augustus 2008 @ 16:52:
[...]
Firefox is niet echt een textbrowser nietwaar

Note dat hij 't over firevox heeft;d8 eerst aan een typo, maar google doet wonderen: Fire Vox: A Screen Reading Extension for Firefox

[Blaise]

crisp schreef op donderdag 14 augustus 2008 @ 07:27:
Een ul kan wel, in dit soort situaties:

Ja en een ol dan ook (yesss)

HTML:

<p>Vul je top 3 favoriete ijsjes in:</p>
<ol>
  <li><input name="ijsje[]" type="text"></li>
  <li><input name="ijsje[]" type="text"></li>
  <li><input name="ijsje[]" type="text"></li>
</ol>

Note dat hij 't over firevox heeft;d8 eerst aan een typo, maar google doet wonderen: Fire Vox: A Screen Reading Extension for Firefox

Had ik helemaal over het hoofd gezien. Ik bedoelde inderdaad Fire Vox.

[Bosmonster]

TheRookie schreef op donderdag 14 augustus 2008 @ 08:41:
[...]

Note dat hij 't over firevox heeft;d8 eerst aan een typo, maar google doet wonderen: Fire Vox: A Screen Reading Extension for Firefox

Ik ken FireVox (had het goed gelezen ). Maar het blijft een extension voor Firefox en Firefox is nog steeds geen text-browser.

[ Voor 3% gewijzigd door Bosmonster op 14-08-2008 15:26 ]

[crisp]

Blaise schreef op donderdag 14 augustus 2008 @ 14:59:
[...]

Ja en een ol dan ook (yesss)

Inderdaad

Kortom: het ligt dus ook aan het soort formulier wat de beste optie is...

[moozzuzz]

HTML:

<p>
    <label><input type="radio" name="data[foto_tonen]" checked="checked" value="1"> Ja</label>
    Foto tonen: <br>
    &nbsp;
    <label><input type="radio" name="data[foto_tonen]" value="0"> Neen</label>
</p>

Na de thread doorgelzen te hebben, merk ik [schaam schaam] dat ik zelf toch nog niet helemaal goed bezig ben qua semantiek... en ga ik voor een <ul> i/d toekomst. Het label gebruik ik wel enkel om "verduidelijking" aan de input te geven (vb enkel jpg uploaden) en niet om de input "te labelen" (in voorbeeld: "Foto tonen":)

[TeeDee]

Dan is het logischer om, ook weer in dit specifieke geval, gebruik te maken van name/value pairs. In dit geval dus een dl.

[ Voor 6% gewijzigd door TeeDee op 14-08-2008 16:37 ]

[Blaise]

Bosmonster schreef op donderdag 14 augustus 2008 @ 15:26:
[...]

Ik ken FireVox (had het goed gelezen ). Maar het blijft een extension voor Firefox en Firefox is nog steeds geen text-browser.

Ik begrijp je denk ik niet helemaal. Bedoel je dat er een verschil is tussen FireVox en een screen reader bovenop een text browser?