Los formularios de Bootstrap 4

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

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

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>```

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>
				<h2>ORADOR</h2>
			</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>
 

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

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.

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>

"""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>

Excelente clase. Que buen proyecto. Gracias.

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

Esta bien interesante Bootstrap, ahorra mucho tiempo

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

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>```

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. 😎

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

Realmente hace falta actualizar este curso. El profe es genial, pero hay varios elementos como form-group y demás que ya no se usan

¿Que tal chicos?

CODIGO

<div class="row">
                    <div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2 pb-2">
                        <form>
                            <div class="form-row">
                                <div class="form-group col-12 col-md-6">
                                        <h6 class="text-center">Nombre</h6>
                                    <input type="text" class="form-control" placeholder="Juan Sevilla" required>
                                </div>
                                <div class="form-group col-12 col-md-6">
                                    <h6 class="text-center">Correo Electronico</h6>
                                    <input type="email" class="form-control" placeholder="[email protected]" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col">
                                    <h6 class="text-center">¿Sobre que te gustaria hablar?</h6>
                                    <textarea name="text" class="form-control form-control-lg" placeholder="Mis experiencias en el ambiente del desarrollo de las empresas..." required></textarea>
                                    <small class="form-text text-muted">Recuerda incluir un titulo para 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>```

Tener en cuenta que las clases usadas en los formularios
Las filas

<div class="form-row">

Las columnas

<div class="form-group col">

Los controles

<input type="text" class="form-control">
<textarea name="text" class="form-control">

Listo mi formulario !

Resultado de mi formulario adpatado al tema que estoy desarrollando

Me está encantando esta herramienta!

Como podria hacer un formulario flotador
?

Que buena clase, me encanta Bootstrap!

Bootstrap 5, la nueva version ha cambiado algunas cosas como btn-block por btn-primary, les recomiendo mucho leer bien la documentación.

excelente clase!!!

1. El btn-block ya no sirve, en cambio se ocupa: w-100.

Lo que me está dejando este valioso curso, es que si no tienes ni la menor idea de cómo comenzar a diagramar una página web desde cero (me pasaba), lo mejor que puedes hacer es crear tu plantilla a partir de Bootstrap como punto de partida, a partir de ahí es increíble cómo puedes moldear todo a tu gusto con paletas de colores y fuentes de tu preferencia.

Creo que esta es la clase que mas difiere con respecto a la versión de bootstrap, por lo que guiándome por la documentación y los comentarios, mi código de hoy queda de la siguiente manera:

<!-- Conviértete en speaker -->
<section id="conviertete-en-orador" class="pt-3 pb-3">
  <div class="container">
    <div class="row">
      <div class="col text-uppercase text-center">
        <small>Conviertete en un</small>
        <h2>ORADOR</h2>
      </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-2">
        <form>
          <div class="row">
            <div class="form-label col-12 col-md-6">
              <input type="text" class="form-control" placeholder="Nombre" aria-label="First name">
            </div>
            <div class="form-label col-12 col-md-6">
              <input type="text" class="form-control" placeholder="Apellido" aria-label="Last name">
            </div>
          </div>
          <div class="row">
            <div class="col form-label">
              <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">
              <div class="d-grid col-10 col-md-8 col-lg-6 mx-auto">
                <button class="btn btn-platzi">Enviar</button>
              </div>
              
            </div>
          </div>
        </form>
      </div>
    </div>
    
  </div>
</section>
<!-- /Conviértete en speaker -->

Esta es de las clases que mas me ha servido, justo necesitaba hacer un formulario de contacto.

Interesante clase

Esta muy padre este framework, pero debes conocer las clases para sacarle el máximo provecho.

NUNCA TE CASES UN FRAMEWORK 😄

Aquí se me complico algo, no me fue tan sencillo, hay que actualizar el curso con bootstrapp 5 para no perder un poco el tiempo e ir a la par con el profesor ya que terminas viendo el video de 5 minutos en 10.

Modo Desktop

Modo Móvil

Saludos! La clase para el botón “btn-block” no funciona con Bootstrap 5, para corregirlo añadan al div contenedor la clase “d-grid”.

Muy buena clase.

Bootstrap es brutal.

Genial, Bosstrap es una excelente herramienta

esos formularios me han servido tantoooo facilitan mucho las cosas !

Cuando puse btn-block no funciono y le agregue al div la clase d-grd para ocupar todo el espacio del contenedor:

<div class="row">
  <div class="col d-grid">
    <button type="submit" class="btn btn-coke">Enviar</button>
  </div>
</div>

Solo faltaría validarlo con algún lenguaje de servidor par finalizar el formulario

¡ Que buena clase !

los formularios son muy bonitos

me encanta como funciona todo con bootstrap

Muy buena clase y buenas herramientas de Bootstrap para formularios. Me sirvió un montón.

Es increible lo rápido que se puede construir cualquier sitio utilizando Bootstrap

Todo lo que se puede hacer con bootstrap quien diría que diseñé mi pagina con menos css y aun así con el ligthhouse, me sale un buen resultado.

<div class=“col”>
<button type=“button” class=“btn-platzi btn-block”>Enviar</button>
</div>

Si lo coloco así puedo ver el botón en verde

Para no estar batallando con el offset y que el contenido se quede centrado opté porque todo el contenido se centre.

Explicacion Adecuada.!!!

Genial!! Me está encantando el curso

Impecable !!!

una utilidad del form es cuando uno trata de elegir un determinado pais y ese form me despliega todos los paises del mundo, el llenado de los paises se hace de manera manual o hay una especie de truco?

De verdad que estoy aprendiendo muchisimo con este curso. Hay cosas de css que debo reforzar. Pero ya no me siento tan perdido como antes

Hola Sacha!..exclente explicación:

Me gustaria saber que links recomiendas (aparte de Boodstrap), para hacer mas ejercicios de validaciones de formularios, y tambien poder visualizar diseños de formularios.

Soy desarrollador back-end me gustaria profundisar más este tema.

Gracias anticipadas!
Felicidades buen material

From group lo puedes usar en combinación de col’s…

Como se le hace para indentar varias lineas a la vez en atom? 😮

EXCELENTE REPASANDO TEMRINOS 😄

Este curso es adictivo!! No puedo para de verlo

Me quiero casar con Bootstrap 😄

Para que el botón tome todo el ancho de la columna usar la clase .d-grid al padre del botón

Lo que no me gusta es el uso de tantos div. Me pierdo un poco entre ellos. Claro que se pueden usar las etiquetas correspondientes

Bootstrap es la ley!!!

Son muy prácticos estos formularios…

****

Para que sirve el el offset-md-2?

Consulta si tengo lo siguente

<div class="form row">
<button type="button" class="btn btn-platzi">Enviar</button>
</div>

Por qué? el botón se convierte en un btn-block, no entiendo alguien pudiera ayudarme, please!

En Bootstrap5 no pude hacer que el placeholder en el textarea se viera, asi que meti un label antes de la etiqueta de text area.
Tambien en el boton para que tomara todo el ancho de la columna lo hacen de la siguiente manera:
colocando la clase d-grid (display grid) en el padre

<div class="col d-grid">
  <button type="button" class="btn btn-platzi">Send</button>
</div>

Lo del btn-block También se puede reemplazar poniéndole un col-12 en la clase

f

Excelente tan sencillo con Bootstrap!!!

excelente forma de crear forms, muy rapida y buen UI