Cómo hacer un formulario básico con Bootstrap

Ya sabéis que Bootstrap es una de las librerías front-end más populares en esto del desarrollo web. Este desarrollo es obra del equipo de Twitter y nos proporciona un conjunto de funciones extra para aumentar las capacidades por defecto de los diseños HTML+CSS+JS. Una de las partes más importantes a la hora de crear una página web, suelen ser los formularios, concretamente para los clientes. ¿Por qué? Muy sencillo, suele ser la parte con la que los usuarios pueden comunicarse con los adminitradores de la web. En este artículo vamos a enseñarte cómo implementar un formulario básico con Bootstrap, ampliando sus funciones básicas.

Antes que nada vamos a crear un formulario de lo más simple en HTML:

<form>
  <label for="nombre">Nombre:</label>
  <input class="form-control" id="nombre" type="text" name="nombre"/>
 
  <label for="email">Email:</label>
  <input class="form-control"  id="email" type="text" name="email"/>
 
  <label>
    <input type="checkbox"> Recordarme
  </label>
  <button type="submit">Enviar</button>
</form>

Como verás, en el código anterior hacemos uso de los elementos label, para especificar el nombre de los campos, y de los inputs, para definir los elementos de nuestro formulario. También nos servimos de un button para hacer el envío del formulario y de varios elementos HTML para montar el diseño, lógicamente.

form-control

En bootstrap podemos identificar un campo de entrada gracias a una clase llamada form-control, ya sea un input, un select, un textarea, o lo que sea. Si nombramos la clase a un input como form-control estaremos definiendo dicho elemento como un campo de un formulario y a ocupar el 100% del ancho del contenedor en el que está incluido.

<label for="nombre">Nombre:</label>
<input class="form-control" id="nombre" type="text" name="nombre"/>

form-group

Si queremos agrupar los elementos de un formulario, debemos hacer uso de form-group. Es decir, si contamos con un label y un campo, podemos agruparlos en un contenedor cuyo nombre de clase sea form-group. Mirad el ejemplo de más abajo, y lo comprenderéis mejor.

<div class="form-group">
  <label for="email">Email:</label>
  <input class="form-control"  id="email" type="text" name="email"/>
</div>

btn

Si queremos que nuestro botón de envío de formulario sea relevante e imponga respeto, puedes hacer uso de la clase btn. Para darle este estilo no es necesario que esté dentro del formulario. Podéis echar un vistazo al código de más abajo.

<button type="submit" class="btn btn-default">Enviar</button>

Además de btn, tenemos otras clases como btn-default, btn-primary, btn-success... para representar de colores distintos nuestro botón, sobretodo si lo queremos enfocar a distintos fines.

Con estas tres características que te hemos mostrado como form-control, btn y form-group podemos implementar un formulario muy muy básico mediante Bootstrap. Si ponemos todo lo que hemos aprendido en la palestra, podemos obtener un formulario tal que así:

<form>
  <div class="form-group">
    <label for="nombre">Nombre:</label>
    <input class="form-control" id="nombre" type="text" name="nombre"/>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input class="form-control"  id="email" type="text" name="email"/>
  </div>
 
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Recordarme
      </label>
    </div>
  </div>
 
  <button type="submit" class="btn btn-default">Enviar</button>
</form>

Y este ha sido el artículo en el que trataba explicaros como combinar audio y video con ffmpeg, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.