Source

Skjemaer

Eksempler og retningslinjer for bruk for skjemakontrollstiler, layoutalternativer og egendefinerte komponenter for å lage et bredt utvalg av skjemaer.

Oversikt

Bootstraps skjemakontroller utvider seg til våre Rebooted-skjemastiler med klasser. Bruk disse klassene til å velge de tilpassede skjermene deres for en mer konsistent gjengivelse på tvers av nettlesere og enheter.

Sørg for å bruke et passende typeattributt på alle inndata (f.eks. emailfor e-postadresse eller numberfor numerisk informasjon) for å dra nytte av nyere inndatakontroller som e-postbekreftelse, nummervalg og mer.

Her er et raskt eksempel for å demonstrere Bootstraps formstiler. Fortsett å lese for dokumentasjon om obligatoriske klasser, skjemaoppsett og mer.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Skjemakontroller

Tekstformkontroller – som <input>s, <select>s og <textarea>s – er stilt med .form-controlklassen. Inkludert er stiler for generelt utseende, fokustilstand, størrelse og mer.

Sørg for å utforske våre tilpassede skjemaer for å utvikle stil <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

For filinndata, bytt ut .form-controlfor .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Dimensjonering

Angi høyder ved å bruke klasser som .form-control-lgog .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Skrivebeskyttet

Legg til det readonlyboolske attributtet på en inngang for å forhindre endring av inngangens verdi. Skrivebeskyttede innganger virker lettere (akkurat som deaktiverte innganger), men beholder standardmarkøren.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Skrivebeskyttet ren tekst

Hvis du vil ha <input readonly>elementer i skjemaet stilt som ren tekst, bruk .form-control-plaintextklassen til å fjerne standard skjemafeltstil og bevare riktig marg og utfylling.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Områdeinnganger

Angi horisontalt rullbare områdeinnganger ved å bruke .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Avmerkingsbokser og radioer

Standard avmerkingsbokser og radioer er forbedret ved hjelp av .form-checken enkelt klasse for begge inndatatyper som forbedrer layouten og oppførselen til HTML-elementene deres . Avmerkingsbokser er for å velge ett eller flere alternativer i en liste, mens radioer er for å velge ett alternativ fra mange.

Deaktiverte avmerkingsbokser og radioer støttes, men for å gi en not-allowedmarkør på overordnet peker <label>, må du legge til disabledattributtet til .form-check-input. Deaktivert-attributtet vil bruke en lysere farge for å indikere inngangens tilstand.

Avmerkingsbokser og radioer som brukes er bygget for å støtte HTML-basert skjemavalidering og gi konsise, tilgjengelige etiketter. Som sådan er våre <input>s og <label>s søskenelementer i motsetning til en <input>innenfor en <label>. Dette er litt mer detaljert ettersom du må spesifisere idog forattributter for å relatere <input>og <label>.

Standard (stablet)

Som standard vil et hvilket som helst antall avmerkingsbokser og radioer som er umiddelbare søsken, stables vertikalt og hensiktsmessig fordelt med .form-check.

Standard avmerkingsboks

Deaktivert avmerkingsboks

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Standard radio

Andre standard radio

Deaktivert radio

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

På linje

Grupper avmerkingsbokser eller radioer på samme horisontale rad ved å legge .form-check-inlinetil en .form-check.

3 (deaktivert)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (deaktivert)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Uten merkelapper

