Formularios de texto

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.


Texto

Texto de asistencia

  <div class="form-label-container">
    <label for="input-text" class="form-label">
      Campo de texto *
    </label>
  </div>
  <input
    type="text"
    class="form-control"
    id="input-text"
    name="campoTexto"
    aria-describedby="Texto"
    placeholder="Ingrese Textos"
  />
  <p class="form-label-description">Texto de asistencia</p>

Número

Campo de asistencia

  <div class="form-label-container">
    <label for="input-number" class="form-label">
      Campo numérico *
    </label>
  </div>
  <input
    type="number"
    class="form-control"
    id="input-number"
    name="campoNumero"
    aria-describedby="Number"
    placeholder="Ingrese Números"
  />
  <p class="form-label-description">Campo de asistencia</p>

Correo electrónico

Campo de asistencia

  <div class="form-label-container">
    <label for="input-email" class="form-label">
      Campo de email *
    </label>
  </div>
  <input
    type="email"
    class="form-control"
    id="input-email"
    name="campoEmail"
    aria-describedby="Email"
    placeholder="email@test.com"
  />
  <p class="form-label-description">Campo de asistencia</p>

Fecha

  <div class="form-label-container">
    <label for="input-date" class="form-label">
      Nombre del campo *
    </label>
  </div>
  <input
    type="date"
    class="form-control"
    id="input-date"
    name="campoFecha"
    aria-describedby="Date"
    placeholder="Selecciona la fecha"
  />

Bloque de texto

Campo de asistencia

  <div class="form-label-container">
    <label for="input-textarea" class="form-label">
      Nombre del campo *
    </label>
  </div>
  <textarea class="form-control" id="input-textarea" name="campoBloqueTexto" placeholder="Texto de ejemplo"></textarea>
  <p class="form-label-description">Campo de asistencia</p>

De selección

Campo de asistencia


<div class="form-label-container">
  <label for="input-select" class="form-label">
    Nombre del selector *
  </label>
</div>
<select class="form-control form-select" aria-label="Ejemplo de selección por defecto">
    <option value="0">Seleccionar</option>
    <option value="1">Opción</option>
    <option value="2">Opción</option>
    <option value="3">Opción</option>
</select>
<p class="form-label-description">Campo de asistencia</p>

Deshabilitado






  <div class="container">
    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-five" class="form-label disabled">
          Ejemplo campo de texto
        </label>
      </div>
      <input
        type="text"
        class="form-control"
        id="example-five"
        aria-describedby="Campo de texto"
        placeholder="Textos"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-four" class="form-label disabled">
          Ejemplo campo de numero
        </label>
      </div>
      <input
        type="number"
        class="form-control"
        id="example-four"
        aria-describedby="campo de número"
        placeholder="Números"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-three" class="form-label disabled">
          Ejemplo campo de mail
        </label>
      </div>
      <input
        type="email"
        class="form-control"
        id="example-three"
        aria-describedby="Email"
        placeholder="Email@test.com"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-two" class="form-label disabled">
          Ejemplo campo de fecha
        </label>
      </div>
      <input
        type="date"
        class="form-control"
        id="example-two"
        aria-describedby="Date"
        placeholder="selecciona tu fecha"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-one" class="form-label disabled">
          Ejemplo TextArea
        </label>
      </div>
      <textarea class="form-control" id="example-one" disabled ></textarea>
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">  
        <label for="example-disabled-select" class='form-label disabled'>
          Ejemplo campo de selección.
        </label>
      </div>
      <select class="form-control form-select" aria-label="Ejemplo de input de selección por defecto" disabled>
        <option selected>Campo de selección</option>
        <option value="1">Opción</option>
        <option value="2">Opción</option>
        <option value="3">Opción</option>
      </select>
    </div>
  </div>

Con fondo

Con fondo light


<div class="p-4 form-bg-light">
  <div class="form-label-container">
    <label for="input-text-bg" class="form-label">
      Ejemplo campo de texto con fondo
    </label>
  </div>
  <input
    type="text"
    class="form-control"
    id="input-text-bg"
    name="campoTextoBg"
    aria-describedby="Texto"
    placeholder="Textos"
  />
</div>

Navegación de pie de página