Los formularios de Bootstrap 4

Clase 15 de 21 • Curso de Bootstrap 4

Mònica Mateu

student•

A estas alturas ya soy FAN de Bootstrap >.<!

Diego Rubio

student•

pues si que sabe

Diego Rubio

student•

es maravilloso!

Fernando Galdós

student•

Tambien es importante indicar que en Bootstrp 5.0 ya no aplica el form-grupo, ahora se llama form-label

Giselly Romero Nuñez

student•

Y yo que le habia puesto

mb-3 form-group

Manuel G. Pineda

student•

Muchas gracias!! Estaba preciso buscando cual era el nombre de la nueva clase.

Jose L. Figueroa

student•

Aquí el ** form con validaciones** :

Se pueden utilizar las clases en el form:

class=“was-validated” - Para que se muestren en rojo los campos y el usuario observe que tiene que llenarlos
class=“needs-validation” - Al momento en el que se lanza el submit del button se realiza la validación y le entrega el feedback al usuario de los campos correctos e incorrectos.

<section id="conviertete-en-orador" class="pt-4 pb-4">
      <div class="container">
        <div class="row">
          <div class="col text-uppercase text-center">
            <small>Conviértete en un</small>
            <h2>Orador</h2>
          </div>
        </div>
        <div class"row">
          <div class="col text-center">
            Anótate como orador para darnos una charla ignite.
            Cuéntanos de qué quieres hablar!
          </div>
        </div>
        <div class="row">
          <div class="col col-md-8 offset-md-2 col-lg-8 offset-lg-2 pt-2">
            <form class="needs-validation" novalidate>
              <div class="form-row">
                <div class="form-group col-12 col-md-6">
                  <input type="text" class="form-control" placeholder="Nombre" required>
                  <div class="valid-feedback">
                    Correcto!!
                  </div>
                  <div class="invalid-feedback">
                    Por favor ingresa tu nombre.
                  </div>
                </div>
                <div class="form-group col-12 col-md-6">
                  <input type="text" class="form-control" placeholder="Apellido" required>
                  <div class="valid-feedback">
                    Correcto!!
                  </div>
                  <div class="invalid-feedback">
                    Por favor ingresa tu apellido.
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col">
                  <textarea class="form-control form-control-lg" placeholder="Sobre qué quieres hablar?" required></textarea>
                  <div class="valid-feedback">
                    Correcto!!
                  </div>
                  <div class="invalid-feedback">
                    Debes de escribir sobre qué quieres hablar.
                  </div>
                  <small class="form-text text-muted">
                    Recuerda incluir un título a tu charla.
                  </small>
                </div>
              </div>
              <div class="form-row">
                <div class="col">
                  <button type="submit" class="btn btn-platzi btn-block">Enviar</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

Jose L. Figueroa

student•

Es necesario también agregar el js para que realice las validaciones:

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Noe de Jesus Muñoz Martinez

student•

Muy buena aportación.

Jairo Merea Dueñas

student•

IMPORTANTE

