Etiqueta form e input

Creó que también es importante mencionar que se puede colocar el atributo “Required”, que hace obligatorios los campos en html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formularios</title>
</head>
<body>
  <form action="">
    <label for="nombre">
      <span>Cual es tu nombre?</span>
      <input type="text" id="nombre" placeholder="Tu nombre" required>
    </label>
    <label for="inicio-platzi">
      <span>Que dia comenzaste en Platzi?</span>
      <input type="date" id="inicio-platzi" >
    </label>
    <label for="horario">
      <span>En que horario estudias?</span>
      <input type="time" id="horario" >
    </label>
  </form>
</body>
</html>```

Joel Dominguez Merino

Ya llego! Ya llego su resumen de cada clase 😛
Esta clase fue muy valiosa ya que muchas veces habia visto videos de Formularios, pero jamas tan bien explicados como lo hizo Diego^^

Comenzemos.
Es importante utilizar la etiqueta <form></form> para indicar que utilizaremos un formulario, ademas de la semantica y buenas practicas.
Dentro de estas etiquetas indicaremos los elementos del Formulario como lo son…
<label></label> que sera como nuestro “Contenedor” en esta ocasión. dentro de el pondremos la etiqueta <span></span> (No es necesario) para colocar un texto haciendo alusión al contenido esperado (nombre, contraseña, fecha etc…) y viene una de las etiquetas importantes la cual es <input> aqui es importante aclarar que hay muchos tipos de Input, los que veran en este ejemplo son text, password, date, time pero hay muchos mas…
Tambien esta el atributo placeholder para colocar un texto como guia dentro de la caja (Input) y este al hacer click sobre el se eliminara.
y Creo que es lo mas rescatable!
Recuerden aun nos queda mucho por aprender 😄

Codigo:

Resultado:

RetaxMaster

Ok, aquí si creo que hay algo que no está bien, el estandar y lo más común de ver es que las etiquetas label e input estén separadas, no que esté una dentro de otra.

Funciona y es válido poner el input dentro, pero para ese caso no se debe usar el atributo for para al label porque es redundante, el hecho de poner el input dentro es para que cuando le hagas click al label a este se le haga focus automáticamente.

Probablemente lo que más se vayan a encontrar es esta forma:

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

Y es válida y no tiene problemas semánticos, porque precisamente para eso funciona el for, de hecho, incluso diría que es mejor, porque al poner el input dentro del label lo que sucede es que cuando le das click al input, también le estás dando click al label

Andy Antonio Paz Cambara

estos son algunos inputs mas que podemos usar al momento de crear formularios

input type=hidden
input type=text
input type=search
input type=tel
input type=url
input type=email
input type=password
input type=date
input type=month
input type=week
input type=time
input type=datetime-local
input type=number
input type=range
input type=color
input type=checkbox
input type=radio
input type=file
input type=submit
input type=image
input type=reset
input type=button

Juan Esteban Ramirez Avila

Hola a todos!, la importancia de los formularios y su diseño amigable es la clave para que los usuarios digiten los datos solicitados, comparto un formulario de una web dinámica que realice para un cliente!

Captura de Pantalla 2020-09-04 a la(s) 11.37.09 a. m..png

Kevin Jefferson Lopez De la O

Les recomiendo reforzar este curso, con el curso de Resposive Web Design Certification de freeCodeCamp(es gratuito). Hay ejercicios para practicar y el contenido va casi a la par con el contenido de este curso.

Abril Rios

Resumen

- <Form>; Es una etiqueta fundamentalmente para tener una mejor semántica.

**- <Label>; Etiqueta que representa la interfaz del usuario.

for=" "; Permite asociar un control, en el se le dará un nombre personalizado
<Input>; Elemento donde el usuario da sus datos para el formulario.
type=“text”; Se aclara que los datos serán tipos textos (por ejemplo, nombre y apellido).
type=“date”; Da una apariencia diferente al input más un calendario donde el usuario podrá poner una fecha mediante los números o facilitándose llenarlo con ayuda del calendario.
type=“time”; También da una apariencia diferente pero para un horario.
id=" "; Se le da un nombre (por así decirlo) al elemento para poder asociarlo junto al mismo nombre que el label en el que se le da al atributo de valor de for.
<span>; Es para aplicar estilo al texto o agrupación de elementos. Lo que haría en si es que se colocará arriba o abajo (dependiendo donde lo pongas en el editor de código) donde obtendrá un texto.

Derek Samuel Paúl Peña

Si quieren dar estilos a sus inputs les dejo aquí estilizados los inputs que vimos:

por si desean ver un resultado previo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FORMS</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .email_container {
      margin: 15px;
      display: flex;
      padding: 15px;
      justify-content: space-between;
      align-items: center;
      border-radius: 25px;
      background-color: #fff8dc;
      border: 2px solid #f8cf2c;
      color: #1575c2;
      font-weight: bold;
      font-size: 14px;
    }
    input {
      padding: 2px;
    }
    input[type="email"], input[type="password"] {
      box-sizing: border-box;
      border: none;
      -webkit-box-shadow: 0 0 0px 1000px cornsilk inset;
      outline: none;
      color:#986f00;
    }
    input[type="submit"] {
      outline: none;
      box-sizing: border-box;
      /* margin: 15px; */
      /* display: flex; */
      padding: 15px;
      /* justify-content: space-between; */
      /* align-items: center; */
      border-radius: 25px;
      background-color: rgb(255, 216, 89);
      border: none;
      width: 100%;
      color: #00519e;
      font-weight: bold;
    }
    input[type="file"] {
      outline: none;
      cursor: pointer;
    }
    input[type="file"]::before {
      font-weight: bold;
      font-size: 14px;
      content: 'Elije tu foto:';
      background: linear-gradient(top, #f9f9f9, #e3e3e3);
      -webkit-user-select: none;
    }
    input[type="file"]::-webkit-file-upload-button {
      visibility: hidden;
    }
    input[type="date"] {
      border: none;
      background: none;
      color: #a8733d;
      outline: none;
      margin-left: 6px;
    }
    input[type="time"] {
      background: none;
      color: #a8733d;
      border: none;
      font-size: 18px;
      font-weight: bold;
      outline: none;
    }
  </style>
</head>
<body>
  <form action="">
    <label for="email" class="email_container">
      <span class="title">G-mail:</span>
      <input type="email" id="email" placeholder="[email protected]">
      <span>📧</span>
    </label>
    <label for="password" class="email_container">
      <span class="title">Password:</span>
      <input type="password" id="password" placeholder="****************">
      <span>🔑</span>
    </label>
    <label for="file" class="email_container">
      <input type="file" id="file">
      <span>📁</span>
    </label>
    <label for="date" class="email_container">
      <span class="title">Fecha de nacimiento:</span>
      <input type="date" id="date">
    </label>
    <label for="date" class="email_container">
      <span class="title">Horas en las que transitas:</span>
      <input type="time" id="date">
    </label>
    <input type="submit" value="Regístrate">
  </form>
  <!-- FORMAS DE HACERLO INCORRECTAS <div>
    <input type="text">
    <input type="file">
    <input type="number">
    <input type="email">
    <input type="date">
  </div> -->
</body>
</html>

Carlos Alberto Basilio Torres

Acostumbrense de una vez a escribir en el input el atributo nombre, es decir:

<label for="nombre">
	<span>¿Cúal es tu nombre?</span>
	<input type="text" id="nombre" name="nombre">
</label>

Me lo agradecerán cuando pasen a backend.

Esta etiqueta es un identificador que le permite al lenguaje de backend identificar como llega la información, es decir:

nombre -> Carlos
apellidos -> Basilio Torres
edad -> 25

espero les ayude este pequeño aporte.

Gianfranco Iván Misari Ortega

Gabriela Carolina Navarro Quintero

Los inputs siempre deben ir dentro de labels y estos a su vez de form para que tenga relevancia semántica.

<form action="">
    <label for="">
        <input type="text">
    </label>
</form>

input

Texto

<label for="nombre">
    <span>¿Cuál es tu nombre?</span>
    <input type="text" id="nombre">
</label>

Fecha

<label for="inicio-platzi">
    <span>¿Qué día comenzaste en platzi?</span>
    <input type="date" id="inicio-platzi">
</label>

Hora

<label for="horario">
    <span>¿En qué horario estudias?</span>
    <input type="time" id="horario">
</label>

Luis Aaron Lopez Ramirez

DANIEL SUAREZ

Que buena frase “El mejor formulario es el que no existe” 😛

José Juan Pineda

Entiendo el tema de la semántica, pero tengo varias dudas:

¿Por qué debe de ir un input dentro de un label?
¿Por qué los atributos for y id deben de tener el mismo valor en el input y en label?
¿Para qué sirve el atributo for?

Saludos y gracias! 😄

Nestor Quiroga Suárez 🧑🏼‍🚀

Realice varias pruebas a las opciones de type que se encontraban en la documentación subida por la comunidad. Les comparto mi formulario.
.

Geraldine Claros

Les super recomiendo esta pagina donde ueden probar rapido cualqueir cosa que quieran hacer en HTML, CSS o JavaScript
https://jsfiddle.net/

Carlos Abel Tarazona Aranda

😄

Héctor Alonso Padilla Ramírez

Elementos de un formulario
form - Defines an interactive form with controls.
label - Defines a label for a form control.
input - Defines an interactive control within a web form.
span - Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.

Luis Alberto Ducuara Blandón

Hola gente.

Comentarles que cuando se va a probar unas etiquetas en Safari estás no van a funcionar, saldrán solo como un input normal. Esto se debe a que no hay un selector de fecha nativo para Safari.
https://caniuse.com/#feat=input-datetime

Solución:

Probar en otro navegador como Chrome.
Poner un ‘placeholder’ en el input.
<input type=“date” id=“inicio-platzi” placeholder=“yyyy-mm-dd”>.

Espero que os sirva de utilidad.

Edward Cabrera

279224373_1205471533190327_7967414767178813944_n (1).jpg

José M. Veintimilla

Resumen

Los formularios son la parte en que empezamos a interactuar con los usuarios. Generar un formulario es una responsabilidad muy grande ya que si tiene una mala experiencia el usuario no lo hará.

“El mejor formulario es el que no existe”.

form es una etiqueta semántica que le dice al usuario que el contenido a continuación es un formulario.
input es la casilla para ingresar datos. Contiene los atributos:
name: nombra la casilla.
id: nombre único relacionado con el label.
placeholder: texto de apoyo para el usuario.

Pachas Jenifer

Esta en code pen, para que se vea mejor 😃

Aqui esta mi formulario con otros tipos de input para conocer algunos nuevos

aqui esta el codigo por si alguien lo quiere

no se si esta bien hecho en realidad porque estoy usando el css con lo poco que se y muchas cosas no puedo hacer por no saber 😦

Julio Carlos

Concuerdo con la parte inicial, la gran mayoría de programadores dice que el tema de formularios es muy tedioso, y lo es. Todo por que los profesores no saben explicar de forma que sea fácil de entender con esta clase me quedo claro que no es un tema difícil, si no por el contrario algo fácil y necesario de aprender.

Joaquín Escalona Mella

Mis apuntes!! Que les sea de mucha utilidad amigos y ánimo!

Formularios

Los formularios son esenciales en sitios webs. Capturan información del usuario. Sin embargo, al usuario no le gusta que existan formularios. ¿Cómo podemos crear uno con una buena experiencia? Aquí unos tips

Malas prácticas

Utilizar <div> para crear el formulario.
Muchas casillas de información

Buenas prácticas

Utiliza la etiqueta <form>
Utiliza la etiqueta <label> y dentro de ella, etiquetas <input>. Hay muchos tipos de inputs:
- texto (text)
- fechas (date)
- hora (time)
Recuerda que el id del input debe ser el mismo que el “for” del label (atributos)
Si quieres que aparezca un texto que indique qué colocar en la casilla utiliza la etiqueta <span>
Si quieres que el texto aparezca dentro de la casilla, como una pequeña ayudita, utiliza el atributo <placeholder> como un atributo más del input.

Sebastian Hernandez Matiz

Una forma mas facil -creo yo- de hacerlo, sin necesidad de el span.

<form action="">

  <label for="nombre">¿Cual es tu nombre?</label>
  <input type="text" id="nombre">

  <label for="inicio-platzi">¿Que dia comenzaste en platzi?</label>
  <input type="text" id="inicio-platzi">

  <label for="horario">¿En que horario estudias?</label>
  <input type="time" id="horario">

</form>

Gabriel Rafael Cova Valera

Deberían permitir reproducir las clases en calidad más baja que 720p hd para las personas que nos encontramos en sitios con mala calidad de internet como algunas personas de Venezuela.😅

Jhean Pacheco

Siempre he trabajado la etiqueta label como elemento independiente mas no como contenedor, pero según WHATWG se debería manejar como contenedor
HTML Standard

Fabian Flores

Notas de la clase

ERIC DIEGO PÉREZ JARQUÍN

Bro!, bro! o Sis! te comparto el resumen de la clase
nota: descripción de cada lineal

El resultado en es este 😉 :

también les dejo algunos inputs :
<input type=“button”>
<input type=“checkbox”>
<input type=“color”>
<input type=“date”>
<input type=“datetime-local”>
<input type=“email”>
<input type=“file”>
<input type=“hidden”>
<input type=“image”>
<input type=“month”>
<input type=“number”>
<input type=“password”>
<input type=“radio”>
<input type=“range”>
<input type=“reset”>
<input type=“search”>
<input type=“submit”>
<input type=“tel”>
<input type=“text”>
<input type=“time”>
<input type=“url”>
<input type=“week”>
Espero les ayude, suerte 😃

Carlos Gonzalez Ovelar

Una snippet para copiar una linea entera en VS Code es: Shift + Alt y la flecha de abajo.

Sara Salgado Casas

Dejo mis apuntes por aquí:
Si quieren el link a Notion para extraer las notas como plantilla, lo pueden conseguir aquí

Roberto Pablo Almanza Cabrera

Recuerda que el label es un contenedor de input

Orlando Jose Altamiranda Piñango

Evolución de la web.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista del Super</title>
    <meta name="description" content="No olvides lo que debes comprar en el super" />
    <meta name="robots" content="index, follow" />
</head>
<body>
    <header>

    </header>
    <main>
        <section>
            <h1>¡Soy la lista del super!</h1>
            <h2>Listado de productos a comprar:</h2>
            <ul>
                <li>Frutas:</li>
                <ol>
                    <li><a href="https://www.pequerecetas.com/receta/manzana-18-recetas/">Manzana</a></li>
                    <figure>                    
                        <img src="./images/manzanas.png" alt="Deliciosas manzanas" width="100">
                        <figcaption>Manzana roja o verde</figcaption>                    
                    </figure>                
                    <li><a href="https://www.directoalpaladar.com/recetario/aprovechar-platanos-maduros-recetas-bizcochos-tartas-helados">Platano</a></li>
                    <figure>
                        <img src="./images/platanos.png" alt="Deliciosos Platanos" width="100">
                        <figcaption>Platanos dulces</figcaption> 
                    </figure>
                        
                </ol>
                <li>Carnes:</li>
                <ol>
                    <li><a href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Pollo</a></li>
                    <figure>
                        <img src="./images/pollo.png" alt="Delicioso Pollo" width="100">
                        <figcaption>Carne de pollo</figcaption>
                    </figure>
                    <li><a href="https://www.cocinafacil.com.mx/recetas/recetas-de-carne-molida/">Carne Molida</a></li>
                    <figure>
                        <img src="./images/carne-molida.png" alt="Deliciosa carne molida" width="100">
                        <figcaption>Carne de res</figcaption>
                    </figure>
                </ol>
                <li>Verduras:</li>
                <ol>
                    <li><a href="https://www.directoalpaladar.com/directo-al-paladar/11-recetas-limon-irresistibles-todos-tiempos">Limón</a></li>
                    <figure>
                        <img src="./images/limon.png" alt="Delicioso limon" width="100">
                        <figcaption>Limon</figcaption>
                    </figure>
                    <li><a href="https://www.directoalpaladar.com/ingredientes-y-alimentos/nuestras-mejores-47-recetas-zanahoria">Zanahoria</a></li>
                    <figure>
                        <img src="./images/zanahoria.png" alt="Deliciosa zanahoria" width="100">
                        <figcaption>Zanahoria</figcaption>
                    </figure>                
                </ol>
            </ul>
    </section>
    <section>
        <h2>Video explicativo de Compras:</h2>
        <figure>
            <video src="images/1- Presentación del curso.mp4" controls preload="auto" width="400" height="225"></video>
            <figcaption>Video en detalle como hacer compras</figcaption>
        </figure>
    </section>
    <section>
        <figure>
            <h2>Formulario Responsable de Compra:</h2>
            <form action="">
                <label for="nombre-resposable">
                    <span>¿Cuál es el nombre del responsable?</span>
                    <input type="text" id="nombre-responsable" placeholder="Introduce tu nombre">                    
                </label>
                <label for="dia-compra">
                    <span>Fecha que se hará la compra</span>
                    <input type="date" id="dia-compra">                    
                </label>
                <label for="hora-compra">
                    <span>Hora en que se hará la compra</span>
                    <input type="time" id="hora-compra">                    
                </label>
            </form>
        </figure>
    </section>
    </main>
    <footer>
        <p>Creado con amor por Orlando Altamiranda con ayuda del Team Platzi</p>
    </footer>
</body>
</html>

Leider Stiven Castillo Garcia

Como presentar de manera ordenada y buenas prácticas con los formularios
https://medium.com/@juancaferraris/diseñando-formularios-más-efectivos-estructura-inputs-labels-y-acciones-81ac011ea05f

Maritza Pacheco Cuno

Una página que los recomiendo:
https://htmlreference.io/

Dario Paladines

Me esta gustando mucho el curso, ya que el profe te va llevando paso a paso por cada una de las etiquetas explicando su estructura, funcionalidad, etc, y cada concepto que se necesita saber 😃

Rodrigo Antonio Sánchez Cardona

El Elemento HTML <label> representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label
El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario. Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario (user agent).

jhafet-pianchachi

No me sale la parte del date, me sale como si fuera texto, este es mi código 😒

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularios</title>
</head>
<body>
    <!--Se usa form para crear un formulario-->
    <!--En Action va la referncia a donde se dirigiria la información de los usuarios-->
    <form action="">
        <label for="nombre">
            <span>¿Cual es tu nombre?</span>
            <input type="text" id="nombre"/>
        </label>
        <label for="productos">
            <span>¿Qué produtos te gustaría encontrar en nuestra tienda?</span>
            <input type="text" id="productos"/>
        </label>
        <label for="horario">
            <span>¿Que día compraste en awayo?</span>
            <input type="date" id="horario"/>
        </label>
    </form>
</body>
</html>```

