Bootstrap - Formularios

En este capítulo, estudiaremos cómo crear formularios con facilidad usando Bootstrap. Bootstrap lo hace fácil con el marcado HTML simple y las clases extendidas para diferentes estilos de formularios. En este capítulo estudiaremos cómo crear formularios fácilmente usando Bootstrap.

Diseño de formulario

Bootstrap le proporciona los siguientes tipos de diseños de formularios:

  • Forma vertical (predeterminada)
  • Formulario en línea
  • Forma horizontal

Forma vertical o básica

La estructura de formulario básica viene con Bootstrap; los controles de formulario individuales reciben automáticamente un estilo global. Para crear un formulario básico, haga lo siguiente:

  • Agregue un formulario de función al elemento <form> padre.

  • Envuelva las etiquetas y los controles en un <div> con la clase .form-group . Esto es necesario para un espaciado óptimo.

  • Agregue una clase de .form-control a todos los elementos textuales <input>, <textarea> y <select>.

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Formulario en línea

Para crear un formulario donde todos los elementos están alineados, alineados a la izquierda y las etiquetas están al lado, agregue la clase .form-inline a la etiqueta <form>.

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

  • Por defecto, las entradas, selecciones y áreas de texto tienen un ancho del 100% en Bootstrap. Debe establecer un ancho en los controles del formulario cuando utilice un formulario en línea.

  • Usando la clase .sr-only , puede ocultar las etiquetas de los formularios en línea.

Forma horizontal

Las formas horizontales se distinguen de las demás no solo en la cantidad de marcado, sino también en la presentación del formulario. Para crear un formulario que utilice el diseño horizontal, haga lo siguiente:

  • Agregue una clase de .form-horizontal al elemento primario <form>.

  • Envuelva las etiquetas y los controles en un <div> con la clase .form-group .

  • Agregue una clase de .control-label a las etiquetas.

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

Controles de formulario admitidos

Bootstrap admite de forma nativa los controles de formulario más comunes, principalmente entrada, área de texto, casilla de verificación, radio y selección.

Entradas

El campo de texto de formulario más común es el campo de entrada. Aquí es donde los usuarios ingresarán la mayoría de los datos esenciales del formulario. Bootstrap ofrece soporte para todos los tipos de entrada HTML5 nativos: texto, contraseña, fecha y hora, fecha y hora local, fecha, mes, hora, semana, número, correo electrónico, url, búsqueda, teléfono y color . Se requiere una declaración de tipo adecuada para que las entradas tengan un estilo completo.

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Textarea

El área de texto se usa cuando necesita varias líneas de entrada. Cambie el atributo de filas según sea necesario (menos filas = cuadro más pequeño, más filas = cuadro más grande).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Casillas de verificación y botones de opción

Las casillas de verificación y los botones de opción son excelentes cuando desea que los usuarios elijan de una lista de opciones predeterminadas.

  • Al crear un formulario, use la casilla de verificación si desea que el usuario seleccione cualquier número de opciones de una lista. Utilice la radio si desea limitar al usuario a una sola selección.

  • Utilice la clase .checkbox-inline o .radio-inline para que aparezcan una serie de casillas de verificación o radios para que los controles aparezcan en la misma línea.

El siguiente ejemplo muestra ambos tipos (predeterminado y en línea):

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Selecciona

Una selección se utiliza cuando desea permitir que el usuario elija entre varias opciones, pero de forma predeterminada solo permite una.

  • Utilice <seleccionar> para las opciones de lista con las que el usuario está familiarizado, como estados o números.

  • Utilice multiple = "multiple" para permitir que los usuarios seleccionen más de una opción.

El siguiente ejemplo muestra ambos tipos (selectos y múltiples):

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Control estático

Utilice la clase .form-control-static en un <p>, cuando necesite colocar texto sin formato junto a una etiqueta de formulario dentro de un formulario horizontal.

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

Estados de control de formulario

Además del estado : focus (es decir, un usuario hace clic en la entrada o pestañas en ella), Bootstrap ofrece estilo para entradas y clases deshabilitadas para la validación de formularios.

Enfoque de entrada

Cuando una entrada recibe : foco , el contorno de la entrada se elimina y se aplica una sombra de cuadro .

Entradas deshabilitadas

Si necesita deshabilitar una entrada, simplemente agregar el atributo deshabilitado no solo lo deshabilitará; también cambiará el estilo y el cursor del mouse cuando el cursor se sitúe sobre el elemento.

Fieldsets deshabilitados

Agregue el atributo deshabilitado a un <fieldset> para deshabilitar todos los controles dentro del <fieldset> a la vez.

Estados de validación

Bootstrap incluye estilos de validación para errores, advertencias y mensajes de éxito. Para usarlo, simplemente agregue la clase apropiada ( .has-warning, .has-error o .has-success ) al elemento padre.

El siguiente ejemplo demuestra todos los estados de control de formulario:

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control"> 
               <option>Disabled select</option>
            </select> 
         </div>
      </div> 
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

Tamaño de control de formulario

Puede establecer alturas y anchos de formularios utilizando clases como .input-lg y .col-lg- * respectivamente. El siguiente ejemplo demuestra esto:

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

texto de ayuda

Los controles de formulario de Bootstrap pueden tener un texto de ayuda a nivel de bloque que fluye con las entradas. Para agregar un bloque de contenido de ancho completo, use .help-block después de <input>. El siguiente ejemplo demuestra esto:

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>