[HTML/CSS] Hoe een formulier het beste vorm te geven?

[Woudloper]

Ik zit met een vraag hoe ik het beste een enquête formulier kan vormgeven (ofwel stylen met behulp van CSS).

Het is iets waar ik nog niet veel mee te maken heb gehad, maar met behulp van deze uitleg (bij aplus) en deze uitleg (bij PPK) ben ik redelijk gevorderd, echter loop ik nu vast bij het vormgeven van het volgende.

In het sjabloon (van waaruit het formulier moet worden gemaakt) wat ik heb gekregen wordt er als volgt over een onderwerp/thema gesproken:

code:

Thema: XXX
              Interesse?            Herhaalbaar?
              Weinig       Veel
              1   .   3   .   5       J  N

Vraag: YYY    O   O   O   O   O       O  O

Nu vraag ik mij af hoe ik dit het beste kan vormgeven/stylen aangezien het (naar mijn idee) niet onder tabulair data valt.

Je kan als je het mij vraagt voor aantal opties kiezen, te weten:

[list=A]
• Tabellen en radiobuttons (per cel één)
Daarmee kan je namelijk (naar mijn idee) dicht bij de layout van het uitgangssjabloon blijven, echter werk je met tabellen.

Illustratie:

Thema: XXX
	Interesse?						Herhaalbaar?
	1	2	3	4	5		J	N
Vraag: YYY

• Dropdowns gebruiken
Hiermee wordt de layout ietwat anders, maar heeft wel hetzelfde doel en je het makkelijk stylen zonder tabellen.

Illustratie:

Thema: XXX
	Interesse?						Herhaalbaar?
	1-5						J/N
Vraag: YYY	[ 5..... | V ]						[Ja..... | V ]

Heb wel gebruik gemaakt van tabellen in het voorbeeld, maar dat kan ook makkelijk zonder
• Radiobuttons en dropdowns
Alleen voor de 'interesse' radiobuttons gebruiken en voor de 'herhaalbaar' een dropdown gebruiken.

Illustratie:

Thema: XXX
	Interesse?						Herhaalbaar?
	1	2	3	4	5		J/N
Vraag: YYY							[ Ja..... | V ]

Mijn vraag: Ja, mijn vraag is dus eigenlijk. Hoe zouden jullie dit sematisch correct doen? Zijn er nog andere manieren dan bovenstaande oplossing om dit vorm te geven? Zelf geniet optie C te voorkeur, echter loop ik (net zoals bij optie A) vast hoe ik deze het beste kan stylen met CSS.

Andere suggesties zijn overigens ook van harte welkom...

Note: Had even geen plaatje van een dropdown voorhanden. Dit is dus vormgegeven in bovenstaande voorbeelden middels een V

[Verwijderd]

