La primera vez que hablé en este blog sobre Twitter Bootstrap fue precisamente para hablar de los formularios, y donde intenté dar las primeras pinceladas para hacer formularios. Hoy, ampliamos los conocimientos sobre los formularios, que tan importantes son en el desarrollo de webapps.
Formularios con Bootstrap
La etiqueta form es la que define un formulario, y al usar Bootstrap es interesante incluir el atributo role=form. Para la gestión de datos se aconseja que se haga por grupos (con la intención de tener una buena visibilidad), esto significa que debemos incluir DIVs que tengan la clase form-group, y de esta forma, todo lo que esté contenido en dicho grupo será tratado por igual. Si te manejas bien con los grids de Bootstrap, form-group puede asimilarse a la clase row de los grids.
Seguimos profundizando, y dentro de cada grupo del formulario, es deseable utilizar label para las etiquetas y completar el atributo for para indicar el input al que estará vinculada, además de la clase control-label para identificar esa etiqueta, y sobre todo, para darle el aspecto característico de Bootstrap.
Para la entrada de información se utiliza las etiquetas input, a la que hay que asignarle un tipo, el que se corresponda con el tipo de dato esperado: texto, numérico, fecha, … Por si no os acordais, al principio de iniciar este blog hablé de las nuevas etiquetas en HTML5, y una de las muchas novedades venía en las etiquetas input. Se han ampliado los tipos, y ahora puedes forzar a que la entrada de un control sea numérico, texto o incluso un email.
Siguiendo con input, es casi obligatorio asignarle un id y un nombre (name), que será el mismo que el atributo for the label (con el que está vinculado). Para asignarle el aspecto característico hay que incluir la clase form-control. Cómo característica adicional, se puede agregar placeholder, que es el texto que aparecerá cuando esté vacio para informar al usuario del tipo de dato a introducir (a mi me gusta mucho este atributo!).
Mientras que para las etiquetas sí que se pueden incluir clases para controlar anchos (como los grids), esto no es válido para los inputs, y hay que actuar aplicando otras clases diferentes.
<form class="form-horizontal"> <div class="form-group"> <label for="dato" class="control-label col-md-3">Dato:</label> <div class="col-md-6"> <input type="text" name="dato" id="dato" class="form-control" placeholder="Dato" /> </div> </div> </form>
Mejorando los controles
El hecho de que haya que asignar clases del framework Bootstrap a casi todo es para mejorar la apariencia, y precísamente esto también sucede con los controles inputs. Para ello, en los DIVs en los que sólo tengamos controles inputs que deseemos mejorar, debemos incluir la clase input-group, para indicarle que queremos mejorar el aspecto del control.
Si dentro de un input queremos incluir un texto, debemos incluir una etiqueta spam con la clase input-group-addon.
Ejemplo de formulario
A continuación tienes un código de un formulario mejorado, que utiliza todo lo que se ha explicado en esta entrada:
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-md-3">Username:</label>
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" class="form-control" name="username" id="username" />
</div>
</div>
</div>
</form>
Y el resultado, que además puedes ver aquí:
form username
Creando grupos de botones en lugar de radio buttons
Ya hablamos de botones con Twitter Bootstrap y vimos cómo se pueden poner de bonitos aplicando un par de clases. Lo cierto es que se puede dar la apariencia de botones a muchas etiquetas, como a o incluso labels. El caso es que se puede modificar el aspecto de controles radio usando la clase btn-group, y usando input de tipo radio, modificando totalmente el aspecto. Además, hay que incluir la propiedad data-toggle=buttons.
El código HTML:
<form class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" id="first" name="sample" /> Uno </label> <label class="btn btn-primary"> <input type="radio" id="second" name="sample" /> Dos </label> <label class="btn btn-primary"> <input type="radio" id="tres" name="sample" /> Tres </label> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-default col-md-offset-3 col-md-4">Enviar formulario</button> </div> </form>
Podeis ver aquí todo lo que hemos visto en esta página.
Radio Buttons con Bootstrap
Seguimos aprendiendo con Bootstrap!!