Source

Formularios

Ejemplos y pautas de uso para estilos de control de formulario, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.

Visión general

Los controles de formulario de Bootstrap amplían nuestros estilos de formulario reiniciados con clases. Use estas clases para optar por sus pantallas personalizadas para una representación más consistente en todos los navegadores y dispositivos.

Asegúrese de utilizar un typeatributo apropiado en todas las entradas (p. ej., emailpara la dirección de correo electrónico o numberpara la información numérica) para aprovechar los controles de entrada más nuevos, como la verificación de correo electrónico, la selección de números y más.

Aquí hay un ejemplo rápido para demostrar los estilos de formulario de Bootstrap. Siga leyendo para obtener documentación sobre las clases requeridas, el diseño de formularios y más.

Nunca compartiremos su correo electrónico con nadie 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-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Controles de formulario

Los controles de forma textual, como <input>s, <select>s y <textarea>s, tienen estilo con la .form-controlclase. Se incluyen estilos para apariencia general, estado de enfoque, tamaño y más.

Asegúrese de explorar nuestros formularios personalizados para obtener más 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 archivos, cambie el .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>

Dimensionamiento

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

Solo lectura

Agregue el readonlyatributo booleano en una entrada para evitar la modificación del valor de la entrada. Las entradas de solo lectura aparecen más claras (al igual que las entradas deshabilitadas), pero conservan el cursor estándar.

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

Texto sin formato de solo lectura

Si desea tener <input readonly>elementos en su formulario con estilo como texto sin formato, use la .form-control-plaintextclase para eliminar el estilo de campo de formulario predeterminado y conservar el margen y el relleno 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>

Entradas de rango

Establezca entradas de rango desplazables horizontalmente usando .form-control-range.

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

Casillas de verificación y radios

Las casillas de verificación y los radios predeterminados se han mejorado con la ayuda de .form-checkuna única clase para ambos tipos de entrada que mejora el diseño y el comportamiento de sus elementos HTML . Las casillas de verificación son para seleccionar una o varias opciones en una lista, mientras que las radios son para seleccionar una opción de muchas.

Las casillas de verificación y radios deshabilitadas son compatibles, pero para proporcionar un not-allowedcursor al pasar el mouse sobre el elemento principal <label>, deberá agregar el disabledatributo al elemento .form-check-input. El atributo deshabilitado aplicará un color más claro para ayudar a indicar el estado de la entrada.

El uso de casillas de verificación y radios está diseñado para admitir la validación de formularios basada en HTML y proporcionar etiquetas concisas y accesibles. Como tal, nuestros <input>s y <label>s son elementos hermanos a diferencia de an <input>dentro de a <label>. Esto es un poco más detallado ya que debe especificar idy foratributos para relacionar el <input>y <label>.

Predeterminado (apilado)

De forma predeterminada, cualquier cantidad de casillas de verificación y radios que sean hermanos inmediatos se apilarán verticalmente y se espaciarán 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">
  <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 línea

Agrupe casillas de verificación o radios en la misma fila horizontal agregando .form-check-inlinea cualquier archivo .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>

sin etiquetas

