Formen

Beispiller a Benotzungsrichtlinne fir Form Kontrollstiler, Layoutoptiounen a personaliséiert Komponenten fir eng grouss Varietéit vu Formen ze kreéieren.

Iwwersiicht

Bootstrap Form Kontrollen erweideren eis Rebooted Form Stiler mat Klassen. Benotzt dës Klassen fir op hir personaliséiert Affichage ze wielen fir eng méi konsequent Rendering iwwer Browser an Apparater.

Gitt sécher e passenden typeAttribut op all Input ze benotzen (zB emailfir E-Mailadress oder numberfir numeresch Informatioun) fir vun neien Input Kontrollen wéi E-Mail Verifizéierung, Zuelauswiel a méi ze profitéieren.

Hei ass e séier Beispill fir Bootstrap Formstiler ze demonstréieren. Liest weider fir Dokumentatioun iwwer erfuerderlech Klassen, Formlayout a méi.

<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>

Form Kontrollen

Textuell Form Kontrollen - wéi <input>s, <select>s, an s - si mat der Klass <textarea>styléiert . .form-controlAbegraff sinn Stiler fir allgemeng Erscheinung, Fokuszoustand, Gréisst a méi.

Ginn sécher eis Mooss Formen ze entdecken fir weider Stil <select>s.

<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>

Fir Dateieinputen, tauscht de .form-controlfir .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>

Gréisst

Set Héichten mat Klassen wéi .form-control-lgan .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>

Nëmme liesen

Füügt de readonlybooleschen Attribut op en Input fir d'Ännerung vum Wäert vum Input ze vermeiden. Lies-nëmmen Input schéngen méi hell (just wéi behënnert Input), awer behalen de Standard Cursor.

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

Nëmmen einfachen Text

Wann Dir <input readonly>Elementer an Ärer Form als Kloertext stylesch wëllt hunn, benotzt d' .form-control-plaintextKlass fir de Standardformfeldstil ze läschen an déi richteg Margin a Padding ze bewahren.

<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>

Range Input

Setzt horizontal scrollbar Range-Inputen mat .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>

Checkboxen a Radioen

Standardcheckboxen a Radios ginn verbessert mat der Hëllef vun .form-checkenger eenzeger Klass fir béid Inputtypen déi de Layout an d'Behuele vun hiren HTML Elementer verbessert . Checkboxe si fir eng oder e puer Optiounen an enger Lëscht ze wielen, während Radios sinn fir eng Optioun aus ville ze wielen.

Behënnerte Checkboxen a Radios ginn ënnerstëtzt, awer fir e not-allowedCursor beim Hover vum Elterendeel ze bidden <label>, musst Dir d' disabledAttribut op d' .form-check-input. De behënnerte Attribut wäert eng méi hell Faarf uwenden fir ze hëllefen den Zoustand vum Input unzeginn.

Checkboxen a Radios benotze si gebaut fir HTML-baséiert Formvalidatioun z'ënnerstëtzen a präzis, zougänglech Etiketten ze bidden. Als esou sinn eis <input>s an <label>s Geschwësterelementer am Géigesaz zu engem <input>bannent engem <label>. Dëst ass e bësse méi verbose wéi Dir musst spezifizéieren idan forAttributer fir den <input>an ze verbannen <label>.

Standard (gestapelt)

Par défaut gëtt all Zuel vu Checkboxen a Radioen déi direkt Geschwëster sinn vertikal gestapelt a passend mat .form-check.

Standard Checkbox

Behënnert Checkbox

<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

Zweet Standard Radio

Behënnert 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>

An der Schlaang

Gruppéiert Checkboxen oder Radios op der selwechter horizontaler Zeil andeems Dir .form-check-inlineop all .form-check.

3 (behënnert)

<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 (behënnert)

<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>

Ouni Etiketten