Legg .position-statictil innganger innenfor .form-checksom ikke har noen etiketttekst. Husk å fortsatt gi en form for etikett for hjelpeteknologier (for eksempel ved å bruke aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Oppsett

Siden Bootstrap gjelder display: blockog width: 100%for nesten alle skjemakontrollene våre, vil skjemaer som standard stables vertikalt. Ytterligere klasser kan brukes til å variere dette oppsettet på en per-form basis.

Form grupper

Klassen .form-grouper den enkleste måten å legge til litt struktur i skjemaer. Den gir en fleksibel klasse som oppmuntrer til riktig gruppering av etiketter, kontroller, valgfri hjelpetekst og skjemavalideringsmeldinger. Som standard gjelder det bare margin-bottom, men det plukker opp flere stiler .form-inlineetter behov. Bruk den med <fieldset>s, <div>s eller nesten hvilket som helst annet element.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Form rutenett

Mer komplekse skjemaer kan bygges ved hjelp av våre rutenettklasser. Bruk disse for skjemaoppsett som krever flere kolonner, varierte bredder og ekstra justeringsalternativer.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Form rad

Du kan også bytte .rowmot .form-row, en variant av vår standard rutenettrad som overstyrer standard søylerenner for strammere og mer kompakte oppsett.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Mer komplekse oppsett kan også lages med rutenettsystemet.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horisontal form

Lag horisontale skjemaer med rutenettet ved å legge .rowklassen til formgrupper og bruke .col-*-*klassene til å spesifisere bredden på etikettene og kontrollene dine. Sørg for å legge .col-form-labeltil dine <label>s også slik at de er vertikalt sentrert med tilhørende skjemakontroller.

Noen ganger må du kanskje bruke margin- eller polstringsverktøy for å lage den perfekte justeringen du trenger. For eksempel har vi fjernet padding-topetiketten på våre stablede radioinnganger for å justere tekstens grunnlinje bedre.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Horisontal formetikettstørrelse

Pass på å bruke .col-form-label-smeller .col-form-label-lgtil dine <label>s eller <legend>s for å følge størrelsen på .form-control-lgog .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Kolonnestørrelse

Som vist i de foregående eksemplene, lar vårt rutenettsystem deg plassere et hvilket som helst antall .cols innenfor en .roweller .form-row. De deler den tilgjengelige bredden likt mellom seg. Du kan også velge et undersett av kolonnene dine for å ta opp mer eller mindre plass, mens de resterende .coldelene deler resten likt, med spesifikke kolonneklasser som .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Automatisk størrelse

Eksemplet nedenfor bruker et flexbox-verktøy for å vertikalt sentrere innholdet og endringer .colslik .col-autoat kolonnene dine bare tar så mye plass som nødvendig. Sagt på en annen måte, kolonnen dimensjonerer seg selv basert på innholdet.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Du kan deretter remikse det igjen med størrelsesspesifikke kolonneklasser.

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Og selvfølgelig støttes tilpassede skjemakontroller .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Innebygde skjemaer

Bruk .form-inlineklassen til å vise en rekke etiketter, skjemakontroller og knapper på en enkelt horisontal rad. Skjemakontroller i innebygde skjemaer varierer litt fra standardtilstandene.

Kontroller er display: flex, kollapser alle HTML-mellomrom og lar deg gi justeringskontroll med mellomrom og flexbox- verktøy.
Kontroller og inngangsgrupper mottar width: autofor å overstyre Bootstrap-standarden width: 100%.
Kontroller vises bare innebygd i visningsporter som er minst 576 piksler brede for å ta hensyn til smale visningsporter på mobile enheter.

Du må kanskje adressere bredden og justeringen av individuelle skjemakontroller manuelt med avstandsverktøy (som vist nedenfor). Til slutt, sørg for å alltid inkludere en <label>med hver skjemakontroll, selv om du trenger å skjule den for besøkende som ikke er skjermlesere med .sr-only.

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Egendefinerte skjemakontroller og valg støttes også.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Alternativer til skjulte etiketter

Hjelpeteknologier som skjermlesere vil få problemer med skjemaene dine hvis du ikke inkluderer en etikett for hver inndata. For disse innebygde skjemaene kan du skjule etikettene ved å bruke .sr-onlyklassen. Det finnes flere alternative metoder for å gi en etikett for hjelpeteknologier, for eksempel aria-label, aria-labelledbyeller titleattributtet. Hvis ingen av disse er til stede, kan hjelpeteknologier ty til å bruke placeholderattributtet, hvis det finnes, men vær oppmerksom på at bruk av placeholdersom erstatning for andre merkingsmetoder ikke anbefales.

Hjelpetekst

Hjelpetekst på blokknivå i skjemaer kan opprettes ved å bruke .form-text(tidligere kjent som .help-blocki v3). Innebygd hjelpetekst kan implementeres fleksibelt ved å bruke alle innebygde HTML-elementer og verktøyklasser som .text-muted.

Knytte hjelpetekst til skjemakontroller

Hjelpeteksten skal eksplisitt assosieres med skjemakontrollen den er knyttet til ved bruk av aria-describedbyattributtet. Dette vil sikre at hjelpeteknologier – for eksempel skjermlesere – vil kunngjøre denne hjelpeteksten når brukeren fokuserer eller går inn i kontrollen.

Hjelpeteksten under innganger kan styles med .form-text. Denne klassen inkluderer display: blockog legger til en toppmargin for enkel avstand fra inngangene ovenfor.

Passord Passordet ditt må være 8-20 tegn langt, inneholde bokstaver og tall, og må ikke inneholde mellomrom, spesialtegn eller emoji.

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Innebygd tekst kan bruke et hvilket som helst typisk innebygd HTML-element (det være seg en <small>, <span>, eller noe annet) med noe mer enn en verktøyklasse.

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Deaktiverte skjemaer

Legg til det disabledboolske attributtet på en inngang for å forhindre brukerinteraksjoner og få den til å virke lettere.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Legg til disabledattributtet til a <fieldset>for å deaktivere alle kontrollene innenfor.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Advarsel med ankere

Som standard vil nettlesere behandle alle innfødte skjemakontroller ( <input>, <select>og <button>elementer) i en <fieldset disabled>som deaktivert, og forhindrer både tastatur- og musinteraksjoner på dem. Men hvis skjemaet ditt også inneholder <a ... class="btn btn-*">elementer, vil disse kun få stilen pointer-events: none. Som nevnt i delen om deaktivert tilstand for knapper (og spesifikt i underdelen for ankerelementer), er denne CSS-egenskapen ennå ikke standardisert og støttes ikke fullt ut i Internet Explorer 10, og vil ikke hindre tastaturbrukere fra å bli i stand til å fokusere eller aktivere disse koblingene. Så for å være sikker, bruk tilpasset JavaScript for å deaktivere slike koblinger.

Kompatibilitet på tvers av nettlesere

disabledMens Bootstrap vil bruke disse stilene i alle nettlesere, støtter ikke Internet Explorer 11 og eldre attributtet fullt ut på en <fieldset>. Bruk tilpasset JavaScript for å deaktivere feltsettet i disse nettleserne.

Validering

Gi verdifull tilbakemelding til brukerne dine med HTML5-skjemavalidering – tilgjengelig i alle våre støttede nettlesere . Velg fra nettleserens standard valideringstilbakemelding, eller implementer tilpassede meldinger med våre innebygde klasser og start-JavaScript.

Vi anbefaler for øyeblikket å bruke egendefinerte valideringsstiler, ettersom valideringsmeldinger for innebygde nettlesere ikke konsekvent eksponeres for hjelpeteknologier i alle nettlesere (spesielt Chrome på datamaskiner og mobiler).

Hvordan det fungerer

Slik fungerer skjemavalidering med Bootstrap:

HTML-skjemavalidering brukes via CSS sine to pseudo-klasser, :invalidog :valid. Det gjelder <input>, <select>, og <textarea>elementer.
Bootstrap dekker stilene :invalidog :validtil overordnet .was-validatedklasse, vanligvis brukt på <form>. Ellers vises ethvert obligatorisk felt uten verdi som ugyldig ved sideinnlasting. På denne måten kan du velge når du vil aktivere dem (vanligvis etter at skjemainnsending er forsøkt).
For å tilbakestille utseendet til skjemaet (for eksempel ved dynamiske skjemainnsendinger med AJAX), fjern .was-validatedklassen fra <form>igjen etter innsending.
Som en reserve, .is-invalidog .is-validklasser kan brukes i stedet for pseudo-klassene for serversidevalidering . De krever ikke en .was-validatedforeldreklasse.
På grunn av begrensninger i hvordan CSS fungerer, kan vi (for øyeblikket) ikke bruke stiler på en <label>som kommer før en skjemakontroll i DOM uten hjelp av tilpasset JavaScript.
Alle moderne nettlesere støtter constraint validation API , en serie JavaScript-metoder for å validere skjemakontroller.
Tilbakemeldingsmeldinger kan bruke nettleserens standardinnstillinger (forskjellig for hver nettleser, og ustilbar via CSS) eller våre tilpassede tilbakemeldingsstiler med ekstra HTML og CSS.
Du kan gi tilpassede gyldighetsmeldinger setCustomValidityi JavaScript.

Med det i tankene bør du vurdere følgende demoer for våre egendefinerte skjemavalideringsstiler, valgfrie serversideklasser og nettleserstandarder.

Egendefinerte stiler

For egendefinerte Bootstrap-skjemavalideringsmeldinger, må du legge til det novalidateboolske attributtet til <form>. Dette deaktiverer nettleserens standard verktøytips for tilbakemelding, men gir fortsatt tilgang til API-ene for skjemavalidering i JavaScript. Prøv å sende inn skjemaet nedenfor; JavaScript vil avskjære send-knappen og sende tilbakemelding til deg.

Når du prøver å sende inn, ser du :invalidstilene og :validbrukt på skjemakontrollene dine.

Fornavn

Looks good!

Etternavn

Looks good!

Brukernavn

Please choose a username.

Please provide a valid city.

Stat

Please provide a valid state.

Glidelås

Please provide a valid zip.

Godta vilkårene

You must agree before submitting.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Nettleserstandarder

Ikke interessert i tilpassede tilbakemeldingsmeldinger for validering eller å skrive JavaScript for å endre skjemaatferd? Alt bra, du kan bruke nettleserens standardinnstillinger. Prøv å sende inn skjemaet nedenfor. Avhengig av nettleseren og operativsystemet din, vil du se en litt annen tilbakemeldingsstil.

Selv om disse tilbakemeldingsstilene ikke kan styles med CSS, kan du fortsatt tilpasse tilbakemeldingsteksten gjennom JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Server side

Vi anbefaler å bruke klientsidevalidering, men i tilfelle du trenger serverside, kan du angi ugyldige og gyldige skjemafelt med .is-invalidog .is-valid. Merk at .invalid-feedbackdet også støttes med disse klassene.

Fornavn

Ser bra ut!

Etternavn

Ser bra ut!

Brukernavn

Vennligst velg et brukernavn.

Vennligst oppgi en gyldig by.

Stat

Oppgi en gyldig tilstand.

Glidelås

Vennligst oppgi en gyldig zip.

Godta vilkårene

Du må godta før du sender inn.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Støttede elementer

Eksempelskjemaene våre viser opprinnelige tekster <input>ovenfor, men skjemavalideringsstiler er også tilgjengelige for våre egendefinerte skjemakontroller.

<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Verktøytips

Hvis skjemaoppsettet tillater det, kan du bytte .{valid|invalid}-feedbackklassene med .{valid|invalid}-tooltipklasser for å vise valideringstilbakemeldinger i et stilisert verktøytips. Sørg for å ha en forelder med position: relativepå den for plassering av verktøytips. I eksemplet nedenfor har kolonneklassene våre dette allerede, men prosjektet ditt kan kreve et alternativt oppsett.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Egendefinerte skjemaer

For enda mer tilpasning og konsistens på tvers av nettlesere, bruk våre fullstendig tilpassede skjemaelementer for å erstatte nettleserstandardene. De er bygget på toppen av semantisk og tilgjengelig markering, så de er solide erstatninger for enhver standard skjemakontroll.

Avmerkingsbokser og radioer

Hver avmerkingsboks og radio er pakket inn i en <div>med et søsken <span>for å lage vår egendefinerte kontroll og en <label>for den medfølgende teksten. Strukturelt sett er dette den samme tilnærmingen som vår standard .form-check.

Vi bruker søskenvelgeren ( ~) for alle <input>delstatene våre – for eksempel :checked– for å style vår egendefinerte skjemaindikator. Når det kombineres med .custom-control-labelklassen, kan vi også style teksten for hvert element basert på <input>'s-tilstanden.

Vi skjuler standarden <input>med opacityog bruker til .custom-control-labelå bygge en ny tilpasset skjemaindikator i stedet for ::beforeog ::after. Dessverre kan vi ikke bygge en tilpasset en fra bare <input>fordi CSS- contenter ikke fungerer på det elementet.

I de avmerkede tilstandene bruker vi base64 innebygde SVG-ikoner fra Open Iconic . Dette gir oss den beste kontrollen for styling og plassering på tvers av nettlesere og enheter.

Avmerkingsbokser

Merk av for denne egendefinerte avmerkingsboksen

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Egendefinerte avmerkingsbokser kan også bruke :indeterminatepseudoklassen når den er satt manuelt via JavaScript (det er ingen tilgjengelig HTML-attributt for å spesifisere den).

Merk av for denne egendefinerte avmerkingsboksen

Hvis du bruker jQuery, bør noe slikt være tilstrekkelig:

$('.your-checkbox').prop('indeterminate', true)

Radioer

Slå av/på denne tilpassede radioen

Eller veksle mellom denne andre tilpassede radioen

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

På linje

Slå av/på denne tilpassede radioen

Eller veksle mellom denne andre tilpassede radioen

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Funksjonshemmet

Egendefinerte avmerkingsbokser og radioer kan også deaktiveres. Legg til det disabledboolske attributtet til <input>og den tilpassede indikatoren og etikettbeskrivelsen vil bli stilt automatisk.

Merk av for denne egendefinerte avmerkingsboksen

Slå av/på denne tilpassede radioen

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Egendefinerte <select>menyer trenger bare en egendefinert klasse .custom-selectfor å utløse de egendefinerte stilene. Egendefinerte stiler er begrenset til det <select>opprinnelige utseendet og kan ikke endres på <option>grunn av nettleserbegrensninger.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Du kan også velge mellom små og store tilpassede utvalg for å matche våre tekstinndata i samme størrelse.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

multipleAttributtet støttes også :

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Som er sizeattributten:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Område

Lag egendefinerte <input type="range">kontroller med .custom-range. Sporet (bakgrunnen) og tommelen (verdien) er begge stilt slik at de ser likt ut på tvers av nettlesere. Siden bare IE og Firefox støtter å "fylle" sporet deres fra venstre eller høyre for tommelen som et middel til å visuelt indikere fremgang, støtter vi det for øyeblikket ikke.

Eksempelområde

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

Example range

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

Example range

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Choose file

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

Translating or customizing the strings

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Here’s lang(es) in action on the custom file input for a Spanish translation:

Seleccionar Archivo

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Du må stille inn språket til dokumentet (eller undertreet til det) riktig for at riktig tekst skal vises. Dette kan gjøres ved å bruke langattributtet på <html>elementet eller Content-LanguageHTTP-headeren , blant andre metoder.

Skjemaer

Oversikt

Skjemakontroller

Dimensjonering

Skrivebeskyttet

Skrivebeskyttet ren tekst

Områdeinnganger

Avmerkingsbokser og radioer

Standard (stablet)

På linje

Uten merkelapper

Oppsett

Form grupper

Form rutenett

Form rad

Horisontal form

Horisontal formetikettstørrelse

Kolonnestørrelse

Automatisk størrelse

Innebygde skjemaer

Alternativer til skjulte etiketter

Hjelpetekst

Knytte hjelpetekst til skjemakontroller

Deaktiverte skjemaer

Advarsel med ankere

Kompatibilitet på tvers av nettlesere

Validering

Hvordan det fungerer

Egendefinerte stiler

Nettleserstandarder

Server side

Støttede elementer

Verktøytips

Egendefinerte skjemaer

Avmerkingsbokser og radioer

Avmerkingsbokser

Radioer

På linje

Funksjonshemmet

Velg meny

Område

File browser

Translating or customizing the strings