Fausto Emilio Salgado Morales

Un análisis a un formulario simple 😃 Fuente: https://www.gatesnotes.com/Contact-Bill-Gates

"El mejor formulario es aquel que no existe"

Eduardo García

hace 4 meses

que buena clase

Julieth Andrea Quintero Meneses

La estructura básica de un formulario se compone de 4 elementos
form -> Es la etiqueta que engloba nuestro formulario
label -> Sirve para escribir el nombre del campo a rellenar debe tener el atributo for al cual se le indica un id que lo que hará será emparejar el label son su input correspondiente
input -> Sirve para crear un campo que permitirá al usuario interactuar. El único atributo obligatorio del input es name
**button **-> Crea un botón que permitirá enviar el formulario

la etiqueta form tiene un action como atributo ahi en el action es donde ponemos donde va a dirigirse la información del formulario

IMPUT TYPE:
button -> Se comporta igual que un botón <button>
color-> Se utiliza para especificar un color
date -> Se utiliza para utilizar una fecha
datetime -> obsoleto
datetime-local -> Fecha y hora, no funciona en firefox
email-> Se utiliza para introducir un email
hidden -> Campo oculto, puede contener valor pero no se mostrará
month -> Se utiliza para introducir un mes
number -> Se utiliza para valores numéricos
password -> Se utiliza para contraseña
range -> Se utiliza para establecer un rango
reset -> Se utiliza para resetear el formulario
search -> Se utiliza para las barras de búsqueda
submit -> Se utiliza para enviar el formulario
tel -> Se utiliza para introducir números telefónicos
text -> Valor por defecto
**time **-> Se utiliza para introducir una hora
TIP
*Se recomienda usar datetime-local y time para seleccionar fecha y hora

