Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Formularios en bootstrap 4

Vamos a ver hoy los formularios en bootstrap 4, que tienen un manejo muy sencillo y además funcionan con las etiquetas de html5.
Para crear un formulario lo primero que tenemos que hacer es abrir una etiqueta form que tenga un method POST, que es que a mi me gusta usar en los formularios por seguridad y un action al archivo donde queremos apuntar el formulario.
Una vez hecho esto podems crear nuestros campos por medio de las etiquetas label que hacen referencia a un campo especifico y por medio de los inputs que requiera nuestro formulario
1
2
3
4
5
6
7
<form method="POST" action="envio.php">
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre">
    <label for="email">email</label>
    <input type="email" id="email">
    <input type="submit" value="enviar">
</form>
Claro que de momento no hemos hecho nada que le diga a bootstrap que hacer con todo esto, ahora debemos de ponerle las clases que el framework utiliza para que vaya tomando forma.
Para ello en los inputs debemos debemos de poner la clase form-control, y en el submit pues las clases de los botones, btn btn-[color]
1
2
3
4
5
6
7
<form method="POST" action="envio.php">
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" class="form-control">
    <label for="email">email</label>
    <input type="email" id="email" class="form-control">
    <input type="submit" value="enviar" class="btn btn-primary">
</form>
De esta forma ya tenemos un formulario preparado, pero si queremos tener el formulario en una sola linea, en la etiqueta form debemos añadir la clase, form-inline

Otros campos

Checkboxs

Para los check boxs el procedimiento es muy similar, como vemos en el siguiente ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="form-check">
    <label for="" class="form-check-label">
        <input type="checkbox" class="form-check-input" value=""> Opcion 1
    </label>
</div>
<div class="form-check">
    <label for="" class="form-check-label">
        <input type="checkbox" class="form-check-input" value=""> Opcion 2
    </label>
</div>
<div class="form-check">
    <label for="" class="form-check-label">
        <input type="checkbox" class="form-check-input" value=""> Opcion 3
    </label>
</div>

Radio buttons

Los radios pueden estar en linea o en diferentes lineas segun queramos, para que esten en linea solo tenemos que quitar el div que envuelve a cada label en el siguiente ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="radio">
    <label for="" class="radio-inline">
        <input type="radio"> opcion 1
    </label>
</div>
<div class="radio">
    <label for="" class="radio-inline">
        <input type="radio"> opcion 2
    </label>
</div>
<div class="radio">
    <label for="" class="radio-inline">
        <input type="radio"> opcion 3
    </label>
</div>

Textarea

1
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>

select

1
2
3
4
5
<select name="" id="" class="form-control">
    <option value="">opcion 1</option>
    <option value="">opcion 2</option>
    <option value="">opcion 3</option>
</select>



Pero esto no es más que un resumen de lo que bootstrap 4 puede hacer con los formularios, para saber hasta donde pueden llegar te propongo que visites la documentación oficial y con lo que allí vas a encontrar seguro que no tienes ningun problema en hacer los formularios como necesites.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas