Source

Formes

Exemples i directrius d'ús per a estils de control de formularis, opcions de disseny i components personalitzats per crear una gran varietat de formularis.

Visió general

Els controls de formulari de Bootstrap s'amplien als nostres estils de formulari reiniciats amb classes. Utilitzeu aquestes classes per optar a les seves pantalles personalitzades per obtenir una representació més coherent entre navegadors i dispositius.

Assegureu-vos d'utilitzar un typeatribut adequat a totes les entrades (per exemple, emailper a l'adreça de correu electrònic o numberper a la informació numèrica) per aprofitar els controls d'entrada més nous com ara la verificació de correu electrònic, la selecció de números i molt més.

Aquí teniu un exemple ràpid per demostrar els estils de formulari de Bootstrap. Segueix llegint per obtenir documentació sobre les classes necessàries, el disseny de formularis i molt més.

Mai compartirem el teu correu electrònic amb ningú més. 
<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-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>

Controls de formulari

Els controls de forma textual, com ara <input>s, <select>s i <textarea>s, s'estilen amb la .form-controlclasse. S'inclouen estils per a l'aspecte general, l'estat del focus, la mida i molt més.

Assegureu-vos d'explorar els nostres formularis personalitzats per seguir estilitzant <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>

Per a les entrades de fitxers, canvieu .form-controlper .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>

Talla

Estableix altures utilitzant classes com .form-control-lgi .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>

Llegeix només

Afegiu l' readonlyatribut booleà a una entrada per evitar la modificació del valor de l'entrada. Les entrades de només lectura semblen més clares (igual que les entrades desactivades), però conserven el cursor estàndard.

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

Text senzill només de lectura

Si voleu que els <input readonly>elements del formulari tinguin un estil de text senzill, utilitzeu la .form-control-plaintextclasse per eliminar l'estil predeterminat del camp del formulari i conservar el marge i el farciment correctes.

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

Caselles de selecció i ràdios

Les caselles de selecció i les ràdios per defecte es milloren amb l'ajuda d' .form-checkuna classe única per als dos tipus d'entrada que millora la disposició i el comportament dels seus elements HTML . Les caselles de selecció serveixen per seleccionar una o diverses opcions en una llista, mentre que les ràdios serveixen per seleccionar una opció entre moltes.

S'admeten les caselles de verificació i les ràdios desactivades, però per proporcionar un not-allowedcursor al ratolí del pare <label>, haureu d'afegir l' disabledatribut a .form-check-input. L'atribut desactivat aplicarà un color més clar per ajudar a indicar l'estat de l'entrada.

Les caselles de verificació i l'ús de ràdios estan dissenyats per admetre la validació de formularis basada en HTML i proporcionar etiquetes concises i accessibles. Com a tal, les nostres <input>s i <label>s són elements germans en lloc d'un <input>dins d'un <label>. Això és una mica més detallat, ja que heu d'especificar idi forels atributs per relacionar <input>i <label>.

Per defecte (apilat)

De manera predeterminada, qualsevol nombre de caselles de selecció i ràdios que siguin germans immediats s'apilaran verticalment i s'espaiaran adequadament amb .form-check.

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

En linia

Agrupeu les caselles de selecció o les ràdios a la mateixa fila horitzontal afegint .form-check-inline-les a qualsevol .form-check.

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

Sense etiquetes

Afegiu .position-statica les entrades dins .form-checkque no tinguin cap text d'etiqueta. Recordeu que encara heu de proporcionar algun tipus d'etiqueta per a les tecnologies d'assistència (per exemple, utilitzar 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>

Disseny

Com que s'aplica Bootstrap display: blocki width: 100%a gairebé tots els nostres controls de formulari, els formularis s'apilaran verticalment per defecte. Es poden utilitzar classes addicionals per variar aquest disseny segons el formulari.

Formar grups