**url **-> Se utiliza para introducir URLs
week -> Se utiliza para introducir el número de semana del año

radio -> Permite seleccionar una única opción de una lista de opciones relacionadas.

checkbox -> Permite selccionar varias opciones de una lista de opciones relacionadas.

select -> Crea una lista de opciones donde podemos seleccionar una o varias opciones.

Cada opción irá dentro de una etiqueta <option> </option>
si tenemos muchas opciones podemos ordenarlas por categorías a través de la etiqueta <optgroup> con el atributo label para nombrar la categoría.

fieldset-> Se utiliza para agrupar elementos dentro de un formulario
legend -> Representa una etiqueta para el contenido del fieldset
file -> Este input se utiliza para cargar archivos y enviarlos desde un formulario
meter -> Representa un valor dentro de un rango conocido(no es muy común usarla)
progress -> Representa el progreso de una tarea
** textarea** -> Se utiliza para introducir texto en un formulario

Atributos para formularios
placeholder -> Da una pista de lo que el usuario tiene que introducir
required -> Hace que un campo sea obligatorio
**readonly **-> Hace que un campo sea de solo lectura
min - max -> Establece un mínimo y máximo de un campo numérico
maxlenght - minlenght -> Establece el mínimo y máximo de caracteres de un campo de texto
selected -> Equivale a checked en los select, sirve para establecer una opción por defecto
disabled -> Desactiva el campo, no se podrá escribir en el autofocus
autofocus -> Para poner el foco por defecto al cargar el formulario