ik zou het eigenlijk toch in een tabel stoppen, waar bij je even goed moet kijken naar colspans en scope attributen (en hidden labels voor die radio's)

het lijkt mij namelijk best wel tabulair, bovendien, als je geen css zou ondersteunen (en wel tables) dan ziet het er nog overzichtelijk uit

verder zou ik ook radio's doen ipc dropdowns, maar da's persoonlijk

[ Voor 8% gewijzigd door Verwijderd op 08-02-2005 11:39 ]

[Redshark]

Ik zou voor de radio's gaan in een tabel. Ik zie eigenlijk niet waarom je hier geen tabel zou kunnen gebruiken, het lijkt me prima eigenlijk.

[OkkE]

Simpele contact formuliertjes kan je inderdaad wel eenvoudig met CSS opmaken, en is het ook geen ramp wanneer de opmaak mist. Maar bij zoiets lijkt het mij ook handiger om toch gewoon tabellen te gebruiken.

[Genoil]

ja ik zou ook voor A. gaan. het gaat er toch vooral om dat mensen begrijpen wat ze moeten doen, dus daarom is een vorm die het meest lijkt op een papieren enquete volgens mij het beste. dropdowns zijn daarnaast volgens mij bedoeld voor het maken van een keuze waarvan de mogelijke opties dusdanig veel en/of lang zijn dat je er maar 1 ziet en de rest verstopt zit in een dropdown. in jouw geval (1,2,3,4,5 en ja/nee) is dat verre van het geval.

[Woudloper]

Zelf zat ik namelijk te denken aan geen tabel-oplossing, maar dan kwam in naar mijn idee op het volgende uit:

HTML:

<strong>Vraag: YYY</strong>

In welke mate was YYY interessant?
<label for="inter_vraag_yyy_1">1</label><input type="radio" name="inter_vraag_yyy" id="inter_vraag_yyy_1" value="1">
<label for="inter_vraag_yyy_2">2</label><input type="radio" name="inter_vraag_yyy" id="inter_vraag_yyy_2" value="2">
<label for="inter_vraag_yyy_3">3</label><input type="radio" name="inter_vraag_yyy" id="inter_vraag_yyy_3" value="3">
<label for="inter_vraag_yyy_4">4</label><input type="radio" name="inter_vraag_yyy" id="inter_vraag_yyy_4" value="4">
<label for="inter_vraag_yyy_5">5</label><input type="radio" name="inter_vraag_yyy" id="inter_vraag_yyy_5" value="5">

Is YYY voor herhaling vatbaar?
<label for="herhal_vraag_yyy_J">J</label><input type="radio" name="herhal_vraag_yyy" id="herhal_vraag_yyy_J" value="J">
<label for="herhal_vraag_yyy_N">N</label><input type="radio" name="herhal_vraag_yyy" id="herhal_vraag_yyy_N" value="N">

Deze heeft als beginsel dat deze ook erg veel lijkt op de papieren enquete formulieren, maar het stylen hiervan gaat niet zoals ik zou willen...

Hoe kan ik dan de 1-5 boven de radio buttons laten zweven. Is dit te doen middels het floaten? Verder vroeg ik mij af (of het naast de tabel oplossing) handig is om met nested fieldsets te gaan werken?

[Verwijderd]

erboven zweven kan denk alleen met absoluut positioneren.
verder als je na vraag yyy nog een berg vragen eronder hebt (tabel vorm idee zeg maar), dan zou je daarvan de labels moeten hiden (kan met :first-child)

verder zou je idd nested fieldsets kunnen doen en dan een beetje met display: table-cell en table-row miepen, dan kan je nog wel een eind komen denk

[RwD]

Het is een opsomming van vragen (met antwoorden) met meerdere kolommen, dat zou je volgens mij semantisch correct in een tabel mogen duwen hoor.

Op GoT zit een tabel in de zoekfunctie (alle resultaten staan in een tabel). Hier zijn dan geen invulvelden, maar ik vindt het principe niet erg anders...

Edit:
Woudloper, jouw laatste post gaat trouwens nooit zo werken heh, tenminste, dan ga je steeds dezelfde tekst invoegen terwijl je het enquetestijl wilt en dus een kopje bovenaan een kolom...
(en kolommen zitten in een tabel )

Wat je je wel af kunt vragen is of je een aparte kolom wilt maken voor iedere radiobutton. Ik denk dat je dat niet moet doen en het bij 3 kolommen moet houden...

[ Voor 43% gewijzigd door RwD op 08-02-2005 14:14 ]

[Not Pingu]

forms kunnen wel zonder tabellen, [url=http://www.quirksmode.org/css/forms.html]zoals hier op quirksmode door label, input en br elementen te stylen.
Dat werkt echter alleen goed voor simpele forms. Als je echt een semantisch correct form wilt, is het in mijn ervaring vaak nogal een gekloot met CSS, zeker aangezien het bij een form heel belangrijk is dat alles wordt weergegeven zoals jij het wilt.

Daarom zijn tables voor forms imho zeker niet verkeerd. Het argument van 'forms semantisch markuppen' vind ik een beetje raar aangezien een form UI is en geen interpreteerbare informatie.

[Verwijderd]

ik vind in dit geval een tabel zeker semantisch correct, zeker als er onder die vraag yyy nog andere vragen komen stel dat je de resultaten ervan zou willen weergeven, dan doe je dat toch ook in een tabel en inplaats van die radio's een getalletje.

Ik zou alleen die 5 radio's dus in 1 cell zetten (niet 5) met een fieldset eromheen

[Woudloper]

Gunp01nt schreef op dinsdag 08 februari 2005 @ 14:20:
forms kunnen wel zonder tabellen, zoals hier op quirksmode door label, input en br elementen te stylen.

Dit artikel was mij bekend en daarbij vind ik het sematisch (min of meer) ook wel correct, maar ik was/ben op zoek naar een oplossing welke niet gebruik maakt van tabellen. 't Mag er wel zo uitzien om het te doen zoals mophor zegt met display: table-cell en table-row.

Op dit moment heb ik het volgende gerealiseerd:

Cascading Stylesheet:

   fieldset {
    border:        1px solid #DFDFDF;
    margin:        5px 0;
    padding:       5px 10px;
   }

   legend {
    font-weight:   bold;
    padding:       4px 10px;
    border:        1px solid #DFDFDF;
   }

   label,input {
    display:       block;
    float:         left;
    width:         150px;
    margin-bottom: 10px;
   }

   textarea {
    width:         70%; 
   }

   label {
    text-align:    right;
    padding-right: 20px;
   }

   br {
    clear:         left;
   }

HTML:

<form method="post" action="submit.php">

 <fieldset>
  <legend>Onderdeel 1</legend>

  <label for="O1_V1">Cijfer:</label>
  <select name="O1_V1" id="O1_V1">
    <option value="10">10</option>
    <option value="9">9</option>
    <option value="8">8</option>
    <option value="7">7</option>
    <option value="6">6</option>
    <option value="5">5</option>
    <option value="4">4</option>
    <option value="3">3</option>
    <option value="2">2</option>
    <option value="1">1</option>
   </select><br>

   <label for="O1_V2">Opmerkingen en tips:</label>      
   <textarea name="O1_V2" id="O1_V2" rows="3" cols="50"></textarea>
 </fieldset>

 <fieldset>
  <legend>Onderdeel 2</legend>

  <fieldset>
   <legend>Vraag 1:</legend>
   <fieldset>
    <legend>In welke mate was vraag 1 interessant?</legend>
    <label for="O2_V1_A_1">1</label><input type="radio" name="O2_V1_A" id="O2_V1_A_1" value="1">
    <label for="O2_V1_A_2">2</label><input type="radio" name="O2_V1_A" id="O2_V1_A_2" value="2">
    <label for="O2_V1_A_3">3</label><input type="radio" name="O2_V1_A" id="O2_V1_A_3" value="3">
    <label for="O2_V1_A_4">4</label><input type="radio" name="O2_V1_A" id="O2_V1_A_4" value="4">
    <label for="O2_V1_A_5">5</label><input type="radio" name="O2_V1_A" id="O2_V1_A_5" value="5">
   </fieldset>
  
   <fieldset>
    <legend>Is vraag 1 voor herhaling vatbaar?</legend>
    <label for="O2_V1_B_J">J</label><input type="radio" name="O2_V1_B" id="O2_V1_B_J" value="J">
    <label for="O2_V1_B_N">N</label><input type="radio" name="O2_V1_B" id="O2_V1_B_N" value="N">
   </fieldset>
  </fieldset>

 </fieldset>
</form>

Dit gaat redelijk, maar ik loop nog een beetje te hikken tegen het stylen hiervan. Het is wel mogelijk als je het mij vraagt, maar ik zie het licht even niet...

[Johnny]

Bij "herhaalbaar", waarbij je slechts 2 keuzes hebt kun je volgens mij beter een checkbox doen.

[Woudloper]

Johnny schreef op dinsdag 08 februari 2005 @ 16:30:
Bij "herhaalbaar", waarbij je slechts 2 keuzes hebt kun je volgens mij beter een checkbox doen.

Je kan je ook nog afvragen of je bij elke vraag een soortement van NVT (niet van toepassing) oplossing moet verzinnen aangezien die keuze op dit moment totaal niet geboden wordt.

RwD schreef op dinsdag 08 februari 2005 @ 14:10:
Woudloper, jouw laatste post gaat trouwens nooit zo werken heh, tenminste, dan ga je steeds dezelfde tekst invoegen terwijl je het enquetestijl wilt en dus een kopje bovenaan een kolom...
(en kolommen zitten in een tabel)

Als ik nu voor de oplossing ga van nested fieldsets e.d. dan moet het wel gaan lukken en het ziet er in principe ook nog wel netjes uit. Nu alleen nog de vraag hoe dit te vertalen is naar het voorbeeldsjabloon zoals deze in de startpost is gemeld.

[ Voor 44% gewijzigd door Woudloper op 08-02-2005 16:46 ]

[RwD]

Ik geef toe dat je laatste oplossing wel werkt. Maar of hiermee echt veel verschil bereikt is weet ik eerlijk gezegd niet; ik kan een kalender ook zo weer geven, een periodiek systeem ook en zelfs een kruistabel met de afstanden tussen steden kan ik zonder tabellen wel voor mekaar krijgen op een manier dat de gegevens misschien logischer in de html zitten.

Maar waar zijn tabellen dan nog voor
(Ik ben alleen geen grootmeester html/css, dus ik zit er met gemak een paar meter naast )

edit:
Het periodieke systeem zou ik trouwens misschien wel anders indelen en niet met tabellen omdat de elementen in 1 rij niet allemaal verwant zijn en juist blokken elementen met mekaar verband houden (Als je een afbeelding zoekt van het periodieke systeem zul je zien dat de elementen vaak in blokken gekleurd zijn waarbij de elementen in de blokken tot een bepaalde groep behoren. Maar dit viel me net pas in, en als ik het ga doen denk ik er nog wel een paar keer over na...

[ Voor 34% gewijzigd door RwD op 08-02-2005 19:08 ]

[drm]

Dit is nou typisch een gevalletje: gebruik een tabel want we hebben het over tabulaire data. De keuze tussen radiobuttons en selects is een puur gevoelsmatige gebruiksgemak-keuze.

edit:

Mijn persoonlijk voorkeur zou uitgaan naar C, met deze uitzondering dat ik de select zou vervangen door een checkbox. Maar nogmaals, dit is puur gevoelsmatig.

[ Voor 33% gewijzigd door drm op 08-02-2005 18:43 ]