HTML input field schuift mee met tekst, hoe verhelpen?

[almightyarjen]

Ik heb het volgende stukje code, onderdeel van groter geheel:

code:

<table>
<tbody>
<tr>    
    <td><input type="checkbox" name="machtiging" /></td>
    <td colspan="2">testblablabla testblablabla testblablabla testblablabla testblablabla</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>naam:</td>                     
    <td><input name="naambetaling" id="txtbetalingnaam" type="text" class="longInputField" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>rekeningnummer:</td>                     
    <td><input name="rekeningnummerbetaling" id="txtbetalingrekening" type="text" class="longInputField" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>datum:</td>                    
    <td><input name="datumbetaling" id="txtbetalingdatum" type="text" class="longInputField" /></td>
</tr> 
<tr>
    <td>&nbsp;</td>
    <td>handtekening:</td>                     
    <td><input name="handtekening" id="txthandtekening" type="text" class="longInputField" /></td>
</tr>
</tbody>
</table>

Het probleem is dat als ik de "testblablabla" regel langer maak, dat dan de input fields daaronder meeschuiven naar rechts. Hoe koppel ik dit los van elkaar, zodat de input fields netjes direct naast de labels staan, ongeacht hoe lang de zin in de eerste rij is?

[RobIII]

HTML:

<td>naam:</td>

Deze een width meegeven (voor en na) Maar to be honest zou ik van heel die table afstappen.

[ Voor 32% gewijzigd door RobIII op 22-10-2013 23:02 ]

[almightyarjen]

Bedankt, dit werkt iig wel Waarom zou je van de table afstappen, hoe zou je het dan oplossen?

[R4gnax]

almightyarjen schreef op dinsdag 22 oktober 2013 @ 23:24:
Bedankt, dit werkt iig wel Waarom zou je van de table afstappen, hoe zou je het dan oplossen?

Dat zou je doen omdat het geen tabulaire gegevens betreft. Je zou wellicht nog kunnen claimen dat het een key/value-pair list betreft, in welk geval ik het zelf ongeveer zo zou oplossen:

HTML:

<fieldset>
  <legend><label><input type="checkbox" name="machtiging">Machtiging</label></legend>

  <dl class="fields">
    <dt><label for="naambetaling">naam</label></dt>
    <dd><input id="naambetaling" name="naambetaling" type="text" /></dd>
    <dt><label for="rekeningnummerbetaling">rekeningnummer</label></dt>
    <dd><input id="rekeningnummerbetaling" name="rekeningnummerbetaling" type="text" /></dd>
    <!-- ... -->
  </dl>
</fieldset>

En dan via wat JavaScript de velden binnen de fieldset (behalve de checkbox in het legend element, natuurlijk) op enabled of disabled zetten.

De horizontale uitlijning van label en invoerveld kun je bereiken door met CSS twee inline-blocks van 50% breedte neer te zetten. Ongeveer zoiets:

Cascading Stylesheet:

.fields {
  font-size : 0; // geen witruimte

  > dt, > dd {
    display        : inline-block;
    font-size      : 12px;
    margin         : 0;
    padding        : 0;
    vertical-align : top;
    width          : 50%;
  }
}

Dit kun je natuurlijk nog wat verder aankleden met gootjes witruimte tussen je elementen door box-sizing en padding te gebruiken.


Overigens; een bankrekening nummer is een gegeven wat herleidbaar is tot een natuurlijk persoon en valt dus als ik me niet vergis ook onder de wet bescherming persoonsgegevens. Ik neem aan dat je er zorg voor gaat dragen dat de pagina die om deze gegevens vraagt alleen via een beveiligde verbinding opgevraagd en verwerkt wordt?

[ Voor 16% gewijzigd door R4gnax op 23-10-2013 00:35 ]

[Verwijderd]

R4gnax schreef op woensdag 23 oktober 2013 @ 00:29:

Cascading Stylesheet:

.fields {
  > dt, > dd {
  }
}

Hint: dit is geen CSS ;-)

[MueR]

Inderdaad. Als je lang genoeg SCSS schrijft maak je die fout regelmatig heb ik gemerkt

[almightyarjen]

R4gnax schreef op woensdag 23 oktober 2013 @ 00:29:

Overigens; een bankrekening nummer is een gegeven wat herleidbaar is tot een natuurlijk persoon en valt dus als ik me niet vergis ook onder de wet bescherming persoonsgegevens. Ik neem aan dat je er zorg voor gaat dragen dat de pagina die om deze gegevens vraagt alleen via een beveiligde verbinding opgevraagd en verwerkt wordt?

Goede tip, eerlijk gezegd nog niet aan gedacht

[R4gnax]

MueR schreef op woensdag 23 oktober 2013 @ 10:20:
Inderdaad. Als je lang genoeg SCSS schrijft maak je die fout regelmatig heb ik gemerkt

Het was eigenlijk LESS, maar inderdaad; zo laat op de avond ging het even op de automatische piloot.

[DJMaze]

dl (definities lijst) is ook een "misbruik".
Ik zou het zo oplossen:

HTML:

<div class="fieldstable">
    <div>
        <label for="naambetaling">naam</label>
        <div><input id="naambetaling" name="naambetaling" type="text" /></div>
    </div>
</div>

Cascading Stylesheet:

.fieldstable { display:table; }
.fieldstable > * { display:table-row; }
.fieldstable > * > * { display:table-cell; }

[R4gnax]

DJMaze schreef op donderdag 24 oktober 2013 @ 12:32:
dl (definities lijst) is ook een "misbruik".

Je klok loopt een paar jaar achter. Draai hem eens naar voren:

De HTML5 Candidate Recommendation schrijft:
The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.

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

Ik zal je een rant over de inefficiente .fieldstable > * > * selector nog besparen.

[DJMaze]

Klopt dit dan ook?

HTML:

<dl>

    <dt>Geslacht</dt>
    <dd><label><input value="m"/> Man</label></dd>
    <dd><label><input value="v"/> Vrouw</label></dd>

    <dt>Voertuig</dt>
    <dd><select>
        <option>Auto</option>
        <option>Vrachtwagen</option>
    </select></dd>

</dl>

Ik denk dan toch ook eerder aan:

HTML:

<div class="fieldstable">
    <fieldset>
        <legend>Geslacht</legend>
        <label><input value="m"/> Man</label>
        <label><input value="v"/> Vrouw</label>
    </fieldset>
</div>

Het probleem met de dl, dt, dd is namelijk dat je dan met float:left moet werken en clear:left op de dt om op een nieuwe regel te beginnen.

[R4gnax]

DJMaze schreef op donderdag 24 oktober 2013 @ 21:20:
Klopt dit dan ook?

HTML:

<dl>

    <dt>Geslacht</dt>
    <dd><label><input value="m"/> Man</label></dd>
    <dd><label><input value="v"/> Vrouw</label></dd>

    <dt>Voertuig</dt>
    <dd><select>
        <option>Auto</option>
        <option>Vrachtwagen</option>
    </select></dd>

</dl>

Ik denk dan toch ook eerder aan:

HTML:

<div class="fieldstable">
    <fieldset>
        <legend>Geslacht</legend>
        <label><input value="m"/> Man</label>
        <label><input value="v"/> Vrouw</label>
    </fieldset>
</div>

Technisch is het semantisch allebei correct. Een fieldset is inderdaad wel meer logisch om gerelateerde controls te groeperen, maar bij een simpele keuze als man/vrouw is er nog niet direct een enorm hoge toegevoegde waarde.

Een fieldset heeft wel duidelijk meer toegevoegde waarde voor (vooral oudere) screenreading software voor blinden en slechtzienden. Deze heeft vaak een soort context-switching tussen het oplezen van document tekst, tabellen en invoer elementen ingebouwd zitten waarbij alles wat niet een invoer of andersoortig formulier element is in de laatste van die modussen niet opgelezen wordt.

DJMaze schreef op donderdag 24 oktober 2013 @ 21:20:
Het probleem met de dl, dt, dd is namelijk dat je dan met float:left moet werken en clear:left op de dt om op een nieuwe regel te beginnen.

Dat hoef je helemaal niet. Daar zijn legio andere (en betere) oplossingen voor te verzinnen dan klooien met floats.

[Bosmonster]

Dl's zijn, door het gebrek aan een wrapper element (het is gewoon een lange lijst van dt's en dd's, met een n-n relatie) wel lastig goed te stylen. Het is mogelijk, maar je blijft beperkt door het gebrek aan css-hooks.

Semantisch gezien is het voor een formulier ook niet nodig (zelfs niet eens toegestaan eigenlijk), aangezien het niet om een definitielijst gaat. Dan zou je het puur en alleen gebruiken voor een relatie tussen labels en velden, terwijl die relatie al door de elementen zelf geregeld wordt.

Voor iemand met een screenreader is een formulier al het lastigste wat er is om doorheen te navigeren. Als goede tweede is de tabel. Als dat formulier ook nog eens gewrapt wordt in niet-toepasselijke semantische constructies, zoals een DL of erger nog dus, een table, dan wordt het proces van het invullen van een formulier alleen nog maar lastiger gemaakt.

Al met al is de discussie over wat te gebruiken voor formulieren al erg oud, maar algemeen gezien is het gewoon een lijst van velden, dus is een ul, of zelfs gewoon een reeks div's hier prima. Dat is ook wat ik keer op keer terugkrijg bij toetsingstrajecten voor toegankelijkheid, maar is ook mijn eigen ervaring bij usertests met blinden.

[ Voor 32% gewijzigd door Bosmonster op 25-10-2013 10:49 ]

[incaz]

Je kunt voor als replacement voor <tr> / rows het dl-element gebruiken (elke rij is een list met precies 1 dt en 1 dd).

Als je wilt dat je labels en inputfields netjes onder elkaar staan en meegroeien met het breedste label kun je vervolgens ook nog display: table gebruiken.

Wat betreft het beginnen op nieuwe regels... meestal zijn er eenvoudigere mogelijkheden maar op een paar plaatsen had ik het nodig, ik heb als mixin een clearfix gemaakt voor inline-blocks:

Cascading Stylesheet:

@mixin clear-inline{
   // Makes an inline or inline-block element apear on a new line. 
   &:before{
      content: "."; 
      visibility: hidden; 
      display: block; 
      height: 0; 
   }
}

Nog ietsjes beter zou nog zijn om daar een whitespace character neer te zetten (volgens stackoverflow content: '\0000a0';) maar dat heb ik nog niet uitgeprobeerd.