Obed Tzay

El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario. El elemento <input> es uno de los más potentes y complejos en todo HTML debido a la gran cantidad de combinaciones de tipos y atributos de entrada.
Lista de valores para el atributo type: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input

Brayan Cruz

Dejo un breve resumen de lo que vimos hoy un poco mas profundizado: https://developer.mozilla.org/es/docs/Web/HTML/Element/input

Jhoann Camilo Meza Valencia

Comparto diferentes tipos de input para practicar y conocerlos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fprmularios</title>
<style>
   
</style>
</head>
<body>
    <section>
        <nav>
        <p>Datos personales</p>
    <form action="">
        <label for="Nombre">First name</label>
        <input type="text" id="Nombre" name="Nombre" placeholder="nombre">
        <br> <br>
        <label for="apellido">Last name</label>
        <input type="text" id="apellido" name="apellido" placeholder="apellido">
        <br> <br>
        <label for="Fecha">Fecha</label>
        <input type="date" id="Fecha" name="Fecha" >
         <br><br>
        <label for="Horario">Horario</label>
        <input type="time" id="Horario" name="Horario" >
        <br><br>
        <label for="Email">Ingresa tu E-mail </label>
        <input type="email" name="Email" id="Email" value="Ej:[email protected]">
        <br><br>
        <input type="submit" value="submit">
        <input type="reset">
            </nav>
        </section>
    </form>
</section>
<section>
    <nav>
    <p>¿Cual es tu lenguaje favorito ?</p>
    <form action="">
        <input type="radio" id="HTML" name="lenguaje" >
        <label for="HTML">HTML</label>
        <br><br>
        <input type="radio" id="CSS" name="lenguaje">
        <label for="CSS">CSS</label>
        <br><br>
        <input type="radio" id="JS" name="lenguaje"> <!-- por name el valor de radio permite seleccionar solo una opcion es decir de las 3 opciones solo me toma una -->
        <label for="JS">JavaScript</label>
    </form>
    </nav>
</section>
<section>
    <nav>
    <p>Selecciona donde estudiaste :</p>
    <form action="">
        <input type="checkbox" name="Escuela" id="Escuela">
        <label for="Escuela">Escuela</label><br><br><!--  -->
        <input type="checkbox" id="Universidad" name="Universidad">
        <label for="Universidad">Universidad</label><br><br>
        <input type="checkbox" id="Platzi" name="Platzi">
        <label for="Platzi">Platzi</label> <br> <br>
        <input type="button" onclick="alert('Hello world')" id="Click" value="Enviar !">

    </form>
</nav>
</section>
<br><br>
<section>
    <nav>
    <input type="color" id="colorFav" name="colorFav">
    <label for="colorFav">Selecciona tu color favorito</label>
    <br><br>
    <input type="image" src="data:image/jpeg;base64,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" alt="volver" id="flecha" width="45" height="45">
    <br>
