Source

Formularios

Exemplos e pautas de uso para estilos de control de formularios, opcións de deseño e compoñentes personalizados para crear unha gran variedade de formularios.

Visión xeral

Os controis de formulario de Bootstrap amplíanse nos nosos estilos de formulario reiniciados con clases. Use estas clases para optar polas súas pantallas personalizadas para unha representación máis consistente en navegadores e dispositivos.

Asegúrate de usar un typeatributo apropiado en todas as entradas (por exemplo, emailpara o enderezo de correo electrónico ou numberpara a información numérica) para aproveitar os controis de entrada máis novos como a verificación de correo electrónico, a selección de números e moito máis.

Aquí tes un exemplo rápido para demostrar os estilos de formulario de Bootstrap. Continúa lendo para obter documentación sobre as clases obrigatorias, o deseño do formulario e moito máis.

Nunca compartiremos o teu correo electrónico con ninguén. 
<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>

Controis de formularios

Os controis de formularios textuales, como <input>s, <select>s e <textarea>s, están estilos coa .form-controlclase. Inclúense estilos para o aspecto xeral, o estado do foco, o tamaño e moito máis.

Asegúrate de explorar os nosos formularios personalizados para seguir estilos <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>

Para entradas de ficheiros, troca .form-controlpor .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

Establece alturas usando clases como .form-control-lge .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>

Só lectura

Engade o readonlyatributo booleano nunha entrada para evitar a modificación do valor da entrada. As entradas de só lectura parecen máis claras (igual que as entradas desactivadas), pero conservan o cursor estándar.

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

Texto simple só de lectura

Se queres que os <input readonly>elementos do teu formulario teñan un estilo de texto simple, utiliza a .form-control-plaintextclase para eliminar o estilo predeterminado do campo do formulario e conserva a marxe e o recheo correctos.

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

Caixas de verificación e radios

As caixas de verificación e radios predeterminadas mellóranse coa axuda de .form-check, unha única clase para ambos os tipos de entrada que mellora o deseño e o comportamento dos seus elementos HTML . As caixas de verificación son para seleccionar unha ou varias opcións nunha lista, mentres que as radios son para seleccionar unha opción de entre moitas.

Admítense as caixas de verificación e as radios desactivadas, pero para proporcionar un not-allowedcursor ao pasar o rato sobre o pai <label>, terás que engadir o disabledatributo ao .form-check-input. O atributo desactivado aplicará unha cor máis clara para axudar a indicar o estado da entrada.

As caixas de verificación e o uso de radios están construídos para admitir a validación de formularios baseadas en HTML e proporcionar etiquetas concisas e accesibles. Polo tanto, os nosos <input>s e <label>s son elementos irmáns en oposición a un <input>dentro dun <label>. Isto é un pouco máis detallado xa que debes especificar ide foratributos para relacionar os <input>e <label>.

Predeterminado (apilado)

De forma predeterminada, calquera número de caixas de verificación e radios que sexan irmáns inmediatos apilaranse verticalmente e espaciaranse adecuadamente con .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 liña

Agrupe caixas de verificación ou radios na mesma fila horizontal engadindo .form-check-inlinea calquera .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>

Sen etiquetas

