5.5. Estados de formulario (Bootstrap 3, el manual oficial)

Modificar el estado de los controles del formulario o de sus elementos <label> es una de las mejores formas de proporcionar información adicional a los usuarios.

5.5.1. Campos seleccionados

Bootstrap 3 aplica una sombra a los campos seleccionados mediante la propiedad box-shadow de CSS aplicada a la pseudo-clase :focus del elemento. Ejemplo:

<input class="form-control" id="inputSeleccionado" type="text" value="Este campo está seleccionado...">

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 5.10 Campo seleccionado en Bootstrap 3

5.5.2. Campos deshabilitados

Añadiendo el atributo disabled a cualquier campo de texto evitas que el usuario pueda introducir información y Bootstrap 3 lo muestra con un aspecto muy diferente. Ejemplo:

<input class="form-control" id="campoDeshabilitado" type="text" placeholder="Este campo está deshabilitado..." disabled>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 5.11 Campo deshabilitado en Bootstrap 3

5.5.3. Deshabilitando grupos de campos de formulario

Además de deshabilitar campos individuales, también es posible añadir el atributo disabled a un elemento <fieldset> para deshabilitar cualquier campo de formulario que se encuentre en su interior.

Nota Esta clase sólo afecta al aspecto de los enlaces <a class="btn btn-default">, pero no a su funcionalidad. Para deshabilitar realmente los enlaces, tendrás que utilizar código JavaScript.

Advertencia Internet Explorer 9 y sus versiones anteriores no soportan el uso del atributo disabled en el elemento <fieldset>, por lo que tendrás que utilizar algo de código JavaScript para deshabilitar los campos en ese navegador.

Ejemplo:

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Campo deshabilitado</label>
      <input type="text" id="campoDeshabilitado" class="form-control"
             placeholder="Campo deshabilitado">
    </div>
    <div class="form-group">
      <label for="listaDeshabilitada">Lista deshabilitada</label>
      <select id="listaDeshabilitada" class="form-control">
        <option>Lista deshabilitada</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> No puedes pinchar esta opción
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </fieldset>
</form>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 5.12 Campos deshabilitados en Bootstrap 3

5.5.4. Estados de validación

Bootstrap 3 define varios estilos para indicar el estado de la validación de cada campo del formulario: .has-warning para las advertencias, .has-error para los errores y .has-success para cuando el valor es correcto. Lo mejor es que estas clases se pueden aplicar a cualquier elemento que contenga una de las tres siguientes clases: .control-label, .form-control y .help-block.

Ejemplo:

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Campo con un valor válido</label>
  <input type="text" class="form-control" id="campoValido">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Campo con una advertencia</label>
  <input type="text" class="form-control" id="campoAdvertencia">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Campo con un error</label>
  <input type="text" class="form-control" id="campoError">
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 5.13 Estados de validación en Bootstrap 3