La .form-groupclasse és la manera més senzilla d'afegir una mica d'estructura als formularis. Proporciona una classe flexible que fomenta l'agrupació adequada d'etiquetes, controls, text d'ajuda opcional i missatgeria de validació de formularis. Per defecte només s'aplica margin-bottom, però recull estils addicionals .form-inlinesegons sigui necessari. Utilitzeu-lo amb <fieldset>s, <div>s o gairebé qualsevol altre 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>

Forma graella

Es poden crear formularis més complexos utilitzant les nostres classes de graella. Utilitzeu-los per a dissenys de formularis que requereixen diverses columnes, amplades variades i opcions d'alineació addicionals.

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

Forma fila

També podeu canviar .rowper .form-row, una variació de la nostra fila de quadrícula estàndard que anul·la els canals de columna predeterminats per a dissenys més compactes i ajustats.

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

També es poden crear dissenys més complexos amb el sistema de quadrícula.

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

Forma horitzontal

Creeu formularis horitzontals amb la graella afegint la .rowclasse per formar grups i utilitzant les .col-*-*classes per especificar l'amplada de les vostres etiquetes i controls. Assegureu-vos d'afegir també .col-form-labela les vostres <label>s perquè estiguin centrades verticalment amb els controls de formulari associats.

De vegades, potser haureu d'utilitzar utilitats de marge o farciment per crear l'alineació perfecta que necessiteu. Per exemple, hem eliminat l' padding-topetiqueta de les entrades de ràdio apilades per alinear millor la línia de base del text.

Ràdios
casella de selecció 
<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>
Mida de l'etiqueta de forma horitzontal

Assegureu-vos d'utilitzar .col-form-label-smo .col-form-label-lga la vostra <label>s o <legend>s per seguir correctament la mida de .form-control-lgi .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>

Mida de la columna

Com es mostra als exemples anteriors, el nostre sistema de quadrícula us permet col·locar qualsevol nombre de .cols dins d'a .rowo .form-row. Repartiran l'amplada disponible per parts iguals entre ells. També podeu escollir un subconjunt de les vostres columnes per ocupar més o menys espai, mentre que les .cols restants divideixen per igual la resta, amb classes de columnes específiques com .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>

Amida automàtica

L'exemple següent utilitza una utilitat flexbox per centrar verticalment el contingut i els canvis, .colde .col-automanera que les columnes només ocupin l'espai necessari. Dit d'una altra manera, la mida de la columna en funció del contingut.

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

A continuació, podeu tornar a barrejar-ho amb classes de columnes específiques de mida.

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

I, per descomptat , s'admeten controls de formularis personalitzats .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" 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>

Formularis en línia

Utilitzeu la .form-inlineclasse per mostrar una sèrie d'etiquetes, controls de formulari i botons en una sola fila horitzontal. Els controls de formularis dins dels formularis en línia varien lleugerament dels seus estats predeterminats.

  • Els controls són display: flex, que redueixen qualsevol espai en blanc HTML i us permeten proporcionar control d'alineació amb utilitats d' espaiat i flexbox .
  • Els controls i els grups d'entrada reben width: autoper anul·lar el valor predeterminat de Bootstrap width: 100%.
  • Els controls només apareixen en línia a les finestres d'almenys 576 px d'amplada per tenir en compte les finestres estretes dels dispositius mòbils.

És possible que hàgiu d'adreçar manualment l'amplada i l'alineació dels controls de formulari individuals amb les utilitats d'espaiat (com es mostra a continuació). Finalment, assegureu-vos d'incloure sempre un <label>a cada control de formulari, fins i tot si necessiteu amagar-lo als visitants que no siguin lectors de pantalla amb .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>

També s'admeten controls i seleccions de formularis personalitzats.

<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>
Alternatives a les etiquetes ocultes

Les tecnologies d'assistència, com ara els lectors de pantalla, tindran problemes amb els vostres formularis si no incloeu una etiqueta per a cada entrada. Per a aquests formularis en línia, podeu amagar les etiquetes mitjançant la .sr-onlyclasse. Hi ha altres mètodes alternatius per proporcionar una etiqueta per a tecnologies d'assistència, com ara l' atribut aria-label, aria-labelledbyo . titleSi no hi ha cap d'aquests, les tecnologies d'assistència poden recórrer a l'ús de l' placeholderatribut, si n'hi ha, però tingueu en compte que placeholderno es recomana l'ús de com a substitut d'altres mètodes d'etiquetatge.

Text d'ajuda

El text d'ajuda a nivell de bloc en formularis es pot crear mitjançant .form-text(anteriorment conegut com .help-blocka v3). El text d'ajuda en línia es pot implementar de manera flexible utilitzant qualsevol element HTML en línia i classes d'utilitat com .text-muted.

Associar text d'ajuda amb controls de formulari

El text d'ajuda s'ha d'associar explícitament amb el control de formulari al qual es relaciona amb l' aria-describedbyatribut. D'aquesta manera, s'assegurarà que les tecnologies d'assistència, com ara els lectors de pantalla, anunciïn aquest text d'ajuda quan l'usuari es concentri o entri al control.

El text d'ajuda que hi ha a sota de les entrades es pot dissenyar amb .form-text. Aquesta classe inclou display: blocki afegeix un marge superior per facilitar l'espaiat de les entrades anteriors.

La contrasenya ha de tenir entre 8 i 20 caràcters, contenir lletres i números i no ha de contenir espais, caràcters especials ni 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>

El text en línia pot utilitzar qualsevol element HTML en línia típic (ja sigui un <small>, <span>o una altra cosa) amb res més que una classe d'utilitat.

Ha de tenir entre 8 i 20 caràcters. 
<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>

Formularis desactivats

Afegiu l' disabledatribut booleà a una entrada per evitar les interaccions de l'usuari i fer que sembli més lleuger.

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

Afegiu l' disabledatribut a a <fieldset>per desactivar tots els controls dins.

<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>
Advertència amb ancoratges