Si estas en el 2021 y las clases no te funcionan, te dejo el codigo con las clases que corresponden ahora

                      <form>
                          <div class="form row">
                              <div class="mb-3 form-group col-12 col-md-6">
                                  <input type="text" class="form-control" placeholder="Nombre">
                              </div>
                              <div class="mb-3 col-12 col-md-6">
                                  <input type="text" class="form-control" placeholder="Apellido">
                              </div>
                          </div>
                          <div class="form row">
                              <div class="mb-3 col">
                                  <textarea name="text" class="form-control form-control-lg" placeholder="Sobre que quieres hablar?"></textarea>
                                  <small class="form-text text-muted">
                                      Recuerda incluir un titulo para tu charla
                                  </small>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col">
                                  <button type="button" class="btn btn-platzi w-100">Enviar</button>
                              </div>
                          </div> 
                      </form>```

Maryan Pinzón

student•

¡Muchísimas gracias!

Ramiro Godoy

student•

Buenísimo!

Juan Felipe Duarte Montañez

student•

Aquí les dejo el código de esta clase actualizado para Bootstrap V5.0


<section id="conviertete-en-orador " class="pt-2 pb-2">
	<div class="container">
		<div class="row">
			<div class="col text-center">
				<small class="text-uppercase"> Conviértete en un </small>
				<h3>ORADOR</h3>
			</div>
		</div>
		<div class="row">
			<div class="col text-center">
				Anótate como orador para dar una charla ignite. Cuéntanos de qué
				quieres hablar!
			</div>
		</div>
		<div class="row">
			<div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2 pt-3">
				<div class="row">
					<div class="form-label col-12 col-md-6">
						<input
							type="text"
							class="form-control"
							placeholder="Nombre"
							aria-label="Nombre"
						/>
					</div>
					<div class="form-label col-12 col-md-6">
						<input
							type="text"
							class="form-control"
							placeholder="Apellido"
							aria-label="Apellido"
						/>
					</div>
				</div>
				<div class="form-label">
					<div class="col">
						<textarea
							name="text"
							class="form-control form-control-lg"
							placeholder="Sobre qué quieres hablar?"
						></textarea>
						<small class="form-text text-muted">
							Recuerda incluir un titulo para tu charla
						</small>
					</div>
				</div>
				<div class="form-label">
					<div class="col">
						<button type="button" class="btn btn-platzi col-12">
							Enviar
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

Blanca Morillo Sierralta

student•

Muchísimas gracias, no sabía cómo hacerlo funcionar sin tu código donde usas form-label.

John Ruiz

student•

Gracias, ya me estaba dando ataques y desesperación.

Giselly Romero Nuñez

student•

Me está encantando esta herramienta! @Platzi debe actualizar el curso con bootstrapp 5 🙏🙏🙏

Usuario anónimo

user•

A considerar:

su el elemento <button>…</button> dentro de sus atributos type tiene como valor: type=“button”, NO se aplicará la validación mediante el campo: required, por lo tanto, es necesario reemplazar el valor del atributo “type” por: “submit”, tal como lo implementó el compañero LuisDark123 .
En resumen:

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

Saludos.

Harold David Avila Sabogal

student•

Gracias

Carlos Sanguino

student•

Gracias

Emerson Cedeño

student•

y … las validaciones? … dónde está la validación del formulario? 😢

Jose L. Figueroa

student•

Muchas gracias, súper útil!!!

Jairo Lachira Peralta

student•

Para lograr que una objeto tenga validaciones simplemente le agregas la propiedad required .

<input type="text" class="form-control" placeholder="First name" required>

Emerson Cedeño

student•

solamente? … no es necesario agregar nada en el tag del form, ni agregar código js?

Harold David Avila Sabogal

student•

Muchas gracias por la información

Enrique Garcia Stave

student•

Apuntes: Bootstrap nos permite trabajar con formularios, puesto que tiene un modulo muy extenso para interactuar con formularios de multiples maneras. La clase “.form-group” nos permite darle cierto espaciado a los input. Con la clase “.form-control-lg” especificamos que es un input del formulario como tal, pero que lleva un tamaño grande. Con la clase “.form-text” especificamos que es un texto para el formulario y con “.text-muted” especificamos que va a tener una tonalidad gris. Con la clase “.btn-block” podemos hacer que el botón ocupe todo el ancho disponible.

Pablo Domínguez Durán

student•

No olviden agregar name="" para tener autocompletado:

<div class="form-row">
	<div class="form-group col-md-6">
		<input type="text" name="name" class="form-control" placeholder="Nombre">
	</div>
	<div class="form-group col-md-6">
		<input type="text" name="lastname" class="form-control" placeholder="Apellido">
	</div>
</div>

Kathion Vega

student•

offset-md- 2 , clase para mover la columna hacia la derecha. Esta clases aumentan el margen izquierdo de una columna por * columnas.

Valentin Francisco Blanco

student•

"""Al usar utilidades en lugar de clases específicas de botones, tenemos un control mucho mayor sobre el espaciado, la alineación y los comportamientos de respuesta.""" . Ahora en bootstrap5, los botones en forma de bloque ya no se hacen a partir de clases especificas del mismo, sino a partir de utilidades.

Código:

<div class="form-grid">
    <div class="col d-grid gap-2">
        <button type="button" class="btn btn-platzi">Enviar</button>
    </div>
</div>

Juan Camilo Castillo Camacho

student•

Excelente clase. Que buen proyecto. Gracias.

Luis Kennedy Saavedra Fuentes

student•

En bootstrap 5. Sustituimos la clase:

<div class="form-group">
</div>

Por la clase

<div class="form-label">
</div>

Para el margen de los input al ocupar 12 columnas

jonathan gonzalez

student•

Esta bien interesante Bootstrap, ahorra mucho tiempo

Gonzalo García

student•

Dos años desarrollando y recién me entero que si clickeas el label hace focus en el input :-|

Mijael Rodrigo Callejas Flores

student•

para bootstrap 5.0

              <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Nombre">
              </div>
              <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Apellido">
              </div>
            </form>```

Christian Alvarenga

student•

Creo que este curso esta MUY bueno pero, me gustaria que se pueda actualizar a Bootstrap 5. De igual manera, le estoy quitando el jugo. 😎

Héctor Leonel Rodríguez Díaz

student•

la facilidad de uso de bootstrap te ahorra millones de horas de vida.