Füügt .position-staticun Inputen an .form-checkdéi kee Labeltext hunn. Denkt drun nach ëmmer eng Form vu Label fir Hëllefstechnologien ze bidden (zum Beispill mat 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>

Layout

Zënter Bootstrap gëlt display: blocka width: 100%fir bal all eis Form Kontrollen, Forme ginn standardiséiert vertikal gestapelt. Zousätzlech Klassen kënne benotzt ginn fir dëse Layout op enger Performbasis ze variéieren.

Form Gruppen

D' .form-groupKlass ass deen einfachste Wee fir eng Struktur op Formen ze addéieren. Et bitt eng flexibel Klass, déi richteg Gruppéierung vun Etiketten, Kontrollen, optional Hëllefstext a Formvalidatiounsmessage encouragéiert. Par défaut gëllt et nëmmen margin-bottom, awer et hëlt zousätzlech Stiler op .form-inlinewéi néideg. Benotzt et mat <fieldset>s, <div>s oder bal all aner 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 Gitter

Méi komplex Forme kënne mat eise Gitterklassen gebaut ginn. Benotzt dës fir Form Layouten déi verschidde Kolonnen, variéiert Breeten an zousätzlech Ausriichtungsoptiounen erfuerderen.

<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 Rei

Dir kënnt och tauschen .rowfir .form-row, eng Variatioun vun eiser Standard Gitterrei, déi d'Standard Kolonnrennen iwwerschreift fir méi enk a méi kompakt Layouten.

<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>

Méi komplex Layouten kënnen och mam Gittersystem erstallt ginn.

<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>

Horizontal Form

Erstellt horizontale Forme mam Gitter andeems Dir d' .rowKlass bäidréit fir Gruppen ze bilden an d' .col-*-*Klassen ze benotzen fir d'Breet vun Ären Etiketten a Kontrollen ze spezifizéieren. Gitt sécher och .col-form-labelop Är <label>s ze addéieren sou datt se vertikal mat hiren assoziéierte Formkontrolle zentréiert sinn.

Heiansdo musst Dir vläicht Margin oder Padding Utilities benotzen fir déi perfekt Ausrichtung ze kreéieren déi Dir braucht. Zum Beispill hu mir den padding-topop eisem gestapelten Radio-Input Label geläscht fir d'Textbaseline besser auszegläichen.

<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>

Horizontal Form Label Gréisst

Gitt sécher ze benotzen .col-form-label-smoder .col-form-label-lgop Är <label>s oder <legend>s fir d'Gréisst vun .form-control-lga richteg ze verfollegen .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>

Kolonn Gréisst

Wéi an de fréiere Beispiller gewisen, erlaabt eise Gittersystem Iech all Zuel vu .cols bannent engem .rowoder .form-row. Si verdeelen déi verfügbar Breet gläich tëscht hinnen. Dir kënnt och e Subset vun Äre Kolonnen auswielen fir méi oder manner Plaz opzehuelen, während déi verbleiwen .cols de Rescht gläich opgedeelt hunn, mat spezifesche Kolonnklassen wéi .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>

Automatesch Gréisst

D'Beispill hei drënner benotzt e Flexbox Utility fir den Inhalt vertikal ze zentréieren an z'änneren .colsou .col-autodatt Är Kolonnen nëmmen esou vill Plaz ophuelen wéi néideg. Anescht gesot, d'Kolonngréisst selwer baséiert op den Inhalt.

<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>

Dir kënnt dat dann nach eng Kéier mat Gréisst-spezifesch Kolonn Klassen remixen.

<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>

An natierlech ginn personaliséiert Form Kontrollen ënnerstëtzt.

<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>

Inline Formen

Benotzt d' .form-inlineKlass fir eng Serie vun Etiketten, Form Kontrollen a Knäppercher op enger eenzeger horizontaler Zeil ze weisen. Form Kontrollen bannent Inline Formen variéieren liicht vun hire Standardzoustand.

D'Kontrollen sinn display: flex, zerbriechen all HTML Wäissraum an erlaabt Iech Ausriichtungskontrolle mat Abstands- a Flexbox- Utilities ze bidden.
Kontrollen an Inputgruppen kréien width: autofir de Bootstrap Standard ze iwwerschreiden width: 100%.
Kontrollen schéngen nëmmen inline an viewports datt op d'mannst 576px breet sinn fir eng Kont fir schmuel viewports op mobilen Apparater.

Dir musst vläicht d'Breet an d'Ausrichtung vun eenzelne Formkontrollen mat Abstands-Utilities manuell adresséieren (wéi hei ënnendrënner). Endlech, gitt sécher datt Dir ëmmer e <label>mat all Formkontrolle enthält, och wann Dir et vun Net-Screenreader Besucher verstoppe musst mat .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>

Benotzerdefinéiert Form Kontrollen a wielt sinn och ënnerstëtzt.

<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>

Alternativen zu verstoppte Etiketten

Hëllefstechnologien wéi Écran Lieser wäerten Probleemer mat Äre Formulairen hunn wann Dir kee Label fir all Input enthält. .sr-onlyFir dës Inline Formen, kënnt Dir d'Etiketten mat der Klass verstoppen . Et gi weider alternativ Methoden fir e Label fir Hëllefstechnologien ze liwweren, sou wéi den aria-label, aria-labelledbyoder titleAttribut. Wann keng vun dësen präsent ass, kënnen Assistenztechnologien d' placeholderAttributer benotzen, wa präsent, awer bemierkt datt d'Benotzung vun placeholderals Ersatz fir aner Etikettéierungsmethoden net ugeroden ass.

Hëllef Text

Block-Niveau Hëllef Text a Formen kann erstallt ginn benotzt .form-text(virdrun bekannt als .help-blockv3). Inline Hëllefstext ka flexibel implementéiert ginn mat all Inline HTML Element an Utility Klassen wéi .text-muted.

Associéieren Hëllef Text mat Form Kontrollen

Hëllefstext soll explizit mat der Formkontrolle verbonne sinn, déi et mat der aria-describedbyAttribut benotzt. Dëst wäert suergen datt Assistenztechnologien - wéi Écran Lieser - dësen Hëllefstext annoncéieren wann de Benotzer fokusséiert oder an d'Kontroll erakënnt.

Hëllef Text ënnert Input kann mat stylesch ginn .form-text. Dës Klass enthält display: blocka füügt e puer Topmarge fir einfach Ofstand vun den Inputen uewen.

Passwuert Äert Passwuert muss 8-20 Zeeche laang sinn, Buschtawen an Zuelen enthalen an däerf keng Plazen, speziell Zeechen oder Emoji enthalen.

<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>

Inline Text kann all typesch Inline HTML Element benotzen (sief et en <small>, <span>, oder soss eppes) mat näischt méi wéi eng Utility Klass.

<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>

Behënnert Formen

Füügt de disabledbooleschen Attribut op en Input fir Benotzerinteraktiounen ze vermeiden an et méi hell ze maachen.

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

Füügt den disabledAttribut zu engem <fieldset>fir all d'Kontrollen bannen auszeschalten.

<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>

Opgepasst mat Anker

Par défaut behandelen d'Browser all gebierteg Form Kontrollen ( <input>, <select>an <button>Elementer) bannent engem <fieldset disabled>als behënnert, verhënnert souwuel Tastatur- a Mausinteraktiounen op hinnen. Wann Är Form awer och <a ... class="btn btn-*">Elementer enthält, ginn dës nëmmen e Stil vun pointer-events: none. Wéi an der Rubrik iwwer behënnert Staat fir Knäppercher festgestallt (a speziell an der Ënnersektioun fir Ankerelementer), ass dës CSS Eegeschafte nach net standardiséiert an ass net voll ënnerstëtzt am Internet Explorer 10, a wäert net verhënneren datt Tastatur Benotzer sinn kënnen dës Linken fokusséieren oder aktivéieren. Also fir sécher ze sinn, benotzt personaliséiert JavaScript fir sou Linken auszeschalten.

Cross-Browser Kompatibilitéit

Wärend Bootstrap dës Stiler an all Browser applizéiert, ënnerstëtzen Internet Explorer 11 an ënner net voll den disabledAttribut op engem <fieldset>. Benotzt personaliséiert JavaScript fir de Feldset an dëse Browser auszeschalten.

Validatioun

Bitt wäertvoll, handhabbare Feedback un Är Benotzer mat HTML5 Form Validatioun - verfügbar an all eise ënnerstëtzte Browser . Wielt aus dem Browser Standard Validatioun Feedback, oder implementéiert personaliséiert Messagen mat eise agebaute Klassen a Starter JavaScript.

Mir recommandéieren de Moment personaliséiert Validatiounsstiler ze benotzen, well gebierteg Browser Standard Validatiounsmeldungen net konsequent un Assistenztechnologien an all Browser ausgesat sinn (virun allem Chrome op Desktop an Handy).

Wéi et funktionnéiert

Hei ass wéi d'Formvalidatioun mat Bootstrap funktionnéiert:

HTML Form Validatioun gëtt iwwer CSS zwou Pseudo-Klassen applizéiert, :invalidan :valid. Et gëllt fir <input>, <select>, an <textarea>Elementer.
Bootstrap scopes der :invalida :validStiler zu Elterendeel .was-validatedKlass, normalerweis applizéiert op d' <form>. Soss gëtt all erfuerdert Feld ouni Wäert als ongëlteg op der Säitlaascht gewisen. Op dës Manéier kënnt Dir wielen wéini se ze aktivéieren (typesch nodeems d'Formuléierung versicht ass).
Fir d'Erscheinung vum Formulaire zréckzetrieden (zum Beispill am Fall vun dynamesche Formuléierunge mat AJAX), läscht d' .was-validatedKlass aus der <form>erëm no der Soumissioun.
Als Réckfall, .is-invalida .is-validKlassen kënnen amplaz vun de Pseudo-Klassen fir Server Säit Validatioun benotzt ginn . Si erfuerderen keng .was-validatedElterenklass.
Wéinst Aschränkungen a wéi CSS funktionnéiert, kënne mir (am Moment) Stiler net applizéieren op eng <label>déi virun enger Form Kontroll an der DOM kënnt ouni d'Hëllef vu personaliséierten JavaScript.
All modern Browser ënnerstëtzen d' Constraint Validation API , eng Serie vu JavaScript Methoden fir d'Validatioun vun Form Kontrollen.
Feedback Messagen kënnen d' Browser Defaults benotzen (ënnerscheed fir all Browser, an onstylbar iwwer CSS) oder eis personaliséiert Feedback Stiler mat zousätzlech HTML an CSS.
Dir kënnt personaliséiert Validitéit Messagen mat setCustomValidityJavaScript ubidden.

