Form layout

Hvis du kun husker én ting: Godt form-layout handler mest om struktur, afstand og grupper, ikke om avanceret CSS.

Det overordnede layout

En god begyndermodel er at bygge formularen op med simple grupper. Så bliver det tydeligt, hvilke dele der hører sammen:

<form>
  <div class="form-group">
    <label for="name">Fulde navn</label>
    <input type="text" id="name" name="full-name" />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" />
  </div>

  <button>Send formular</button>
</form>

Med .form-group får man en tydelig gruppe omkring hvert felt, hvilket gør det lettere at indstille ensartede afstande, som i eksemplet her med grid:

Flexbox til inline-layout

Flexbox kommer til sin ret, når man vil have kontrol over alignment og afstand mellem elementer, der skal stå på samme linje. Det gælder fx for radioknapper og checkbox-felter, hvor label og input skal hænge tæt sammen:

label:has(input) {
  display: flex;
  align-items: center;
  gap: .75ch;
}

Her bruger vi :has() til at finde de label-elementer, der indeholder et input, som er det mønster vi bruger til radioknapper og checkbox-felter. Så kan vi gøre hele label’en til en fleks-container, hvor teksten og input-feltet er centreret på samme linje med lidt afstand imellem.

Det er en god idé at bruge :has() i stedet for at give alle labels en flex-layout, fordi det kun er relevant for de labels, der indeholder et input-felt. De andre labels, som fx overskrifter eller fieldset-legender, skal ikke nødvendigvis have det samme layout.