<!-- la imagen se puede usar como un botton que redirecciona a alguna url o seccion  -->
    <label for="archivo">Seleccione un documento :</label>
    <input type="file" name="archivo" id="archivo">
     <br><br>

    <label for="numero">Cantidad de productos</label>     
    <input type="number" name="numero" id="numero" min="1" max="8">
    <br><br>
    <label for="vol"> Volumen</label>
    <input type="range" name="vol" id="vol" min="10" max="100" step="10" value="50">
    <br><br>
    <label for="busqueda">Buscar producto</label>
    <input type="search" name="busqueda" id="busqueda">
    <br><br>
    <label for="telefono">Ingresa tu numero de contacto</label>
    <input type="tel" name="telefono" id="telefono" placeholder="311-309-447" part="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</nav>
</section>
</body>
</html>

Andres Salazar

mi código de clase: (con parte de la explicación comentariada)

<form>
	<!--
La etiqueta form lleva un atributo llamado action que es la url donde se enviarán los datos del formulario. Ej: action="./destino.php"
-->
	<label for="nombre">
		<span>¿Cuál es tu nombre?</span>
	</label>
	<!--
La etiqueta label sirve para colocar un texto descriptivo de un input. Al dar click activa la casilla del input que tenga un valor de id igual al valor en el atributo "for"-->
	<input type="text" id="nombre" placeholder="Tu nombre" required />
	<!--
Existen varios tipos (type) de input para obtener información, en el caso de text, sirve para colocar texto.
placeholder: Es un texto que sirve para guiar el tipo de dato que se espera en ese espacio
required: indica que al enviar ese formulario debe existir información en esa casilla
-->
	<label for="inicio-platzi">
		<span>¿Qué día comenzaste en Platzi?</span>
	</label>
	<input type="date" id="inicio-platzi" />
	<!--
El tipo "date" sirve para mostrar un calendario y elegir una fecha o los espacios para escribir una
-->
	<label for="horario">
		<span>¿En qué horario estudias?</span>
	</label>
	<input type="time" id="horario" required />
	<!--
El tipo "time" sirve para mostrar un listado de horas y minutos 
-->
</form>

angelqui

Samuel Miranda Martínez

🤯 Toda la vida dejando el input por fuera del label.

elias camargo gonzalez

Excelente clase. ⭐⭐⭐⭐⭐

Piero Andre Marcos Garces

Es increíble lo que le puedes uno gustar un curso, con un profesor tan bueno.

Juan camilo piedrahita londoño

Un buen desarrollador hace buenas practicas

Jesus Velasco

También se puede hacer asi!!!

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

user_deleted_1572741

📑 <form> permite representar un formulario, donde podremos agregar diferentes campos.

Carlos Arturo Cruz Gutierrez

Me gusta aprender con buenas practicas

Julio Cesar Godinez

Carlos Angeles

Tambien podemos ocupar la etiqueta <fieldsset> para separar por bloque nuestro formulario y con la etiqueta <legende> le podemos poner un titulo.

    <main>
        <form>
            <fieldset>
                <legend>Información personal</legend>
                <label for="nombre">¿Cual es tu nombre?</label>
                <input type="text" id="nombre" placeholder="Primer nombre">
                <label for="dia-inicio">¿Que dia comenzaste en Platzi?</label>
                <input type="date" id="dia-inicio">
                <label for="hora-estudio">¿A que hora acostumbras estudiar?</label>
                <input type="time" id="hora-estudio">
            </fieldset>
        </form>
    </main>

Juan David Santamaria Gomez

encapsular el formulario con la plantilla form, evitar el uso de la etiqueta div

Johan Rodriguez

La etiqueta span es un contenedor génerico que no tiene ningún valor semántico. Se puede usar, por ejemplo para dar estilos

Nelson José Moncada Andrade

Cuando se anida la etiqueta input dentro de la etiqueta label NO ES NECEARIO colocar el atributo id en la etiqueta input ni el atributo for en la etiqueta label.

LA ASOCIACION ES IMPLICITA

Ejemplo

<label>
  Te gustan los animales?
  <input type="checkbox" name="animales" />
</label>

Carlos Ramos

Clase 16 - Etiqueta form e input

Frase:

- El mejor formulario, es el que no existe.

¿Por qué los formularios son importantes en los productos web?

Porque es la forma en la que empezamos a interactuar con los usuarios.

¿Cuál es el problema más común que hay en los formularios de la web?

Que son muy extensos y debido a esto los usuarios no terminan de llenarlos.

¿Cuál es la forma errónea de crear formularios y que muchos desarrolladores web usan?

<div>
	<input type="text">
</div>

¿Para qué nos sirve la etiqueta <input>?

Es con esta etiqueta que creamos los campos de los formularios. Además existe un input diferente para cada tipo de información que nosotros queramos.

¿Para qué nos sirve el atributo type en la etiqueta <input>?

Nos permite determinar el tipo del input.

¿Cómo debemos crear un formulario con buenas prácticas?

<form action="">
           <label for="name">
               <span>Cuál es tu nombre ?</span>
               <input type="text" id="name" placeholder="Tu nombre es">
           </label>
</form>

¿Para qué nos sirve la etiqueta <form>?

Es una etiqueta contenedora que le indica al navegador que lo que va a ir dentro de esta etiqueta será un formulario.

¿Para qué nos sirve el atributo action en la etiqueta <form>?

Este nos permite enviar la información que se vaya a ingresar en el formulario a una base de datos por medio de la URL que hayamos escrito como valor en este atributo. Este proceso se realiza con la ayuda de JavaScript.

¿Para qué nos sirve la etiqueta <label>?

Es una etiqueta que nos permite crear una conexión con la etiqueta <input>.

¿Cómo se conectan las etiquetas <label> e <input> usando sus atributos?

Para conectar estas dos etiquetas necesitamos usar el atributo for de la etiqueta <label> y el atributo id de la etiqueta <input>. En estos dos atributos debemos de escribir el mismo valor para que estas dos etiquetas queden conectadas.

¿Para qué nos sirve la etiqueta <span> en un formulario?

La podemos usar como una instrucción para el usuario y así sepa qué información debe de ingresar en el campo del formulario.