Mat deem vergiessen, betruecht déi folgend Demos fir eis personaliséiert Form Validatioun Stiler, optional Server Säit Klassen, a Browser Default.

Benotzerdefinéiert Stiler

Fir personaliséiert Bootstrap Form Validatioun Messagen, musst Dir de novalidatebooleschen Attribut op Är <form>. Dëst deaktivéiert de Browser Standardfeedback Tooltipps, awer gëtt ëmmer nach Zougang zu de Formvalidatiouns-APIs a JavaScript. Probéiert de Formulaire hei drënner ofzeginn; eis JavaScript interceptéiert de Submit Button a relais Feedback un Iech.

Wann Dir probéiert ofzeginn, gesitt Dir d' Stiler :invalida :validStiler op Är Form Kontrollen applizéiert.

<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>

Browser Defaults

Net interesséiert fir personaliséiert Validatioun Feedback Messagen oder JavaScript ze schreiwen fir Form Verhalen z'änneren? Alles gutt, Dir kënnt de Browser Default benotzen. Probéiert de Formulaire hei drënner ofzeginn. Ofhängeg vun Ärem Browser an OS, gesitt Dir e bëssen anere Feedbackstil.

Wärend dës Feedbackstiler net mat CSS stylesch kënne ginn, kënnt Dir ëmmer nach de Feedbacktext duerch JavaScript personaliséieren.

