Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Etiqueta form e input

16/55
Recursos

Aportes 408

Preguntas 138

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Lista de types para inputs en una buena p谩gina para guiarse w3schools

Cre贸 que tambi茅n es importante mencionar que se puede colocar el atributo 鈥淩equired鈥, 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>```

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 鈥淐ontenedor鈥 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:

Comparto un art铆culo puede ser 煤til: Dise帽ando formularios m谩s efectivos

Imagen de los input que se pueden hacer en html.

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

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

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!

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.

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>

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=鈥渢ext鈥; Se aclara que los datos ser谩n tipos textos (por ejemplo, nombre y apellido).

  • type=鈥渄ate鈥; 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=鈥渢ime鈥; 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.

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.

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>

Que buena frase 鈥淓l mejor formulario es el que no existe鈥 馃槢

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! 馃槃

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

馃槃

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

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.

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:

  1. Probar en otro navegador como Chrome.
  2. Poner un 鈥榩laceholder鈥 en el input.
    <input type=鈥渄ate鈥 id=鈥渋nicio-platzi鈥 placeholder=鈥測yyy-mm-dd鈥>.

Espero que os sirva de utilidad.

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

鈥淓l 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.

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.

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>


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

aqui esta el codigo por si alguien lo quiere

Esta en code pen, para que se vea mejor 馃槂

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 馃槮

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.馃槄

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

Notas de la clase

  • Bro!, bro! o Sis! te comparto el resumen de la clase
    nota: descripci贸n de cada lineal <!-- contenido -->

El resultado en es este 馃槈 :

  • tambi茅n les dejo algunos inputs :
    <input type=鈥渂utton鈥>
    <input type=鈥渃heckbox鈥>
    <input type=鈥渃olor鈥>
    <input type=鈥渄ate鈥>
    <input type=鈥渄atetime-local鈥>
    <input type=鈥渆mail鈥>
    <input type=鈥渇ile鈥>
    <input type=鈥渉idden鈥>
    <input type=鈥渋mage鈥>
    <input type=鈥渕onth鈥>
    <input type=鈥渘umber鈥>
    <input type=鈥減assword鈥>
    <input type=鈥渞adio鈥>
    <input type=鈥渞ange鈥>
    <input type=鈥渞eset鈥>
    <input type=鈥渟earch鈥>
    <input type=鈥渟ubmit鈥>
    <input type=鈥渢el鈥>
    <input type=鈥渢ext鈥>
    <input type=鈥渢ime鈥>
    <input type=鈥渦rl鈥>
    <input type=鈥渨eek鈥>

  • Espero les ayude, suerte 馃槂

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

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 鈥渇or鈥 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.

Recuerda que el label es un contenedor de input

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>

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

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

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 馃槂

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

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

Un an谩lisis a un formulario simple 馃槂 Fuente: https://www.gatesnotes.com/Contact-Bill-Gates

"El mejor formulario es aquel que no existe"

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

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

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

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

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>

馃く Toda la vida dejando el input por fuera del label.

Excelente clase. 猸愨瓙猸愨瓙猸

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

Un buen desarrollador hace buenas practicas

Tambi茅n se puede hacer asi!!!

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

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

Me gusta aprender con buenas practicas

Siempre he usado la primera 馃槄

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 鈥淭U NOMBRE鈥 y en lugar de que la caja del input aparezca vac铆a nos saldr铆a 鈥淭U 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 鈥淭u 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.

.

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

鈥淓l 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>

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.

Tipos de input
<input type=鈥渂utton鈥>
<input type=鈥渃heckbox鈥>
<input type=鈥渃olor鈥>
<input type=鈥渄ate鈥>
<input type=鈥渄atetime-local鈥>
<input type=鈥渆mail鈥>
<input type=鈥渇ile鈥>
<input type=鈥渉idden鈥>
<input type=鈥渋mage鈥>
<input type=鈥渕onth鈥>
<input type=鈥渘umber鈥>
<input type=鈥減assword鈥>
<input type=鈥渞adio鈥>
<input type=鈥渞ange鈥>
<input type=鈥渞eset鈥>
<input type=鈥渟earch鈥>
<input type=鈥渟ubmit鈥>
<input type=鈥渢el鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ime鈥>
<input type=鈥渦rl鈥>
<input type=鈥渨eek鈥>

Mu aporte hasta el momento:

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

con toda las ganas de ser un excellente programador鈥

<!DOCTYPE html>
<html lang=鈥渆n鈥>

<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Formularios</title>
</head>

<body>
<form action="">
<label for=鈥渘ombre鈥>
<span>驴Cu谩l es tu nombre?</span>
<input type=鈥渢ext鈥 id=鈥渘ombre鈥 placeholder=鈥淭u nombre鈥>
</label>
<label for=鈥渋nicio-platzi鈥>
<span>驴Que d铆a iniciaste en Platzi?</span>
<input type=鈥渄ate鈥 id=鈥渋nicio-platzi鈥>
</label>
<label for=鈥渉orario鈥>
<span>驴En que horario estudias?</span>
<input type=鈥渢ime鈥 id=鈥渉orario鈥>
</label>
<!鈥損lace 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=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
</div>
鈥>
</body>

</html>

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

Viendo la clase en el 2022, nunca es tarde

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.

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

Comparto mi formulario

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

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>

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

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

M gusta que el profe es directo y sincero: 鈥渓os formularios son aburridos鈥 馃挴 jaja

Y pensar en tooooooodos los sites que inspeccion茅 llenos de divs innecesarios鈥

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!

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.

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>

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.

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

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

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

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:

<form action=鈥溾>
<label for=鈥渘ombre鈥>
<input type=鈥渢ext鈥 id=鈥渘ombre鈥 />
</label>
</form>
</body>
</html>

Nota <label for=鈥渘ombre鈥> e <input type=鈥渢ext鈥 id=鈥渘ombre鈥>
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 鈥溌緾ual 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=鈥渘ombre鈥>
<span>驴Cual es tu nombre?</span>
<input type=鈥渢ext鈥 id=鈥渘ombre鈥 />
</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=鈥渘ombre鈥>
<span>驴Cual es tu nombre?</span>
<input type=鈥渢ext鈥 id=鈥渘ombre鈥 />
</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=鈥渄ate鈥 en nuestro input quedando as铆:

<form action=鈥溾>
<label for=鈥渋nicio-platzi鈥>
<span>驴Que d铆a comenzaste en Platzi?</span>
<input type=鈥渄ate鈥 id=鈥渋nicio-platzi鈥 />
</label>
</form>

Si queremos que agregue un horario de estudio igual facilit谩ndole el llenar el formulario al nuestro usuario agregamos type=鈥渢ime鈥 en nuestro input, quedando as铆:

<form action=鈥溾>
<label for=鈥渉orario鈥>
<span>驴En que horario estudias?</span>
<input type=鈥渢ime鈥 id=鈥渉orario鈥 />
</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=鈥渘ombre鈥>
<span>驴Cual es tu nombre?</span>
<input type=鈥渢ext鈥 id=鈥渘ombre鈥 placeholder=鈥淭u nombre鈥 />
</label>
</form>

Quedando as铆.

Dejo un esquema que hice sobre la clase. 馃柤锔:

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>   

No me qued贸 muy claro que es un Label

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.

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

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

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>

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>

Diferentes tipos de etiquetas inputs en HTML

<input type=鈥渂utton鈥>
<input type=鈥渃heckbox鈥>
<input type=鈥渃olor鈥>
<input type=鈥渄ate鈥>
<input type=鈥渄atetime-local鈥>
<input type=鈥渆mail鈥>
<input type=鈥渇ile鈥>
<input type=鈥渉idden鈥>
<input type=鈥渋mage鈥>
<input type=鈥渕onth鈥>
<input type=鈥渘umber鈥>
<input type=鈥減assword鈥>
<input type=鈥渞adio鈥>
<input type=鈥渞ange鈥>
<input type=鈥渞eset鈥>
<input type=鈥渟earch鈥>
<input type=鈥渟ubmit鈥>
<input type=鈥渢el鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ime鈥>
<input type=鈥渦rl鈥>
<input type=鈥渨eek鈥>

En linux no aparece el reloj para desplegar el men煤, pero igual puede completarse el formulario.

Formularios
De manera sem谩ntica el formulario debe estar dentro de <form> para cdad input crearemos un

 <label for=鈥濃><input type=鈥濃 id=鈥濃></label>

en donde el campo for y id deben ser iguales para que el navegador los relacione. INput es el tipo de entrada ya sea una hora, una fecha, texto, marcar una casilla, etc茅tera.
El atributo placeholder es lo que se muestra por defecto que se borra al ingresar algo

PLACEHOLDER

<!DOCTYPE html>
<html lang=鈥渆s鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Formularios y calendarios</title>
</head>
<body>
// formulario generico
<div>
<input type=鈥渢exto鈥>

</div>

// formulario bien hecho se hacen etiquetas forn

<form action="">
 <label for="nombre">
    <span>驴cual es tu nombre?</span>
    <input type="text" id="nombre" placeholder="tu nombre?">
 </label>

 <form action="">
 <label for="nacio">
  // pregunta formulario  <span>驴cuando naciste?</span> 
    <input type="date" id="nacio">
 </label>

 <form action="">
 <label for="horario">
    <span>驴en que horario estudias?</span>
    <input type="time" id="horario">
 </label>

</form>

<form action="">
<label for="">
<span></span>
<input type="texto">
</label>


</form>

</body>
</html>

Interesantoso 馃惢

Para evitar el span en el LABEL, podemos abreviarlo de esta manera.
<label for=鈥渇name鈥>Primer mombre:</label><br>