<section id="conviertete-en-orador" class="pt-4 pb-4">
      <div class="container">
        <div class="row">
          <div class="col text-uppercase text-center">
            <small>Conviértete en un</small>
            <h2>Orador</h2>
          </div>
        </div>
        <div class"row">
          <div class="col text-center">
            Anótate como orador para darnos una charla ignite.
            Cuéntanos de qué quieres hablar!
          </div>
        </div>
        <div class="row">
          <div class="col col-md-8 offset-md-2 col-lg-8 offset-lg-2 pt-2">
            <form class="needs-validation" novalidate>
              <div class="form-row">
                <div class="form-group col-12 col-md-6">
                  <input type="text" class="form-control" placeholder="Nombre" required>
                  <div class="valid-feedback">
                    Correcto!!
                  </div>
                  <div class="invalid-feedback">
                    Por favor ingresa tu nombre.
                  </div>
                </div>
                <div class="form-group col-12 col-md-6">
                  <input type="text" class="form-control" placeholder="Apellido" required>
                  <div class="valid-feedback">
                    Correcto!!
                  </div>
                  <div class="invalid-feedback">
                    Por favor ingresa tu apellido.
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col">
                  <textarea class="form-control form-control-lg" placeholder="Sobre qué quieres hablar?" required></textarea>
                  <div class="valid-feedback">
                    Correcto!!
                  </div>
                  <div class="invalid-feedback">
                    Debes de escribir sobre qué quieres hablar.
                  </div>
                  <small class="form-text text-muted">
                    Recuerda incluir un título a tu charla.
                  </small>
                </div>
              </div>
              <div class="form-row">
                <div class="col">
                  <button type="submit" class="btn btn-platzi btn-block">Enviar</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

                      <form>
                          <div class="form row">
                              <div class="mb-3 form-group col-12 col-md-6">
                                  <input type="text" class="form-control" placeholder="Nombre">
                              </div>
                              <div class="mb-3 col-12 col-md-6">
                                  <input type="text" class="form-control" placeholder="Apellido">
                              </div>
                          </div>
                          <div class="form row">
                              <div class="mb-3 col">
                                  <textarea name="text" class="form-control form-control-lg" placeholder="Sobre que quieres hablar?"></textarea>
                                  <small class="form-text text-muted">
                                      Recuerda incluir un titulo para tu charla
                                  </small>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col">
                                  <button type="button" class="btn btn-platzi w-100">Enviar</button>
                              </div>
                          </div> 
                      </form>```

<section id="conviertete-en-orador " class="pt-2 pb-2">
	<div class="container">
		<div class="row">
			<div class="col text-center">
				<small class="text-uppercase"> Conviértete en un </small>
				<h3>ORADOR</h3>
			</div>
		</div>
		<div class="row">
			<div class="col text-center">
				Anótate como orador para dar una charla ignite. Cuéntanos de qué
				quieres hablar!
			</div>
		</div>
		<div class="row">
			<div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2 pt-3">
				<div class="row">
					<div class="form-label col-12 col-md-6">
						<input
							type="text"
							class="form-control"
							placeholder="Nombre"
							aria-label="Nombre"
						/>
					</div>
					<div class="form-label col-12 col-md-6">
						<input
							type="text"
							class="form-control"
							placeholder="Apellido"
							aria-label="Apellido"
						/>
					</div>
				</div>
				<div class="form-label">
					<div class="col">
						<textarea
							name="text"
							class="form-control form-control-lg"
							placeholder="Sobre qué quieres hablar?"
						></textarea>
						<small class="form-text text-muted">
							Recuerda incluir un titulo para tu charla
						</small>
					</div>
				</div>
				<div class="form-label">
					<div class="col">
						<button type="button" class="btn btn-platzi col-12">
							Enviar
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
 

<div class="form-row">
	<div class="form-group col-md-6">
		<input type="text" name="name" class="form-control" placeholder="Nombre">
	</div>
	<div class="form-group col-md-6">
		<input type="text" name="lastname" class="form-control" placeholder="Apellido">
	</div>
</div>

              <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Nombre">
              </div>
              <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Apellido">
              </div>
            </form>```

Los formularios de Bootstrap 4

Introducción al curso

Repositorio del curso de bootstrap

Bootstrap 4 ¿Qué trae de nuevo esta versión?

¿Que es un framework de frontend?

Nuestro Proyecto: Hola Mundo de Bootstrap

Creando el sitio web

La grilla de Bootstrap

Reto: La grilla de Bootstrap

El footer

El header de nuestro sitio

Creando un carousel de imágenes

Agregando texto informativo del evento

Agregando botones

Las cards de Bootstrap 4

Pastillas de texto

Agregando un contenedor de ancho completo

Los formularios de Bootstrap 4

Agregando un tooltip

Scrollspy: Conociendo la ubicación del usuario en el header

Agregando un modal para comprar tickets

Un nuevo formulario para completar la compra

Deploy a producción

Poniendo nuestro sitio en producción

Conclusiones del curso