Agregue .position-statica las entradas dentro .form-checkque no tienen ningún texto de etiqueta. Recuerde proporcionar algún tipo de etiqueta para las tecnologías de asistencia (por ejemplo, usando 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>

Diseño

Dado que Bootstrap se aplica display: blocka width: 100%casi todos nuestros controles de formulario, los formularios se apilarán verticalmente de forma predeterminada. Se pueden usar clases adicionales para variar este diseño según el formulario.

Formar grupos

La .form-groupclase es la forma más fácil de agregar algo de estructura a los formularios. Proporciona una clase flexible que fomenta la agrupación adecuada de etiquetas, controles, texto de ayuda opcional y mensajes de validación de formularios. De forma predeterminada, solo se aplica margin-bottom, pero recoge estilos adicionales .form-inlinesegún sea necesario. Úselo con <fieldset>s, <div>s o casi cualquier otro 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>

Cuadrícula de formulario

Se pueden construir formularios más complejos utilizando nuestras clases de cuadrícula. Utilícelos para diseños de formularios que requieran varias columnas, anchos variados y opciones de alineación adicionales.

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

Fila de formulario

También puede cambiar .rowpor .form-row, una variación de nuestra fila de cuadrícula estándar que anula los canales de columna predeterminados para diseños más ajustados y 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>

También se pueden crear diseños más complejos con el 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

Cree formularios horizontales con la cuadrícula agregando la .rowclase para formar grupos y usando las .col-*-*clases para especificar el ancho de sus etiquetas y controles. Asegúrese de agregar también .col-form-labela sus <label>correos electrónicos para que estén centrados verticalmente con sus controles de formulario asociados.

A veces, es posible que necesite utilizar utilidades de margen o relleno para crear la alineación perfecta que necesita. Por ejemplo, hemos eliminado la padding-topetiqueta de nuestras entradas de radio apiladas para alinear mejor la línea de base del texto.

Radios
Caja 
<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 de etiqueta de forma horizontal

Asegúrese de usar .col-form-label-smo .col-form-label-lghasta su <label>s o <legend>s para seguir correctamente el tamaño de .form-control-lgy .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 de columna

Como se muestra en los ejemplos anteriores, nuestro sistema de cuadrícula le permite colocar cualquier número de .cols dentro de a .rowo .form-row. Dividirán el ancho disponible en partes iguales entre ellos. También puede elegir un subconjunto de sus columnas para que ocupe más o menos espacio, mientras que los restantes .coldividen el resto por igual, 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>

Tamaño automático

El siguiente ejemplo usa una utilidad flexbox para centrar verticalmente el contenido y los cambios .colpara .col-autoque sus columnas solo ocupen tanto espacio como sea necesario. Dicho de otra manera, la columna se dimensiona a sí misma en función del contenido.

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

Luego puede mezclar eso una vez más con clases de columna de tamaño específico.

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

Y, por supuesto , se admiten controles de formulario personalizados .

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

Formularios en línea

Use la .form-inlineclase para mostrar una serie de etiquetas, controles de formulario y botones en una sola fila horizontal. Los controles de formulario dentro de los formularios en línea varían ligeramente de sus estados predeterminados.

  • Los controles son display: flex, colapsan cualquier espacio en blanco HTML y le permiten proporcionar control de alineación con utilidades de espaciado y flexbox .
  • Los controles y los grupos de entrada reciben width: autopara anular el valor predeterminado de Bootstrap width: 100%.
  • Los controles solo aparecen en línea en las ventanas gráficas que tienen al menos 576 px de ancho para tener en cuenta las ventanas estrechas en los dispositivos móviles.

Es posible que deba abordar manualmente el ancho y la alineación de los controles de formulario individuales con utilidades de espaciado (como se muestra a continuación). Por último, asegúrese de incluir siempre un <label>con cada control de formulario, incluso si necesita ocultarlo de los visitantes que no 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>

También se admiten selecciones y controles de formulario 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 a las etiquetas ocultas

Las tecnologías de asistencia, como los lectores de pantalla, tendrán problemas con sus formularios si no incluye una etiqueta para cada entrada. Para estos formularios en línea, puede ocultar las etiquetas usando la .sr-onlyclase. Existen otros métodos alternativos para proporcionar una etiqueta para las tecnologías de asistencia, como el aria-labelatributo o aria-labelledby. titleSi ninguno de estos está presente, las tecnologías de asistencia pueden recurrir al uso del placeholderatributo, si está presente, pero tenga en cuenta que placeholderno se recomienda el uso de como reemplazo de otros métodos de etiquetado.

Texto de ayuda

El texto de ayuda a nivel de bloque en los formularios se puede crear usando .form-text(anteriormente conocido como .help-blocken v3). El texto de ayuda en línea se puede implementar de manera flexible utilizando cualquier elemento HTML en línea y clases de utilidad como .text-muted.

Asociación de texto de ayuda con controles de formulario

El texto de ayuda debe asociarse explícitamente con el control de formulario con el que se relaciona el uso del aria-describedbyatributo. Esto garantizará que las tecnologías de asistencia, como los lectores de pantalla, anuncien este texto de ayuda cuando el usuario enfoca o ingresa el control.

El texto de ayuda debajo de las entradas se puede diseñar con .form-text. Esta clase incluye display: blocky agrega un margen superior para facilitar el espaciado de las entradas anteriores.

Su contraseña debe tener entre 8 y 20 caracteres, contener letras y números, y no debe contener espacios, caracteres especiales 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 texto en línea puede usar cualquier elemento HTML en línea típico (ya sea un <small>, <span>o cualquier otro) con nada más que una clase de utilidad.

Debe tener entre 8 y 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 deshabilitados

Agregue el disabledatributo booleano en una entrada para evitar las interacciones del usuario y hacer que parezca más claro.

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

Agregue el disabledatributo a <fieldset>para deshabilitar todos los controles 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 anclas

De manera predeterminada, los navegadores tratarán todos los controles <input>de formulario nativos ( <select>y <button>elementos) dentro de un <fieldset disabled>como deshabilitados, lo que evitará las interacciones del teclado y el mouse en ellos. Sin embargo, si su formulario también incluye <a ... class="btn btn-*">elementos, estos solo tendrán un estilo de pointer-events: none. Como se indicó en la sección sobre el estado deshabilitado de los botones (y específicamente en la subsección de los elementos de anclaje), esta propiedad CSS aún no está estandarizada y no es totalmente compatible con Internet Explorer 10, y no evitará que los usuarios de teclados sean capaz de enfocar o activar estos enlaces. Entonces, para estar seguro, use JavaScript personalizado para deshabilitar dichos enlaces.

Compatibilidad entre navegadores

Si bien Bootstrap aplicará estos estilos en todos los navegadores, Internet Explorer 11 y versiones anteriores no admiten completamente el disabledatributo en un archivo <fieldset>. Use JavaScript personalizado para deshabilitar el conjunto de campos en estos navegadores.

Validación

Proporcione comentarios valiosos y procesables a sus usuarios con la validación de formularios HTML5, disponible en todos nuestros navegadores compatibles . Elija entre los comentarios de validación predeterminados del navegador o implemente mensajes personalizados con nuestras clases integradas y JavaScript de inicio.

Actualmente, recomendamos usar estilos de validación personalizados, ya que los mensajes de validación predeterminados del navegador nativo no se exponen constantemente a las tecnologías de asistencia en todos los navegadores (sobre todo, Chrome en computadoras de escritorio y dispositivos móviles).

Cómo funciona

Así es como funciona la validación de formularios con Bootstrap:

  • La validación de formularios HTML se aplica a través de dos pseudoclases de CSS :invalidy :valid. Se aplica a los elementos <input>, <select>y <textarea>.
  • Bootstrap aplica el ámbito :invalidy los :validestilos a la .was-validatedclase principal, que generalmente se aplica a <form>. De lo contrario, cualquier campo obligatorio sin valor aparecerá como no válido al cargar la página. De esta forma, puede elegir cuándo activarlos (por lo general, después de intentar enviar el formulario).
  • Para restablecer la apariencia del formulario (por ejemplo, en el caso de envíos de formularios dinámicos mediante AJAX), elimine la .was-validatedclase de <form>nuevo después del envío.
  • Como respaldo, .is-invalidse .is-validpueden usar clases en lugar de las pseudoclases para la validación del lado del servidor . No requieren una .was-validatedclase principal.
  • Debido a las limitaciones en el funcionamiento de CSS, no podemos (en la actualidad) aplicar estilos a un <label>control de formulario anterior al DOM sin la ayuda de JavaScript personalizado.
  • Todos los navegadores modernos admiten la API de validación de restricciones , una serie de métodos de JavaScript para validar controles de formulario.
  • Los mensajes de comentarios pueden utilizar los valores predeterminados del navegador (diferentes para cada navegador y sin estilo a través de CSS) o nuestros estilos de comentarios personalizados con HTML y CSS adicionales.
  • Puede proporcionar mensajes de validez personalizados setCustomValidityen JavaScript.

Con eso en mente, considere las siguientes demostraciones para nuestros estilos de validación de formularios personalizados, clases opcionales del lado del servidor y valores predeterminados del navegador.

Estilos personalizados

Para los mensajes de validación de formulario Bootstrap personalizados, deberá agregar el novalidateatributo booleano a su archivo <form>. Esto deshabilita la información sobre herramientas de comentarios predeterminada del navegador, pero aún proporciona acceso a las API de validación de formularios en JavaScript. Intente enviar el siguiente formulario; nuestro JavaScript interceptará el botón de enviar y le transmitirá sus comentarios.

Cuando intente enviar, verá los estilos :invalidy :validaplicados a los controles de su 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 del navegador

¿No le interesan los mensajes de comentarios de validación personalizados o escribir JavaScript para cambiar los comportamientos de los formularios? Todo bien, puedes usar los valores predeterminados del navegador. Intente enviar el formulario a continuación. Dependiendo de su navegador y sistema operativo, verá un estilo de retroalimentación ligeramente diferente.

Si bien estos estilos de comentarios no se pueden diseñar con CSS, aún puede personalizar el 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 del servidor

Recomendamos utilizar la validación del lado del cliente, pero en caso de que requiera el lado del servidor, puede indicar campos de formulario válidos y no válidos con .is-invalidy .is-valid. Tenga en cuenta que .invalid-feedbacktambién es compatible con estas clases.

¡Se ve bien!
¡Se ve bien!
@
Por favor, elija un nombre de usuario.
Proporcione una ciudad válida.
Proporcione un estado válido.
Proporcione un código postal válido.
Debe estar de acuerdo 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 compatibles

Nuestros formularios de ejemplo muestran los correos electrónicos nativos <input>anteriores, pero los estilos de validación de formularios también están disponibles para nuestros controles de formulario personalizados.

Ejemplo de texto de comentario no válido
Más ejemplos de texto de comentario no válido
Ejemplo de comentarios de selección personalizados no válidos
Ejemplo de comentario de archivo personalizado no válido 
<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>

Información sobre herramientas

Si el diseño de su formulario lo permite, puede cambiar las .{valid|invalid}-feedbackclases por .{valid|invalid}-tooltipclases para mostrar comentarios de validación en una información sobre herramientas con estilo. Asegúrese de tener un padre con position: relativeél para el posicionamiento de la información sobre herramientas. En el siguiente ejemplo, nuestras clases de columnas ya tienen esto, pero su proyecto puede requerir una 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 una mayor personalización y coherencia entre navegadores, utilice nuestros elementos de formulario completamente personalizados para reemplazar los valores predeterminados del navegador. Están construidos sobre el marcado semántico y accesible, por lo que son reemplazos sólidos para cualquier control de formulario predeterminado.

Casillas de verificación y radios

Cada casilla de verificación y radio está envuelta en un <div>con un hermano <span>para crear nuestro control personalizado y un <label>para el texto que lo acompaña. Estructuralmente, este es el mismo enfoque que nuestro predeterminado .form-check.

Usamos el selector de hermanos ( ~) para todos nuestros <input>estados, como, :checkedpara diseñar correctamente nuestro indicador de formulario personalizado. Cuando se combina con la .custom-control-labelclase, también podemos diseñar el texto de cada elemento en función del <input>estado de .

Ocultamos el valor predeterminado <input>con opacityy usamos .custom-control-labelpara crear un nuevo indicador de formulario personalizado en su lugar con ::beforey ::after. Desafortunadamente, no podemos crear uno personalizado solo <input>porque el CSS contentno funciona en ese elemento.

En los estados marcados, usamos iconos SVG incrustados base64 de Open Iconic . Esto nos brinda el mejor control para diseñar y posicionar en todos los navegadores y 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>

Las casillas de verificación personalizadas también pueden utilizar la :indeterminatepseudoclase cuando se configuran manualmente a través de JavaScript (no hay un atributo HTML disponible para especificarlo).

Si está utilizando jQuery, algo como esto 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 línea

<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

Las casillas de verificación y las radios personalizadas también se pueden desactivar. Agregue el disabledatributo booleano a <input>y el indicador personalizado y la descripción de la etiqueta se diseñarán automáticamente.

<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 el menú

Los menús personalizados <select>solo necesitan una clase personalizada .custom-selectpara activar los estilos personalizados. Los estilos personalizados se limitan a la <select>apariencia inicial del correo electrónico y no pueden modificar el correo <option>electrónico debido a las limitaciones del navegador.

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

También puede elegir entre selecciones personalizadas pequeñas y grandes para que coincidan con nuestras 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>

El multipleatributo también es 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>

Como es el 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>

Rango

Cree <input type="range">controles personalizados con .custom-range. La pista (el fondo) y el pulgar (el valor) están diseñados para que aparezcan iguales en todos los navegadores. Como solo IE y Firefox admiten "llenar" su pista desde la izquierda o la derecha del pulgar como un medio para indicar visualmente el progreso, actualmente no lo admitimos.

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

Las entradas de rango tienen valores implícitos para miny max— 0y 100, respectivamente. Puede especificar nuevos valores para aquellos que usan los atributos miny .max

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

De forma predeterminada, las entradas de rango se ajustan a valores enteros. Para cambiar esto, puede especificar un stepvalor. En el siguiente ejemplo, duplicamos el número de pasos usando step="0.5".

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

Explorador de archivos

La entrada de archivo es la más retorcida del grupo y requiere JavaScript adicional si desea conectarlos con Elegir archivo funcional... y texto de nombre de archivo 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 el archivo predeterminado <input>a través de opacityy, en su lugar, diseñamos el archivo <label>. El botón se genera y posiciona con ::after. Por último, declaramos a widthy heighten el <input>espacio adecuado para el contenido circundante.

Traducir o personalizar las cadenas

La :lang()pseudoclase se utiliza para permitir la traducción del texto "Examinar" a otros idiomas. Anule o agregue entradas a la $custom-file-textvariable Sass con la etiqueta de idioma relevante y las cadenas localizadas. Las cadenas en inglés se pueden personalizar de la misma manera. Por ejemplo, así es como se podría agregar una traducción al español (el código de idioma del español es es):

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

Aquí está lang(es)en acción la entrada del archivo personalizado para una traducción al 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>

Deberá configurar correctamente el idioma de su documento (o subárbol del mismo) para que se muestre el texto correcto. Esto se puede hacer usando el langatributo en el <html>elemento o el Content-Languageencabezado HTTP , entre otros métodos.