De manera predeterminada, els navegadors tractaran tots els controls de formularis natius ( <input>, <select>i <button>elements) dins d'un <fieldset disabled>com a desactivats, evitant les interaccions tant del teclat com del ratolí amb ells. Tanmateix, si el vostre formulari també inclou <a ... class="btn btn-*">elements, només se'ls donarà un estil pointer-events: none. Com s'indica a la secció sobre l' estat desactivat per als botons (i específicament a la subsecció per als elements d'ancoratge), aquesta propietat CSS encara no està estandarditzada i no s'admet totalment a Opera 18 i posteriors, o a Internet Explorer 10, i va guanyar No impedeix que els usuaris del teclat puguin enfocar o activar aquests enllaços. Així que per estar segur, utilitzeu JavaScript personalitzat per desactivar aquests enllaços.

Compatibilitat entre navegadors

Tot i que Bootstrap aplicarà aquests estils a tots els navegadors, Internet Explorer 11 i posteriors no admeten completament l' disabledatribut en un fitxer <fieldset>. Utilitzeu JavaScript personalitzat per desactivar el conjunt de camps en aquests navegadors.

Validació

Proporcioneu comentaris valuosos i útils als vostres usuaris amb la validació de formularis HTML5, disponible a tots els nostres navegadors compatibles . Trieu entre els comentaris de validació predeterminats del navegador o implementeu missatges personalitzats amb les nostres classes integrades i JavaScript inicial.

Recomanem molt els estils de validació personalitzats, ja que els navegadors natius no s'anuncien als lectors de pantalla.

Com funciona

A continuació s'explica com funciona la validació de formularis amb Bootstrap:

  • La validació del formulari HTML s'aplica mitjançant les dues pseudoclasses de CSS :invalidi :valid. S'aplica a <input>, <select>, i <textarea>elements.
  • Bootstrap abasta els estils :invalidi a la classe pare, generalment aplicat al fitxer . En cas contrari, qualsevol camp obligatori sense un valor es mostra com a no vàlid a la càrrega de la pàgina. D'aquesta manera, podeu triar quan activar-los (normalment després d'haver intentat enviar el formulari).:valid.was-validated<form>
  • Com a alternativa, .is-invalidi .is-validles classes es poden utilitzar en lloc de les pseudoclasses per a la validació del costat del servidor . No requereixen .was-validatedclasse de pares.
  • A causa de les limitacions de com funciona CSS, no podem (en l'actualitat) aplicar estils a un <label>que està abans d'un control de formulari al DOM sense l'ajuda de JavaScript personalitzat.
  • Tots els navegadors moderns admeten l' API de validació de restriccions , una sèrie de mètodes JavaScript per validar els controls de formularis.
  • Els missatges de comentaris poden utilitzar els valors predeterminats del navegador (diferents per a cada navegador i sense estil mitjançant CSS) o els nostres estils de comentaris personalitzats amb HTML i CSS addicionals.
  • Podeu proporcionar missatges de validesa personalitzats amb setCustomValidityJavaScript.

Tenint això en compte, tingueu en compte les demostracions següents per als nostres estils de validació de formularis personalitzats, les classes opcionals del costat del servidor i els valors predeterminats del navegador.

Estils personalitzats

Per als missatges personalitzats de validació de formularis Bootstrap, haureu d'afegir l' novalidateatribut booleà al vostre fitxer <form>. Això desactiva els consells d'eina de comentaris predeterminats del navegador, però encara proporciona accés a les API de validació de formularis en JavaScript. Proveu d'enviar el formulari següent; el nostre JavaScript interceptarà el botó d'enviament i us enviarà comentaris.

Quan intenteu enviar, veureu els estils :invalidi aplicats als controls del formulari.:valid

Té bona pinta!
Té bona pinta!
@
Si us plau, trieu un nom d'usuari.
Proporcioneu una ciutat vàlida.
Proporcioneu un estat vàlid.
Proporcioneu un codi postal vàlid.
Has d'estar d'acord abans d'enviar-ho. 
<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>

Valors predeterminats del navegador

No t'interessen els missatges de comentaris de validació personalitzats o escriure JavaScript per canviar els comportaments dels formularis? Tot bé, podeu utilitzar els valors predeterminats del navegador. Proveu d'enviar el formulari següent. Depenent del vostre navegador i sistema operatiu, veureu un estil de comentaris lleugerament diferent.

Tot i que aquests estils de comentaris no es poden dissenyar amb CSS, encara podeu personalitzar el text de comentaris mitjançant 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>

costat del servidor

Us recomanem que utilitzeu la validació del costat del client, però en cas que necessiteu el costat del servidor, podeu indicar camps de formulari no vàlids i vàlids amb .is-invalidi .is-valid. Tingueu en compte que .invalid-feedbacktambé és compatible amb aquestes classes.

Té bona pinta!
Té bona pinta!
@
Si us plau, trieu un nom d'usuari.
Proporcioneu una ciutat vàlida.
Proporcioneu un estat vàlid.
Proporcioneu un codi postal vàlid.
Has d'estar d'acord abans d'enviar-ho. 
<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>

Elements suportats

Els nostres formularis d'exemple mostren els texts nadius <input>anteriors, però els estils de validació de formularis també estan disponibles per als nostres controls de formularis personalitzats.

Exemple de text de comentaris no vàlid
Més exemple de text de comentaris no vàlid
Exemple de comentaris de selecció personalitzada no vàlids
Exemple de comentari de fitxer personalitzat no vàlid 
<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>

Consells d'eines

Si el disseny del formulari ho permet, podeu canviar les .{valid|invalid}-feedbackclasses per .{valid|invalid}-tooltipclasses per mostrar comentaris de validació en una descripció d'eina amb estil. Assegureu-vos de tenir un pare amb position: relativeell per col·locar la informació sobre eines. A l'exemple següent, les nostres classes de columnes ja ho tenen, però el vostre projecte pot requerir una configuració alternativa.

Té bona pinta!
Té bona pinta!
@
Si us plau, trieu un nom d'usuari únic i vàlid.
Proporcioneu una ciutat vàlida.
Proporcioneu un estat vàlid.
Proporcioneu un codi postal vàlid. 
<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>

Formularis personalitzats

Per a una personalització encara més gran i una coherència entre navegadors, utilitzeu els nostres elements de formulari completament personalitzats per substituir els valors predeterminats del navegador. Estan construïts sobre un marcatge semàntic i accessible, de manera que són substituts sòlids per a qualsevol control de formulari predeterminat.

Caselles de selecció i ràdios

Cada casella de selecció i ràdio s'embolica <div>amb un germà <span>per crear el nostre control personalitzat i un <label>per al text que l'acompanya. Estructuralment, aquest és el mateix enfocament que el nostre per defecte .form-check.

Utilitzem el selector de germans ( ~) per a tots els nostres <input>estats, com ara :checked, per dissenyar correctament el nostre indicador de formulari personalitzat. Quan es combina amb la .custom-control-labelclasse, també podem estilitzar el text de cada element en funció de l' <input>estat de '.

Ocultem el valor predeterminat <input>amb opacityi utilitzem .custom-control-labelper crear un nou indicador de formulari personalitzat al seu lloc amb ::beforei ::after. Malauradament, no podem crear-ne un de personalitzat només <input>perquè els CSS contentno funcionen en aquest element.

En els estats marcats, utilitzem icones SVG incrustades en base64 d' Open Iconic . Això ens proporciona el millor control per a l'estil i el posicionament entre navegadors i dispositius.

Caselles de verificació

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

Les caselles de selecció personalitzades també poden utilitzar la :indeterminatepseudoclasse quan s'estableixen manualment mitjançant JavaScript (no hi ha cap atribut HTML disponible per especificar-lo).

Si utilitzeu jQuery, n'hi hauria prou amb una cosa com aquesta:

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

Ràdios

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

En linia

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

Inhabilitat

Les caselles de selecció personalitzades i les ràdios també es poden desactivar. Afegiu l' disabledatribut booleà al <input>i l'indicador personalitzat i la descripció de l'etiqueta s'estilitzaran automàticament.

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

Seleccioneu el menú

Els menús personalitzats <select>només necessiten una classe personalitzada .custom-selectper activar els estils personalitzats.

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

També podeu triar entre seleccions personalitzades petites i grans per fer coincidir les nostres entrades de text de mida similar.

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

L' multipleatribut també és compatible:

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

Com és l' sizeatribut:

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

Navegador de fitxers

L'entrada de fitxers és la més complicada del grup i requereix JavaScript addicional si voleu connectar-los amb el text funcional Tria fitxer... i el nom de fitxer seleccionat.

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

Ocultem el fitxer predeterminat <input>mitjançant opacityi, en canvi, estilem el fitxer <label>. El botó es genera i es posiciona amb ::after. Finalment, declarem a widthi heightsobre l' <input>espaiat adequat per al contingut circumdant.

Traduir o personalitzar les cadenes

La :lang()pseudo-classe s'utilitza per permetre la traducció del text "Examinar" a altres idiomes. Substituïu o afegiu entrades a la $custom-file-textvariable Sass amb l' etiqueta d'idioma rellevant i les cadenes localitzades. Les cadenes angleses es poden personalitzar de la mateixa manera. Per exemple, a continuació es mostra com es podria afegir una traducció a l'espanyol (el codi d'idioma de l'espanyol és es):

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

Aquí teniu l' lang(es)acció sobre l'entrada de fitxer personalitzada per a una traducció a l'espanyol:

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

Haureu d'establir correctament l'idioma del vostre document (o subarbre) per tal que es mostri el text correcte. Això es pot fer mitjançant l' langatribut de l' <html>element o la Content-Languagecapçalera HTTP , entre altres mètodes.