<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 Säit

Mir recommandéieren e benotzen Client Säit Validatioun, mä am Fall wou Dir Server Säit verlaangen, Dir kënnt ongëlteg a valabel Form Felder mat .is-invalidan uginn .is-valid. Notéiert datt .invalid-feedbackoch mat dëse Klassen ënnerstëtzt gëtt.

<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>

Ënnerstëtzt Elementer

Eis Beispill Forme weisen gebierteg textuell <input>s uewen, awer Form Validatioun Stiler sinn fir eis personaliséiert Form Kontrollen, ze.

<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>

Tooltips

Wann Äre Formulaire Layout et erlaabt, kënnt Dir d' .{valid|invalid}-feedbackKlassen fir .{valid|invalid}-tooltipKlassen austauschen fir Validatiounsfeedback an engem styleschen Tooltip ze weisen. Ginn sécher engem Elterendeel mat position: relativeop et fir tooltip Positionéierung. Am Beispill hei drënner hunn eis Kolonnklassen dëst schonn, awer Äre Projet kann en alternativen Setup erfuerderen.

<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>

Benotzerdefinéiert Formen

Fir nach méi Personnalisatioun a Cross-Browser Konsistenz, benotzt eis komplett personaliséiert Formelementer fir d'Browserdefaults ze ersetzen. Si sinn uewen op semanteschen an zougängleche Markup gebaut, sou datt se zolidd Ersatz fir all Standardformkontrolle sinn.

Checkboxen a Radioen

All Checkbox a Radio ass an engem <div>mat engem Geschwëster gewéckelt <span>fir eis personaliséiert Kontroll ze kreéieren an e <label>fir de begleedenden Text. Strukturell ass dëst déiselwecht Approche wéi eis Standard .form-check.

Mir benotzen de Geschwësterwieler ( ~) fir all eis <input>Staaten - wéi :checked- fir eis personaliséiert Formindikator richteg ze styléieren. Wa mir mat der .custom-control-labelKlass kombinéiert sinn, kënne mir och den Text fir all Element styléieren op Basis <input>vum Zoustand.

Mir verstoppen d'Default <input>mat opacitya benotzen de .custom-control-labelfir en neie personaliséierte Formindikator op senger Plaz mat ::beforean ze bauen ::after. Leider kënne mir net e Benotzerdefinéiert aus just bauen <input>well CSS contentnet op deem Element funktionnéiert.

An de kontrolléierte Staaten benotze mir base64 embedded SVG Symboler vun Open Iconic . Dëst bitt eis déi bescht Kontroll fir Styling a Positionéierung iwwer Browser an Apparater.

Checkboxen

Kuckt dës personaliséiert Checkbox

<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>

Benotzerdefinéiert Checkboxen kënnen och d' :indeterminatePseudo-Klass benotzen wann se manuell iwwer JavaScript gesat ginn (et gëtt kee verfügbaren HTML Attribut fir et ze spezifizéieren).

Kuckt dës personaliséiert Checkbox

Wann Dir jQuery benotzt, sou eppes sollt duergoen:

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

Radioen

Toggle dëse personaliséierte Radio

Oder wiesselen dësen anere personaliséierte Radio

<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>

An der Schlaang

Toggle dëse personaliséierte Radio

Oder wiesselen dësen anere personaliséierte Radio

<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>

Behënnert

Benotzerdefinéiert Checkboxen a Radios kënnen och behënnert ginn. Füügt de disabledbooleschen Attribut un <input>an de personaliséierten Indikator an d'Labelbeschreiwung ginn automatesch stiléiert.

Kuckt dës personaliséiert Checkbox

Toggle dëse personaliséierte Radio

<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>

Benotzerdefinéiert <select>Menüe brauchen nëmmen eng personaliséiert Klass, .custom-selectfir déi personaliséiert Stiler auszeléisen. Benotzerdefinéiert Stiler si limitéiert op <select>den initialen Erscheinungsbild a kënnen d' <option>S net änneren wéinst Browserbeschränkungen.