Engadir .position-staticás entradas .form-checkque non teñan ningún texto de etiqueta. Lembra aínda fornecer algún tipo de etiqueta para as tecnoloxías de asistencia (por exemplo, usar 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>

Maquetación

Dado que se aplica Bootstrap display: blocke width: 100%a case todos os nosos controis de formularios, os formularios apilaranse verticalmente por defecto. Pódense usar clases adicionais para variar este deseño por cada formulario.

Formar grupos

A .form-groupclase é a forma máis sinxela de engadir algunha estrutura aos formularios. Ofrece unha clase flexible que fomenta a agrupación adecuada de etiquetas, controis, texto de axuda opcional e mensaxes de validación de formularios. Por defecto só se aplica margin-bottom, pero recolle estilos adicionais .form-inlinesegundo sexa necesario. Utilízao con <fieldset>s, <div>s ou case calquera outro elemento.

<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 cuadrícula

Pódense construír formularios máis complexos usando as nosas clases de cuadrícula. Utilízaos para deseños de formularios que requiren varias columnas, anchos variados e opcións de aliñamento adicionais.

<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

Tamén podes trocar .rowpor .form-row, unha variación da nosa fila de grade estándar que anula os canales de columna predeterminados para deseños máis axustados e compactos.

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

Tamén se poden crear esquemas máis complexos co sistema de cuadrí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 horizontal

Crea formularios horizontais coa grella engadindo a .rowclase para formar grupos e usando as .col-*-*clases para especificar o ancho das túas etiquetas e controis. Asegúrate de engadir tamén .col-form-labelás túas <label>s para que estean centradas verticalmente cos seus controis de formulario asociados.

Ás veces, quizais necesites usar utilidades de marxe ou recheo para crear o aliñamento perfecto que necesitas. Por exemplo, eliminamos a padding-topetiqueta das nosas entradas de radio apiladas para aliñar mellor a liña de base do texto.

Radios
Caixa de verificación 
<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>
Tamaño da etiqueta de formulario horizontal

Asegúrate de usar .col-form-label-smou .col-form-label-lga túa <label>s ou <legend>s para seguir correctamente o tamaño de .form-control-lge .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>

Tamaño da columna

Como se mostra nos exemplos anteriores, o noso sistema de cuadrícula permítelle colocar calquera número de .cols dentro dun .rowou .form-row. Dividirán o ancho dispoñible equitativamente entre eles. Tamén podes escoller un subconxunto das túas columnas para que ocupe máis ou menos espazo, mentres que os .cols restantes dividen por igual o resto, con clases de columnas específicas como .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>

Auto-dimensionado

O seguinte exemplo usa unha utilidade flexbox para centrar verticalmente o contido e os cambios .colpara .col-autoque as súas columnas só ocupen o espazo necesario. Dito doutro xeito, o tamaño da columna depende dos contidos.

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

Despois podes remesturar isto unha vez máis con clases de columnas específicas de tamaño.

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

E, por suposto , os controis de formulario personalizados son compatibles.

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

Formularios en liña

Use a .form-inlineclase para mostrar unha serie de etiquetas, controis de formulario e botóns nunha única fila horizontal. Os controis de formularios dentro dos formularios en liña varían lixeiramente dos seus estados predeterminados.

  • Os controis son display: flex, que contraen calquera espazo en branco HTML e permítenche proporcionar control de aliñamento con utilidades de espazamento e caixa flexible .
  • Os controis e os grupos de entrada reciben width: autopara anular o valor predeterminado de Bootstrap width: 100%.
  • Os controis só aparecen en liña nas vistas de polo menos 576 píxeles de ancho para ter en conta as ventás estreitas dos dispositivos móbiles.

Quizais necesites abordar manualmente o ancho e o aliñamento dos controis de formulario individuais con utilidades de espazamento (como se mostra a continuación). Por último, asegúrese de incluír sempre un <label>con cada control de formulario, aínda que necesite ocultalo aos visitantes que non son lectores de pantalla con .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>

Tamén se admiten controis e seleccións de formularios personalizados.

<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>
Alternativas ás etiquetas ocultas

As tecnoloxías de apoio, como os lectores de pantalla, terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes formularios en liña, pode ocultar as etiquetas usando a .sr-onlyclase. Existen outros métodos alternativos para proporcionar unha etiqueta para tecnoloxías de asistencia, como o atributo aria-label, aria-labelledbyou . titleSe ningunha destas está presente, as tecnoloxías de asistencia poden recorrer ao uso do placeholderatributo, se está presente, pero teña en conta que placeholdernon se recomenda o uso de como substituto doutros métodos de etiquetaxe.

Texto de axuda

Pódese crear texto de axuda a nivel de bloque en formularios usando .form-text(anteriormente coñecido como .help-blocken v3). O texto de axuda en liña pódese implementar de forma flexible usando calquera elemento HTML en liña e clases de utilidade como .text-muted.

Asociar texto de axuda con controis de formulario

O texto de axuda debe estar asociado explícitamente co control de formulario co que se relaciona usando o aria-describedbyatributo. Isto garantirá que as tecnoloxías de asistencia, como os lectores de pantalla, anunciarán este texto de axuda cando o usuario se concentre ou entre no control.

O texto de axuda debaixo das entradas pode ser estilo con .form-text. Esta clase inclúe display: blocke engade algunha marxe superior para facilitar o espazo das entradas anteriores.

O teu contrasinal debe ter entre 8 e 20 caracteres, conter letras e números e non debe conter espazos, caracteres especiais nin 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>

O texto en liña pode usar calquera elemento HTML en liña típico (xa sexa un <small>, <span>ou outra cousa) sen máis que unha clase de utilidade.

Debe ter entre 8 e 20 caracteres. 
<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>

Formularios desactivados

Engade o disabledatributo booleano nunha entrada para evitar as interaccións do usuario e facelo parecer máis claro.

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

Engade o disabledatributo a a <fieldset>para desactivar todos os controis dentro.

<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>
Advertencia con áncoras

De xeito predeterminado, os navegadores tratarán todos os controis de formularios nativos ( e <input>elementos ) dentro dunha como desactivados, evitando as interaccións do teclado e do rato neles. Non obstante, se o teu formulario tamén inclúe elementos, só se lles dará un estilo . Como se indica na sección sobre o estado desactivado dos botóns (e concretamente na subsección dos elementos de ancoraxe), esta propiedade CSS aínda non está estandarizada e non se admite totalmente en Opera 18 e posteriores, nin en Internet Explorer 10, e gañou non impide que os usuarios do teclado poidan enfocar ou activar estas ligazóns. Polo tanto, para estar seguro, usa JavaScript personalizado para desactivar tales ligazóns.<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Compatibilidade entre navegadores

Aínda que Bootstrap aplicará estes estilos en todos os navegadores, Internet Explorer 11 e anteriores non admiten totalmente o disabledatributo nun ficheiro <fieldset>. Use JavaScript personalizado para desactivar o conxunto de campos nestes navegadores.

Validación

Proporciona comentarios valiosos e prácticos aos teus usuarios coa validación de formularios HTML5, dispoñible en todos os nosos navegadores compatibles . Escolla entre os comentarios de validación predeterminados do navegador ou implemente mensaxes personalizadas coas nosas clases integradas e JavaScript inicial.

Recomendamos encarecidamente estilos de validación personalizados xa que os lectores de pantalla non anuncian os valores predeterminados do navegador nativo.

Cómo funciona

Así é como funciona a validación de formularios con Bootstrap:

  • A validación do formulario HTML aplícase a través das dúas pseudoclases de CSS :invalide :valid. Aplícase a <input>, <select>, e <textarea>elementos.
  • Bootstrap abarca os estilos :invalide :validá clase pai .was-validated, normalmente aplicada ao <form>. En caso contrario, calquera campo obrigatorio sen valor aparece como non válido na carga da páxina. Deste xeito, pode escoller cando activalos (normalmente despois de tentar enviar o formulario).
  • Como alternativa, pódense usar clases .is-invalide en lugar das pseudoclases para a validación do lado do servidor . Non requiren unha clase de pais..is-valid.was-validated
  • Debido ás limitacións no funcionamento do CSS, non podemos (actualmente) aplicar estilos a un <label>control de formulario no DOM sen a axuda de JavaScript personalizado.
  • Todos os navegadores modernos admiten a API de validación de restricións , unha serie de métodos JavaScript para validar os controis de formularios.
  • As mensaxes de comentarios poden utilizar os valores predeterminados do navegador (diferentes para cada navegador e sen estilo mediante CSS) ou os nosos estilos de comentarios personalizados con HTML e CSS adicionais.
  • Podes proporcionar mensaxes de validez personalizadas setCustomValidityen JavaScript.

Tendo isto en conta, considere as seguintes demostracións para os nosos estilos de validación de formularios personalizados, as clases opcionais do lado do servidor e os valores predeterminados do navegador.

Estilos personalizados

Para as mensaxes de validación de formularios Bootstrap personalizadas, terás que engadir o novalidateatributo booleano ao teu <form>. Isto desactiva as ferramentas de comentarios predeterminadas do navegador, pero aínda así proporciona acceso ás API de validación de formularios en JavaScript. Tenta enviar o formulario a continuación; o noso JavaScript interceptará o botón de enviar e transmitiráche comentarios.

Cando intentes enviar, verás os estilos :invalide :validaplicados aos teus controis de formulario.

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

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

Valores predeterminados do navegador

Non che interesan mensaxes de comentarios de validación personalizadas ou escribir JavaScript para cambiar os comportamentos dos formularios? Todo ben, podes usar os valores predeterminados do navegador. Proba a enviar o seguinte formulario. Dependendo do teu navegador e do teu sistema operativo, verás un estilo de comentarios lixeiramente diferente.

Aínda que estes estilos de comentarios non se poden crear con CSS, aínda podes personalizar o texto de comentarios a través de 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>

Lado do servidor

Recomendamos utilizar a validación do lado do cliente, pero no caso de precisar o lado do servidor, pode indicar os campos de formulario non válidos e válidos con .is-invalide .is-valid. Teña en conta que .invalid-feedbacktamén é compatible con estas clases.

Parece ben!
Parece ben!
@
Escolla un nome de usuario.
Indica unha cidade válida.
Proporciona un estado válido.
Proporciona un zip válido.
Debes aceptar antes de enviar. 
<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>

Elementos soportados

Os nosos exemplos de formularios mostran textos nativos <input>anteriores, pero os estilos de validación de formularios tamén están dispoñibles para os nosos controis de formularios personalizados.

Exemplo de texto de comentarios non válido
Máis exemplo de texto de comentarios non válido
Exemplo de comentarios de selección personalizada non válidos
Exemplo de comentarios de ficheiros personalizados non válidos 
<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>

Suxestións sobre ferramentas

Se o deseño do teu formulario o permite, podes intercambiar as .{valid|invalid}-feedbackclases por .{valid|invalid}-tooltipclases para mostrar comentarios de validación nunha información con estilo. Asegúrate de ter un pai con position: relativeel para colocar a información sobre ferramentas. No seguinte exemplo, as nosas clases de columnas xa teñen isto, pero o teu proxecto pode requirir unha configuración alternativa.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<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>

Formularios personalizados

Para obter aínda máis personalización e coherencia entre o navegador, utiliza os nosos elementos de formulario completamente personalizados para substituír os valores predeterminados do navegador. Están construídos sobre o marcado semántico e accesible, polo que son substitutos sólidos para calquera control de formulario predeterminado.

Caixas de verificación e radios

Cada caixa de verificación e radio está envolta nunha <div>cun irmán <span>para crear o noso control personalizado e unha <label>para o texto que o acompaña. Estruturalmente, este é o mesmo enfoque que o noso predeterminado .form-check.

Usamos o selector de irmáns ( ~) para todos os nosos <input>estados, por exemplo, :checkedpara diseñar correctamente o noso indicador de formulario personalizado. Cando se combina coa .custom-control-labelclase, tamén podemos estilizar o texto de cada elemento en función do <input>estado de '.

Ocultamos o valor predeterminado <input>con opacitye usamos .custom-control-labelpara crear un novo indicador de formulario personalizado no seu lugar con ::beforee ::after. Desafortunadamente, non podemos crear un personalizado só <input>porque os CSS contentnon funcionan nese elemento.

Nos estados marcados, usamos iconas SVG incrustadas base64 de Open Iconic . Isto ofrécenos o mellor control para o estilo e o posicionamento en navegadores e dispositivos.

Casillas de verificación

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

As caixas de verificación personalizadas tamén poden utilizar a :indeterminatepseudo-clase cando se definen manualmente mediante JavaScript (non hai ningún atributo HTML dispoñible para especificalo).

Se estás usando jQuery, algo como isto debería ser suficiente:

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

Radios

<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 liña

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

Desactivado

Tamén se poden desactivar as caixas de verificación e as radios personalizadas. Engade o disabledatributo booleano ao <input>e o indicador personalizado e a descrición da etiqueta terán un estilo automaticamente.

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

Seleccione menú

Os menús personalizados <select>só necesitan unha clase personalizada .custom-selectpara activar os estilos personalizados.

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

Tamén podes escoller entre pequenas e grandes seleccións personalizadas para que coincidan coas nosas entradas de texto de tamaño 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>

multipleTamén se admite o atributo:

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

Como é o sizeatributo:

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

Explorador de ficheiros

A entrada de ficheiros é a máis retorcida do grupo e require JavaScript adicional se queres conectalos coa función Escolla ficheiro... e o texto do nome do ficheiro seleccionado.

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

Ocultamos o ficheiro predeterminado <input>mediante opacitye no seu lugar estilizamos o <label>. O botón xérase e colócase con ::after. Por último, declaramos a widthe heightsobre o <input>para o espazo adecuado para o contido circundante.

Traducir ou personalizar as cadeas

A :lang()pseudo-clase úsase para permitir a tradución do texto "Examinar" a outros idiomas. Anular ou engadir entradas á $custom-file-textvariable Sass coa etiqueta de idioma relevante e cadeas localizadas. As cadeas inglesas pódense personalizar do mesmo xeito. Por exemplo, é como se pode engadir unha tradución ao español (o código do español é es):

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

Aquí está lang(es)en acción sobre a entrada de ficheiro personalizado para unha tradución ao español:

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

Necesitarás establecer o idioma do teu documento (ou a súa subárbore) correctamente para que se mostre o texto correcto. Isto pódese facer usando o langatributo do <html>elemento ou a Content-Languagecabeceira HTTP , entre outros métodos.