Creación de formulario: inputs

Clase 31 de 41 • Curso de HTML y CSS 2019

Beatriz Pérez Santana

student•

Para que el elemento label se asocie con el input el atributo for debe coincidir con el atributo id del input no con el name

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/label#Atributos

<label for="name">Nombre</label>
<input type="text" id="name">

Alberto Alejandro Soto Herrera

student•

Tienes toda la razón , eso lo dijo el Prof Leonidas Esteban en el otro curso !!!

Luis Abdel Rangel Castro

student•

Exacto. Y es fácil comprobarlo. Al hacer click en el label, si esta bien definido, el curso se colocara en el input correspondiente.

José María Cuevas Ramírez

student•

Otra manera de solucionar el acomodo de los <label> es cambiándoles su display a block, así evitamos estar agregando <br>. Le añadí un poco de márgenes por gusto personal estético.

label {
    display: block;
    margin-top: 10px;
    font-size: 18px;
}

El resultado queda así:

Edylber Simancas

student•

Excelente aporte @josecueram! sin embargo, debemos tener en cuenta el rendimiento del codigo para que tenga el mayor performance posible. Siempre sera mas rapido cargar contenido html que buscar un archivo .css. Esto podria ser un tema de muchos debates e interesantisimo al mismo tiempo.

Christian Velázquez

student•

Muy buen aporte.

Beatriz Pérez Santana

student•

El elemento input puede ser de varios tipos.

Por ejemplo, hay un tipo email que hace una validación para saber si lo que se ha escrito tiene formato email.

<input type="email">

o tipo teléfono que también puede hacer validaciones y si estás en un dispositivo móvil se activa el teclado numérico del teléfono.

<input type="tel">

Lista de atributos que puede tener el elemento input: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Atributos

Kevin Parra Lopez

student•

SI te sale esta linea exterior al hjacerle FOCUS al INPUT

Si escribes "outline: none;" Lo eliminas!!!

Captura de pantalla de 2020-01-31 22-55-58.png

Cristian Córdova

student•

But eso no esta asociando correctamente los labels con sus respectivos inputs: El atributo ++for++ para asociarlo correctamente debería de llamarse igual que el ID de la etiqueta input. Cosa que no ha creado. El atributo ++name++ es para indicar el nombre del dato que se va a enviar en el formulario. Por lo que puede llamarse de forma igual o diferente al atributo.

Saludos!!

Daniel Cabrera Ramirez

student•

buena anotacion cristian, esto lo vi en una clase de texto de este mismo curso y si tienes razon el name hara referencia al nombre del dato para poder ser trabajado en el backend y lo correcto seria vincular el for con id

Emmanuel García

student•

Para ocultar el borde rosa al momento de darle click o pasar por el input se utiliza:

    outline: none;

Carlos Antonio Espin Constante

student•

Como reto me propuse maquetar el proyecto antes de ver el curso de cada tema. Y me lleno de satisfacción al ver el progreso que estoy teniendo con mis resultados.

César Andrés Aguilar Párraga

student•

⚡⚡⚡⚡⚡⚡NOTA IMPORTANTE⚡⚡⚡⚡⚡⚡ Si están haciendo un proyecto diferente y están utilizando imagenes de diferentes tamaños o más grandes que las que esta utilizando Rulótico. Les recomiendo estos estilos para su css:

.modulo_pago_images{
  max-width: 300px;
  margin: auto;
}

.modulo_pago_images img{
  width: 100%;
}

Le pueden poner el max-width dependiendo de su imagen. Esa medida fue la que yo utilice.

David Axel González Flores

student•

Gracias por el consejo, hasta ahora se me ha complicado un poco el acomodar las imagenes dentro de html

Alfonso Camp

student•

Este loco si explica bien ps, no como leonidas petes; con respeto mi comentario si { jeje }

Ivan Sangueza Alarcon

student•

Lo hize diferente pero salio casi lo mismo

Jaime David Burbano Montoya

student•

Les comparto este sitio web, donde les ayuda con la organizaciones de los diferentes elementos en su página web, usando flex:

https://the-echoplex.net/flexyboxes/?fixed-height=on&display=flex&flex-direction=row&flex-wrap=nowrap&justify-content=center&align-items=flex-start&align-content=stretch&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto

John Steven Bernal Gonzalez

student•

Interesante!! gracias por tu aporte.

Joel Bello

student•

Por qué no usar CSS? no me gusta usar <br>.

Daniel Flores

student•

Puedes usarlo, yo hago grids para cada formulario, o flexbox.

Nunca uso <br>, me parece espantoso para MÍ.

Daniel Flores

student•

.grid--login{
	.new-grid(
	"name"		1fr
	"password"	1fr
	,1fr);
}

Un ejemplo de lo que usaría

Kamerr Ezz

student•

siento mas facil esto que la de leonidas xD x2

César Andrés Aguilar Párraga

student•

No creo Leonidas explica super bien.⚡⚡⚡

Said Sainz Lara

student•

Yo no le entendí nada a Leonidas, deja muchas cosas sin responder y hace cosas sin explicar.

José González

student•

El label de email y teléfono esta pegado al input de arriba, como lo puedo separar?

Juan Castro

teacher•

¡Dales margin-top: loquequieras px;!

Alejandro Sanchez

student•

Sabes algo?? que ayuda muchísimo es usar las herramientas para desarrolladores que tiene tu navegador. Pulsa **F12 **o click derecho y veras un menú contextual allí. Vas a buscar inspeccionar. Y veras todos los elementos que tiene tu .html Ahora trata de buscar el modelo de caja que te muestra el border, margin, que componen tus elementos html. Puedes ir modificando los valores de margin hasta que tengas el que necesites. Busca la pestaña style y luego element.style para que puedas probar y ver como va quedando tu trabajo.

(

)

te dejo una imagen para que veas de lo que te hablo

Marcelo Javier Pedernera

student•

Yo resolví el tema de los labels del minuto 07:27 de esta manera

label { font-size:Var(--normal); font-family: serif; padding-top: 6px; }

Marco Vinicio González Jiménez

student•

Wilson Delgado

student•

en visual studio code para seleccionar varios partes es com: Alt (mantenido)+ (click izquierdo)

Fernando Cordero

student•

Si quieren centrar su formulario utilicen display flex para el container y agregenle justify-content: space-around;

Alejo Fonseca

student•

Buena clase

Jose Orlando Parra Soto

student•

Excelente.

Creación de formulario: inputs

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework