Lista de types para inputs en una buena página para guiarse w3schools
Web Developer Fundamentals
Qué aprenderás sobre HTML y CSS
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
Quiz: Web Developer Fundamentals
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Quiz: CSS
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Quiz: Responsive Design
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Etiqueta form e input
16/55Recursos
Aportes 408
Preguntas 138
Ordenar por:
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>```
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:
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=“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.
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>
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 “El 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.
.
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.
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.
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=“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 😃
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 “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.
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
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
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 “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.
**• 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>
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=“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”>
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=“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>
¿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: “los 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=“nombre”>
<input type=“text” id=“nombre” />
</label>
</form>
</body>
</html>
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í.
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=“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”>
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=“es”>
<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 y calendarios</title>
</head>
<body>
// formulario generico
<div>
<input type=“texto”>
</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=“fname”>Primer mombre:</label><br>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.