¿Para qué nos sirve el input de tipo text?

Para crear campos de texto.

¿Para qué nos sirve el input de tipo date?

Nos permite crear un campo en el que nos desplegará un calendario en el navegador, con el cual el usuario podrá ingresar una fecha específica que se le esté solicitando.

Para qué nos sirve el input de tipo time?

Nos permite crear un campo en el que nos desplegará un menú con las horas y minutos del día, con el cual el usuario podrá ingresar una hora específica que se le esté solicitando.

¿Cómo podemos cambiar de campo en un calendario usando el teclado?

Lo podemos hacer pulsando la tecla de Tab o Tabulador.

¿Para qué nos sirve el atributo placeholder de la etiqueta <input>?

Nos permite crear un texto de ejemplo para que el usuario sepa qué información se está pidiendo en el campo. Este se borrara una vez el usuario empiece a escribir, pero si el campo está vacío nuevamente aparecerá.

David Aliaga

Daniel Esteban Acero Díaz

Ricardo Alfonso Chavez Vilcapoma

Siempre he usado la primera 😅

Mario José Yanez Sifontes

Los formularios son una parte importante en el desarrollo web porque es la forma en la que nosotros como desarrolladores comenzamos a interactuar con los usuarios al pedirles información que ellos puedan colocar en nuestros formularios.

¿Cómo podemos crear un buen formulario?

Lo veremos a continuación, pero antes es importante recordar que

<aside>
💡 El mejor formulario es el que no existe

</aside>

Pero aún así, tenemos ciertas reglas para poder generar un formulario bien estructurado y semánticamente correcto.

Es sabido que la etiqueta div la podemos utilizar para albergar contenido, y muchos desarrolladores la utilizan para la creación de formularios, esto está mal hecho, la forma correcta de generar un formulario es con la etiqueta form, esta etiqueta tiene un atributo que es action, el cual cuando usemos JavaScript podremos hacer uso de él, por el momento no es importante conocerlo a nivel de este curso; Usaríamos el form De esta manera:

<form action="">
<!--Acá iría nuestro formulario-->
</form>

Si queremos comenzar a generar inputs se puede hacer, sin pasar por alto la etiqueta label, dentro de esta etiqueta es que colocaremos nuestro input. La etiqueta label tiene un atributo llamado for=”” en este atributo le colocaremos para cuál input está dirigido este label, o en otras palabras, el id que le creemos al input debe ser igual al for en el label. Y el input que creemos también tiene atributos que podemos utilizar a nuestro favor como por ejemplo:

type: es donde le diremos de qué tipo es el atributo, tenemos varios.
- text: para que el input reconozca texto
- date: para que el input pueda reconocer fechas
- time: para que el input pueda trabajar con horas o tiempos.

Para saber más sobre los tipos de inputspodemos buscarlo acá: https://www.w3schools.com/html/html_form_input_types.asp

id: es el identificador del input, este debe ser igual al for que le vamos a colocar al label

<aside>
💡 Es importante recordar que el id del input debe ser igual al for del label.

</aside>
placeholder: este sirve para colocarle un texto de ejemplo en el input creado, para que la caja no esté vacía, por ejemplo en el input para name podemos ponerle placeholder de “TU NOMBRE” y en lugar de que la caja del input aparezca vacía nos saldría “TU NOMBRE” dentro de la caja, para decirle al usuario que allí queremos que coloque su nombre.
Existen más atributos que pueden estar presentes en los inputs, para más información podemos visitar esta página. https://developer.mozilla.org/es/docs/Web/HTML/Element/input#atributos

Ejemplo:

<form action="">
	<label for="inputName">
		<input type="text" id="inputName" placeholder="Tu Nombre">
	</label>
</form>

Y esto nos crearía una cajita con el input y un placeholder que indique “Tu nombre”.

Pero no es todo. Para que no aparezca sólo la caja vacía del input, podemos, dentro del label, colocar una descripción, o una pregunta, refiriéndonos a qué queremos que el usuario coloque en el input, de esta manera podemos hacer un formulario más fácil para el usuario y mucho mejor a nivel de experiencia para nuestro cliente o usuario de nuestro producto.

De esta manera.

<form action="">
	<label for="inputName">
		<span>¿Cuál es tu nombre?</span>
		<input type="text" id="inputName" placeholder="Tu Nombre">
	</label>
</form>

Y el usuario vería el resultado final de esta manera.

Le puede dar click también a la pregunta y se activaría el input indicándole al usuario que ese es el lugar donde queremos que indique su respuesta a la pregunta o que llene con la información solicitada.

Jonathan Fernando Ramirez Valencia

javier nicolas nieto

**• Los formularios son la parte en que empezamos a interactuar con los usuarios. **

“El mejor formulario es el que no existe”

Nota: es una buena práctica poner el input afuera del label.

<body>
  <form action="">  <!-- form indica un formulario. Action sirve para js-->
    <label for="nombre"> <!--el label es una etiqueta que hace referencia a algo, ese algo se lo decimos con el atributo for -->
      Cual es tu nombre 
    </label>
    <input type="text" id="nombre" placeholder="Tu nombre" required> 

    <label for="inicio-platzi">
      Que dia comenzaste en Platzi
    </label>
    <input type="date" id="inicio-platzi" >   <!--Hay diferentes tipos de input, por eso se lo especificamos con type, y lo definimos con un id-->

    <label for="horario">
      En que horario estudias

    </label>
    <input type="time" id="horario" >

  </form>
</body>
</html>

MONICA ALEJANDRA HERNÁNDEZ VARGAS

La finalidad de asociar el atributo for en la etiqueta label con el id del input correspondiente, es la estructura, organización y la accesibilidad web, es buena práctica.

Camilo Pacheco Tomala

Tipos de input
<input type=“button”>
<input type=“checkbox”>
<input type=“color”>
<input type=“date”>
<input type=“datetime-local”>
<input type=“email”>
<input type=“file”>
<input type=“hidden”>
<input type=“image”>
<input type=“month”>
<input type=“number”>
<input type=“password”>
<input type=“radio”>
<input type=“range”>
<input type=“reset”>
<input type=“search”>
<input type=“submit”>
<input type=“tel”>
<input type=“text”>
<input type=“time”>
<input type=“url”>
<input type=“week”>

Katherine Benjumea

Mu aporte hasta el momento:

Daniel Bonilla

si les interesa chicos y chicas aportar conocimientos un grupo de estudiantes de platzi creamos este foro https://platziforo.com/

Abelardo Ruiz Gonzalez

con toda las ganas de ser un excellente programador…

Eduardo Alexis Galvis Contreras

<!DOCTYPE html>
<html lang=“en”>

<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Formularios</title>
</head>

<body>
<form action="">
<label for=“nombre”>
<span>¿Cuál es tu nombre?</span>
<input type=“text” id=“nombre” placeholder=“Tu nombre”>
</label>
<label for=“inicio-platzi”>
<span>¿Que día iniciaste en Platzi?</span>
<input type=“date” id=“inicio-platzi”>
</label>
<label for=“horario”>
<span>¿En que horario estudias?</span>
<input type=“time” id=“horario”>
</label>
<!–place holder le indica al usuario que tipo de información debe ir en el campo–>
</form>
<!-- no se utiliza el siguiente códig, esta obsoleto:
<div>
<input type=“text”>
<input type=“text”>
<input type=“text”>
<input type=“text”>
</div>
–>
</body>

</html>

Joyner Correa

¿Qué significa la etiqueta form?
El elemento HTML <form> representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.
¿Qué es la etiqueta input?
El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario. Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario.

Luis Miguel Vasquez Alvarez

Viendo la clase en el 2022, nunca es tarde

Alex Almeida

Esta información del curso está parcialmente mal. Label sirve para poner las eqiquetas a los cuadros. EJEMPLO:
<label for:name>
¿?CUal es tu nombre?
</label>

La etiqueta label tiene etiqueta de cierre, no es necesario usar para nada el span como indica el profesor.

Mateo Gonzalez

Les comparto una pagina que les puede ser muy util para probar las distintas etiquetas. Codeebox

Gerardo Garduño Rosas

Comparto mi formulario

Wellman José Aranda Martínez

Si quieren que los input aparezcan uno debajo de otro, utilicen la etiqueta <br> tal como en la imagen

magc2806

Revisando docuemntación de formularios y este
APORTE el formato de formulario mas utilizado no es con el input dentro del label, sino uno debajo del otro.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formularios</title>
</head>
<body>
  <form action="">
    <label for="nombre">Ingresa tu nombre </label>
    <input type="text" id="nombre">
    <label for="inicio-platzi">Inicio en Platzi</label>
    <input type="date" id="inicio-platzi">
    <label for="horario">Horario de estudio</label>
    <input type="time" id="horario">
  </form>  
</body>
</html>

Jineth Daniela Urrego Soler

Jeisson Espinosa

Información resumida de esta clase
#EstudiantesDePlatzi

Saber crear formularios es bien importante
La etiqueta que usamos de manera semántica y aplicando buenas prácticas es form
Existen diferentes tipos de datos que podemos especificar en input, por ejemplo puede ser tipo date y al momento de correr nuestro proyecto vemos que se crea un calendario gracias a especificar este tipo de input

Aorsy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularios</title>
</head>
<body>
    <!-- <div>
        <input type="text">
    </div>De esta manera no se debe hacer un formulario-->
    <form action=""><!--el action se usa cuando se interactura con el formulario y js para enviar informacion, dentro de este se colocala la url o el endpoint que es la url donde se envia la informacion a la Base de datos-->
        <label for="nombre">
            <span>Cual es tu nombre?</span>
            <input type="text" id="nombre" placeholder="Your name"><!--Hay diferentes tipos(types) de inputs para que cada input recolecte informacion distinta-->
                            <!--el valor de el atributo id debe ser el mismo que tiene el for-->
                             <!--el atributo placeholder nos hacer poner un texto de ejemplo que visualmente le dice a la persona que llena el formulario que tipo de informacion deberia de ir en esa parte-->
        </label>
        <label for="inicio-platzi">
            <span>Que dia comenzaste en Platzi?</span>
            <input type="date" id="inicio-platzi"><!--Tipo date es el tipo para marcar un fecha-->
        </label>
        <label for="horario">
            <span>En que horario estudias?</span>
            <input type="time" id="horario">
        </label>
    </form><!--Esta es la manera correcta de hacer un formulario-->
</body>
</html>

Eduardo Peña Ramos

M gusta que el profe es directo y sincero: “los formularios son aburridos” 💯 jaja

Oscar Orjuela

Y pensar en tooooooodos los sites que inspeccioné llenos de divs innecesarios…

Hugo Montoya Diaz

Hasta en esta clase me di cuenta del AT-PT de Star Wars que tiene Diego de Granda en el fondo encima de los libros ¡Super Genial!

Santiago Rodriguez Chaves

La etiqueta de form semanticamente es la correcta y se deberia usar siempre que vamos a hacer formularios para recopilar informacion de los usuarios.

el atributo id de la etiqueta input debe ser igual al atributo for de la etiquta label.

comparto mi formulatio usando

<input type="radio">

para hacer una lista de seleccion en el formulario.

Jossie Steeven Quintero Giron

Cuando colocas un <input> dentro una etiqueta <label>, no es necesario colocar el atributo for.

<form>
 <label>
  <span> Tu nombre </span>
  <input type="text">
 </label>
</form>

Es lo mismo que …

<form>
 <label for="nombre">
  <span> Tu nombre </span>
 </label>
  <input type="text" id="nombre">
</form>

PATRICIO ALBERTO MORALES FARIÑA

Que bueno el HTML5 : Varios años atrás en mi proyecto de tesis tenía que usar jquery para que apareciera el calendario desplegable.

Miguel Jimenez

Algo muy raro para mí fue que label contenga el propio input, fue blow mind para mi.

Juliana Vega

https://developer.mozilla.org/es/docs/Learn/Forms/Your_first_form

<form>

Es un elemento contenedor, como un elemento <section> o <footer>, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:

El atributo action define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
El atributo method define con qué método HTTP se envían los datos (generalmente get o post).

María Del Pilar Chávez Gutiérrez

Etiqueta form e input

La forma correcta de generar un formulario es la siguiente: usamos la etiqueta <form> es una etiqueta importante ya que al usarla estamos aplicando buena semántica. La etiqueta de <form> le dice al navegador que lo que viene dentro de ella es un formulario y el usuario va a dejar información que nosotros tendremos que entrar al navegador. Después de <form> ponemos la etiqueta <label> y dentro de la etiqueta <label> ponemos <input> quedando de la siguiente forma:

Nota <label for=“nombre”> e <input type=“text” id=“nombre”>
Lo que esta marcado en negritas es porque tanto en label for=“” y id=“” va el mismo nombre.

Con el código que tenemos arriba si lo abrimos en nuestro navegador solamente vamos a ver un cuadrito en el cual poner información pero nada más, si queremos poner por ejemplo “¿Cual es tu nombre?” Al lado de ese cuadrito lo que tenemos que hacer es agregar la etiqueta <span> quedando de la siguiente forma:

<form action=“”>
<label for=“nombre”>
<span>¿Cual es tu nombre?</span>
<input type=“text” id=“nombre” />
</label>
</form>

Para agregar otros inputs (me refiero a otras preguntas) podemos copiar nuestras etiquetas y solo cambiar el label y id (diciendo siempre lo mismo) y en span la nueva pregunta que queremos que responda nuestro usuario por ejemplo (marcare en negritas lo que cambia):

<form action=“”>
<label for=“nombre”>
<span>¿Cual es tu nombre?</span>
<input type=“text” id=“nombre” />
</label>
</form>

Ahora si queremos que a nuestro usuario le salga una ventanita para que seleccione la fecha en la que inicio haciendo así su experiencia mucho mas fácil y rápida… haremos lo siguiente que es agregar type=“date” en nuestro input quedando así:

<form action=“”>
<label for=“inicio-platzi”>
<span>¿Que día comenzaste en Platzi?</span>
<input type=“date” id=“inicio-platzi” />
</label>
</form>

Si queremos que agregue un horario de estudio igual facilitándole el llenar el formulario al nuestro usuario agregamos type=“time” en nuestro input, quedando así:

<form action=“”>
<label for=“horario”>
<span>¿En que horario estudias?</span>
<input type=“time” id=“horario” />
</label>
</form>

Otro atributo que existe en los inputs es el placeholder este nos hace poner un texto de ejemplo que visualmente le dice a nuestro usuario el tipo de información que va ahí, la forma de agregar ese atributo es la siguiente:

<form action=“”>
<label for=“nombre”>
<span>¿Cual es tu nombre?</span>
<input type=“text” id=“nombre” placeholder=“Tu nombre” />
</label>
</form>

Quedando así.

Andrés Castellanos

Dejo un esquema que hice sobre la clase. 🖼️:

Wilder Stiven Camargo Segura

Me parece que la etiqueta span sobra puesto que dentro de la misma etiqueta label podemos incluir el texto que queremos referenciar quedando algo asi:

<main>
        <form action="">
            <label for="nombre">What's your name?</label>
            <input type="text" id="nombre">
        </form>
    </main>

Carlos Acevedo

No me quedó muy claro que es un Label

mitri.dvp

nunca pense en utilizar los <label> como contenedores para el <span> e <input>, esto permite que el usuario al presionar el <span> se le de enfoque al <input> sin necesidad de definir los atributos for/id.

DANIEL SUAREZ

Que bueno darme cuenta que estaba haciendo mal los formularios, les dejo mi código:

<body>
  <form action="">
    <label for="nombre">
      <span>¿Cual es tu nombre?</span>
      <input type="text" id="nombre" placeholder="Escribe tu nombre">
    </label>

    <label for="fecha">
      <span>¿Que día iniciaste en platzi?</span>
      <input type="date" id="fecha">
    </label>

    <label for="horario">
      <span>¿En que horario estudias?</span>
      <input type="time" id="horario">
    </label>
  </form>
</body>```

Dani-Ideas

es un formulario oun poco mas extezo que el de la clase pero estaba curiosando las opciónes de los inputs

  <form action=""><!--esta es la etiqueta correcta de crear un formulario-->
        <label for="Nombre">
            <span>¿Cual es tu Nombre?</span>
            <input type="text" id = "Nombre" placeholder= "Tu Nombre😀">
        </label><br><br>
        <label for="Fecha">
            <span>¿Cuando empezaste a estudiar?</span>
            <input type="date" id = "Fecha">
        </label><br><br>
        <label for="file">
            <span>solo el mes y el año</span>
            <input type="month" id = "file">
        </label><br><br>
        <label for="horario">
            <span>¿A qué hora estudias?</span>
            <input type="time" id = "horario">
        </label><br><br>
        <label for="e-mail">
            <span>¿Cual es tu e-mail?</span>
            <input type="email" id = "e-mail" placeholder= "[email protected]">
        </label><br><br>
        <label for="file">
            <span>¿Cual es tu curso favorito?</span>
            <input type="file" id = "file">
        </label><br><br>
        <label for="color">
            <span>¿Cual es tu color favorito?</span>
            <input type="color" id = "color">
        </label><br><br>
        <label for="opinion">
            <span>Este Formulario que te parecio</span>
            <input type="button" id = "opinion" value="Exelente">
            <input type="button" id = "opinion" value="Tolerable">
            <input type="button" id = "opinion" value="Malo">
            <input type="button" id = "opinion" value="Insufible">
        </label><br><br>
    </form>```

Samuel de los Santos

si se utiliza la etiqueta <br> justo al lado de la etiqueta </label> pudes hacer que quede en columna el formulario
ejemplo:

<label for="nombre">
	<span>¿Cual es tu nombre?</span>
	<input type="text" id="nombre" />
</label><br><br>

Irving Juárez

Para que no se vea tan amontonado podemos usar varios form (no es lo ideal, pero mientras no vemos css, es lo mejor). Además de que podemos usar la etiqueta <br> para un espacio de linea.

<body>
    <form action="">
        <label for="name">
            <span>What is your name?</span>
            <input type="text" id="name">
        </label>
    </form>
    <br>
    <form action="">
        <label for="birthday">
            <span>When is your birthday?</span>
            <input type="date">
        </label>
    </form>
    <br>
    <form action="">
        <label for="breadTime">
            <span>When do you go for the bread?</span>
            <input type="time">
        </label>
    </form>
</body>

Freddy Zanazzo

Diferentes tipos de etiquetas inputs en HTML

Arturo Malgor