Bootstrap (parte 22): Controles para formulario

Redes sociales

Estos son los controles para formulario soportados en Bootstrap

  • Campos de entrada (input)
  • Áreas de texto (textarea)
  • Casillas de verificación (checkbox)
  • Botones de opción (radio buttons)
  • Listas de selección (select)
Bootstrap (parte 22): Controles de un formulario

Control Input

Bootstrap soporta todos los tipos de campo de entrada (input) de HTML5: text, password, date, time, datetime-local, month, time, week, number, email, url, search, tel y color.

  • text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.
  • password: Control de línea simple cuyo valor permanece oculto. Se puede usar el atributo maxlength para especificar la longitud máxima del valor que se puede introducir.
  • date: Control para introducir una fecha (año, mes y día, sin hora).
  • time: Control para introducir un valor de tiempo sin zona horaria específica.
  • datetime-local: Control para introducir fecha y hora, sin zona horaria específica.
  • month: Control para introducir un mes y año, sin zona horaria específica.
  • week: Control para introducir una fecha que consiste en número de semana del año sin zona horaria específica.
  • number: Control para introducir un número de punto flotante.
  • email: Campo para introducir una dirección de correo electrónico. El valor introducido se valida para que contenga una dirección de correo válida antes de enviarse. 
  • url: Campo para editar una URL. El valor introducido se valida para que contenga una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados automáticamente.
  • search: Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados automáticamente del valor introducido.
  • tel: Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada.
  • color: Control para especificar un color.

Nota: Un campo de entrada input, no tendrán el estilo adecuado sino está correctamente declarado.

El siguiente ejemplo, contiene varios controles input:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario: input</h2>
  <p>El formulario siguiente contiene dos campos INPUT; uno de tipo texto y el otro de tipo contraseña:</p>
  <form>
    <div class="form-group">
      <label for="usr">Nombre:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
      <label for="pwd">Contraseña:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
  </form>
</div>

</body>
</html>

Control textarea (área de texto)

Otro de los controles para formulario soportados en Bootstrap es el texarea o área de texto.

El siguiente ejemplo contiene un área de texto:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario: textarea</h2>
  <p>El siguiente formulario contiene un área de texto para comentarios:</p>
  <form>
    <div class="form-group">
      <label for="comment">Commentario:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </form>
</div>

</body>
</html>

Checkboses (casillas de verificación)

Las casillas de verificación se utilizan si desea que el usuario seleccione cualquier cantidad de opciones de una lista de opciones preestablecidas.

El siguiente ejemplo contiene tres casillas de verificación. La última opción está deshabilitada:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario: checkbox</h2>
  <p>El siguiente formulario contiene 3 casillas de verificación. La última está deshabilitada:</p>
  <form>
    <div class="checkbox">
      <label><input type="checkbox" value="">Opción 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Opción 2</label>
    </div>
    <div class="checkbox disabled">
      <label><input type="checkbox" value="" disabled>Opción 3</label>
    </div>
  </form>
</div>

</body>
</html>

utiliza la calase .checkbox-inlinesi deseas que las casillas de verificación se muestren en la misma línea:

<label class="checkbox-inline"><input type="checkbox" value="">Opción 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Opción 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Opción 3</label>

Radio Buttons (Botones de opción)

Los botones de opción se usan si desesa limitar al usuario a solo una selección de una lista de opciones preestablecidas.

El siguiente ejemplo contiene tres botones de radio. La primera opción está marcada por defecto y la última opción está deshabilitada:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario: radio buttons</h2>
  <p>El siguiente formulario contiene tres botones de opción. La última opción está deshabilitada y la primera está marcada por defecto:</p>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio" checked>Opción 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Opción 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Opción 3</label>
    </div>
  </form>
</div>

</body>
</html>

Utiliza la clase .radio-inline si deseas que todos los botones de opción se muestren en la misma línea.

<label class="radio-inline"><input type="radio" name="optradio" checked>Opción 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Opción 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Opción  3</label>

Select list (lista de selección)

Utiliza las listas de selección si deseas permitir que el usuario elija entre varias opciones de una lista.

El siguiente ejemplo contiene una lista desplegable:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario: select</h2>
  <p>El siguiente formulario contiene una lista desplegable:</p>
  <form>
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">Selección múltiple (mantén pulsada la tecla <i>Ctrl</i> para seleccionar más de una opción):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>

</body>
</html>

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.