Autocompletado y Requerimiento en Formularios HTML
Contenido del curso
Iván Arcos
Joel Dominguez Merino
Esteban Casallas
Raúl Martín Landa Ochoa
Jesus Velasco
Erick Fernando Guzmán Valerio
Gabriel Quevedo
Joel Dominguez Merino
Andres Condezo Monge
Alejandro Ramos
Joel Dominguez Merino
Nestor Quiroga Suárez 🧑🏼🚀
Mave Fers
Sergio Gonzalez
Carlos Eduardo Gomez García
César Palma
Alejandra
Joel Dominguez Merino
Daniel Vergel
Anthony Ismael Manotoa Moreno
Ricardo López García
John Stiven Jiménez Alzate
Peter Quiñones Guerrero
emanuel
Maritza Miranda
Pegoraro Maria Concepcion
Hector Mauricio Giraldo
Markin Piero Pulache Guarniz
Daniel Omar Hernández Muñoz
Luis Carlos Correa Giraldo
Susan Mariana de Jesús Truyenque Jiménez
Carlos David Ramírez Gómez
Andres Condezo Monge
Jimmy Buriticá Londoño
Daniela Díaz Graziani
Andres Salazar
Alexis Daniel Sanchez Arias
Andres Salazar
Jose Luis Grande Acevedo
Cristian Mauricio Cavanzo Arias
Giuseppe Ramirez
Carlos Felipe González Calero
Anthony González (@ThonnyGeek)
Alejandro Picado Brenes
Railly Hugo
RICHARD MONTORO MEJIA
Lisbeth Diaz
Juan Gui Arenas
VSCode + Emmet es la mejor combinación para ahorrar tiempo:
Totalmente! ahorra demasiado tiempo.
es una herramienta muy potente, de los mejores editores.
Revisando https://www.w3schools.com/ encontré que se podía lograr algo un poco diferente y lo que llamo mi atención es que colocando el automplete="on" desde el inicio hace posible que ya no sea necesario colocarlo reiteradas veces luego. No sé si es la mejor práctica pero la comparto de todos modos.
Muchas gracias por el aporte
El problema ahí es que no contara con los formularios que no cuentan con algun tipo: Pais, ciudad, direccion
Con el editor de texto VS Code, contamos con emmet, el cual nos permite insertar el siguiente comando para crear un input con sólo un Enter... copie y pegue ;)
form>label>span+input
Gracias Gab! Buen aporte a la comunidad.
Gracias
El atributo autocomplete = "tipo-del-input" hace que el navegador auto-complete los formularios, según el tipo de input. El atributo se coloca en la etiqueta <input>.
El atributo require, evita que se envíe información del formulario, si el input está vacío. El atributo se coloca en la etiqueta <input>.
Muy buen resumen! muchas gracias :D
Autocomplete and Required: .
¡Me sirvió para añadirle más información a mi blog de notas que estoy creando! ¡Gracias!! https://mavefers.github.io/html-css-es/18-autocomplete-and-require.html
Muchas gracias por el resumen 🙏🏻
Para validación de datos hay varias capaz de validación, y JavaScript sin duda juega un papel importante, validar con JavaScript NO es malo, de hecho, es más recomendable, pero también es importante poner dichos atributos HTML para realizar la validación, sin embargo, la validación más importante es la que se hace del lado del servidor, ya que es quien tiene la última palabra sobre si una acción procede o no
El principal propósito de la validación en el frontend no es la seguridad de la aplicación, sino proveer un correcto feedback al usuario sobre el formulario que está llenando, ello mejora su experiencia al usar el producto.
Este curso es tan completo💻
Estoy aprendiendo mas que en otras plataformas la verdad! Platzi es excelente.
he aprendido bastante Platzi es lo mejor
Notas de la clase:
Para hacer que los campos del formulario se autocompleten solos con datos que ya ha usado antes el usuario (y están guardados en el navegador), se usa el atributo autocomplete dentro de la etiqueta input.
Para qué sirven distintos valores de el atributo autocomplete:
Para que los datos del campo sean obligatorios, se debe usar el atributo require en la etiqueta input.
<body> <form action=""> <label for="nombre"> <span>¿Cuál es tu nombre?</span> <input type="text" name="nombre" id="nombre" autocomplete="name" required> </label> <label for="correo"> <span>¿Cuál es tu correo?</span> <input type="email" name="correo" id="correo" autocomplete="email" required> </label> <label for="pais"> <span>¿En qué país vives?</span> <input type="text" name="pais" id="pais" autocomplete="country" required> </label> <label for="cp"> <span>¿Cuál es tu código postal?</span> <input type="number" name="cp" id="cp" autocomplete="postal-code" required> </label> <input type="submit"> </form> </body>
Mil gracias!
Sorry, the page /es/docs/Web/HTML/Atributos/autocomplete could not be found. Ya el recurso no se encuentra disponible
Usando todo lo básico que nos enseño platzi
Imaginemos por un momento que ya existen los parques jurásicos uwu 🤣🤣🤣.
Excelente aporte de la imagen de fondo!
Como así ?? Ya hice me inscripción , así que me tienes que devolver el valor de mis boletas. jajaja Genial pantalla , felicitaciones.
Si usan VSC, les dejo un atajo para hacer los 4 label de una sola vez, sin necesidad de copiar. (Obvio q se puede reemplazar el 4 por la cantidad de veces q deseen)
form>label*4>span+input
Me los deja todo en una misma línea sin tabular. Se puede hacer que venga ya tabulado y ordenado
Gracias por el tip
Para los que tengan problema con el autocompletado y crean que les quedó igual que la clase pero no funciona, pueden ser 4 errores que yo encontrara.
1-Typos (errores al escribir, vs code les ayuda mucho con eso) 2-Tienen desactivado en configuración de Chrome el autocompletado (poco común, pero mejor revisa) 3-No estas usando un servidor (o puerto por decirlo de una forma) 4-No has registrado cosas para ese campo o simplemente ya lo borraste al limpiar historial o algo.
No encontraba que era conmigo con las 2 primeras en ninguna página de ayuda, la cuarta la tenía descartada, la tercera la note luego al ver el video con mucho detalle, si observan el profe lo corre en servidor local 127.0.0.1, ya probé los dos casos y era eso, el no lo menciona en la clase, seguramente lo hizo porque se autorecarga y es cómodo, pero es lo mismo, pero al parecer en esto si hay diferencia, si quieren solucionarlo como yo lo hice, no sé como lo hizo el profe, aquí una explicación
1-Nombran su carpeta GENERAL del curso sin espacios y sin mayúsculas
2-Abren la terminal o Bash en la carpeta general del curso donde tiene las demás clases de este cuso (en mi caso curso_definitivo_de_html_y_css pueden copiarlo y renombrar la de ustedes)
3- Escriben
npm init
4- Dan enter hasta completar todo y les aparecera una carpeta node_modules y 2 archivos json en la carpeta general del curso, ignorarlos por ahora 5- Escriben en la terminal donde mismo
npm install live-server -D
6- Van al archivo package.json que les comente y lo abren en su editor y le ponen a "script" el "start": "live-server", les debería quedar algo así
{ "name": "curso_definitivo_de_html_y_css", "version": "1.0.0", "description": "", "main": "./clasecalendar/index2.html", "scripts": { "start": "live-server" }, "keywords": [], "author": "Dann Herz <correoetcetc@gmail.com>", "license": "MIT", "devDependencies": { "live-server": "^1.2.1" } }
Listo, por ultimo guardan y van a la terminal, y ponen
npm run start
les abrirá sus carpetas en el navegador, entren en la de la clase y les abrirá por defecto el index.html con un servidor asignado, entonces les funcionara igual que en la clase.
Si quieren aprender de que va esto y mucho más, vayan al curso de npm
muy útil, mcuhas gracias
Me ayudaste demasiado, muchas gracias
Para abreviar y agilizar el proceso, pueden usar la sintaxiste emmet, por lo que, sería escribir en vsCode
form>label*4>span+input
y presionar tabulador en el momento que el editor les muestre la recomendación
Gracias por el dato!
Wow. Esta super este comando, gracias
Friendly reminder: amo Platzi 💜
¡SOY PARANOICO!
La opción de autoguardado que much@s agradecen (por pereza, y lo entiendo) para mí es un apartado totalmente inseguro y a mi modo de ver hasta una mala practica ya que los datos de autoguardado no se encriptan en el navegador y son visibles para cualquiera que pueda sentarse en el navegador (no pasa lo mismo con las contraseñas o tarjetas de credito, que si se encriptan). Lo mismo pasa con las contraseñas, que se guardan y con solo escribir un nombre de usuario o correo se rellena el dato de contraseña (que tambien puede llegar a verse). No digo que sea inútil la opción de autoguardado (a diferencia de mucho de lo que escribo), solo que veo esta practica como cerrar la puerta de mi casa muy bien cerrada y dejar la llave pegada por fuera😋
pero chrome en los ultimos años ha estado encriptando de ambos lados tanto del server como desde tu ip local casi todo lo que autocompletas
Si alexis, pero no si alguien se hace de tu laptop o pc por un ratito... Préstame tu compu o dame acceso por anydesk 🤪 y te muestro que "la vida es bella" solo es una película!😂
Vamos a hacer un nuevo formulario donde vamos a pedir información principal como nombre correo país y código postal
<main> <form action=""> <label for="nombre"> <span>¿Cuál es tu nombre?</span> <input type="text" name="nombre" id="nombre" /> </label> <label for="correo"> <span>¿Cuál es tu correo?</span> <input type="email" name="correo" id="correo" /> </label> <label for="pais"> <span>¿En qué país vives?</span> <input type="text" name="pais" id="pais" /> </label> <label for="cp"> <span>¿Cuál es tu código postal?</span> <input type="text" name="cp" id="cp" /> </label> </form> </main>
Como le puedo decir ahora al navegador con esto que si hay ciertas preguntas en mi formulario que el usuario ya haya contestado antes que nos ayude con la respuesta que siempre pone, y es muy sencillo va a ser otro atributo y este atributo es autocomplete y tiene igual a un valor, hay varios, utilizaremos name
<input type="text" name="nombre" id="nombre" autocomplete="name" /> <input type="email" name="correo" id="correo" autocomplete="email" /> <input type="text" name="pais" id="pais" autocomplete="country" /> <input type="text" name="cp" id="cp" autocomplete="postal-code" />
Para require, va ser otro atributo que le vamos a poner al input
<input type="text" name="nombre" id="nombre" autocomplete="name" required />```
Sin poner autocomplete , se autocompleto. Es necesario ponerlo?
Hola, Clair.
Es preferible colocar autocomplete, te da la seguridad de que al usuario le aparezca. Es muy probable que te haya aparecido a ti por tus datos almacenados en tu computador.
:)
Me pasa lo mismo
Anotaciones:
Algunos trucos para escribir formularios en Vscode:
1- Crear varios labels de forma rápida
label*3>span+input:text <!--Escribir el anterior código y presionar enter--> <!--VSCode genera los label múltiplicados por el número de veces, ejemplo 3, con el span e input del tipo requerido--> <label for=""><span></span><input type="text" name="" id=""></label> <label for=""><span></span><input type="text" name="" id=""></label> <label for=""><span></span><input type="text" name="" id=""></label>
2- Multiplicar el cursor, presiona ALT + CLICK en lugar que quieras que aparezca un cursor adicional y puedes escribir al mismo tiempo el valor del for, id y name
Atributos que juegan un papel importante en cuanto a la UX (Experiencia de Usuario).
Alguien me podría explicar porfavor cuál es la necesidad de usar el atributo for en label y del atributo id en input si el texto y el input están enlazados dentro del label estructuralmente? es más creo que esta práctica se presta para errores, si se llegara a escribir diferente el atributo for y el atributo id
La atributo for es para asociar el Label con el input, si no usaras el atributo for tendrias que escribir el codigo asi:
<label>Input here: <input type='text' name='theinput' id='theinput'> </label>
Osea, tendrias que colocar la etiqueta input dentro del el label, sin embargo con el atributo for asocias el label al input directamente de esta manera:
<label for="theinput">Input here:</label> <input type='text' id='theinput'>
Espero haberte ayudado un poco!!!!
Hola la funcion del for sirve para que el navegador cuando haga clic en una pregunta del form, se enfoque en el input