<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>

Dir kënnt och vu klengen a grousse personaliséierte Selektioune wielen fir eis ähnlech Gréissten Textinputen ze passen.

<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>

Den multipleAttribut gëtt och ënnerstëtzt:

<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>

Wéi ass den sizeAttribut:

<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>

Range

Erstellt personaliséiert <input type="range">Kontrollen mat .custom-range. D'Streck (den Hannergrond) an den Daumen (de Wäert) sinn allebéid stylesch fir d'selwecht iwwer Browser ze erschéngen. Well nëmmen IE a Firefox ënnerstëtzen hir Streck vu lénks oder riets vum Daum ze "fillen" als Mëttel fir visuell Fortschrëtter ze weisen, ënnerstëtzen mir et am Moment net.

Beispill Rei

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

Range-Inputen hunn implizit Wäerter fir minan max- 0an 100, respektiv. Dir kënnt nei Wäerter spezifizéieren fir déi déi d' minAttributer maxbenotzen.

Beispill Rei

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

Par défaut, Gamme Input "snap" op ganz Zuelen Wäerter. Fir dëst z'änneren, kënnt Dir e stepWäert uginn. Am Beispill hei drënner verduebele mir d'Zuel vun de Schrëtt mat step="0.5".

Beispill Rei

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

Dateibrowser

D'Dateiinput ass dee schmuelste vun der Rëtsch a erfuerdert zousätzlech JavaScript wann Dir se mat funktionnelle Wielt Datei ukoppelen ... a gewielten Dateinumm Text.

Wielt Datei

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

Mir verstoppen d'Standarddatei <input>iwwer opacityan stattdessen de <label>. De Knäppchen gëtt generéiert a positionéiert mat ::after. Endlech erkläre mir eng widthan heightop der <input>fir adäquate Abstand fir Ëmgéigend Inhalt.

Iwwersetzen oder personaliséieren d'Strings

D' :lang()Pseudo-Klass gëtt benotzt fir d'Iwwersetzung vum "Browse" Text an aner Sproochen z'erméiglechen. Iwwerschreift oder füügt Entréen un d' $custom-file-textSass Variabel mat dem relevante Sproochetag a lokaliséierte Strings. Déi englesch Saiten kënnen op déiselwecht Manéier personaliséiert ginn. Zum Beispill, hei ass wéi een eng spuenesch Iwwersetzung derbäi kënnt (Spuenesch Sproochecode ass es):

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

Hei ass lang(es)an Handlung op de personaliséierte Dateiinput fir eng spuenesch Iwwersetzung:

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>

Dir musst d'Sprooch vun Ärem Dokument (oder Ënnerbaum dovun) korrekt astellen, fir datt de richtegen Text ugewise gëtt. Dëst kann mat dem langAttribut am <html>Element oder dem Content-LanguageHTTP Header gemaach ginn, ënner anerem Methoden.

Formen

Iwwersiicht

Form Kontrollen

Gréisst

Nëmme liesen

Nëmmen einfachen Text

Range Input

Checkboxen a Radioen

Standard (gestapelt)

An der Schlaang

Ouni Etiketten

Layout

Form Gruppen

Form Gitter

Form Rei

Horizontal Form

Horizontal Form Label Gréisst

Kolonn Gréisst

Automatesch Gréisst

Inline Formen

Alternativen zu verstoppte Etiketten

Hëllef Text

Associéieren Hëllef Text mat Form Kontrollen

Behënnert Formen

Opgepasst mat Anker

Cross-Browser Kompatibilitéit

Validatioun

Wéi et funktionnéiert

Benotzerdefinéiert Stiler

Browser Defaults

Server Säit

Ënnerstëtzt Elementer

Tooltips

Benotzerdefinéiert Formen

Checkboxen a Radioen

Checkboxen

Radioen

An der Schlaang

Behënnert

Wielt Menü

Range

Dateibrowser

Iwwersetzen oder personaliséieren d'Strings