Autocompletado y Requerimiento en Formularios HTML
Resumen
La creación de formularios web amigables y efectivos es esencial para la interacción con los usuarios. Estos deben ser intuitivos y simplificar la experiencia de quien los rellena, permitiéndoles compartir la información necesaria con facilidad y seguridad. Con esto en mente, vamos a explorar dos funcionalidades clave: el autocompletado y el atributo "require", y cómo pueden ser implementadas para mejorar la usabilidad de los formularios.
¿Qué es el autocompletado y cómo ayuda al usuario?
El autocompletado es una función que permite a los navegadores rellenar automáticamente campos de formulario con datos que el usuario ha ingresado previamente. Esto ahorra tiempo y esfuerzo al no tener que introducir repetidamente la misma información, como el nombre, correo electrónico o dirección. ¿Cómo funciona este proceso? El navegador reconoce las entradas que coinciden con los datos guardados y sugiere completarlos automáticamente.
¿Cómo realizar el autocompletado en un formulario?
Para implementar el autocompletado, empleamos un atributo en los elementos de entrada del formulario conocido como autocomplete. Aquí se detallan los pasos para usarlo:
Agrega el atributo autocomplete a los inputs relevantes.
Asigna valores a autocomplete de acuerdo con las especificaciones: usa "name" para el nombre del usuario, "email" para el correo electrónico, "country" para el país y "postal-code" para el código postal.
Estos valores se basan en una lista estandarizada que el navegador reconoce para autocompletar datos.
¿Qué es el atributo "require" y para qué se utiliza?
El atributo "require" se emplea para garantizar que el usuario no deje campos importantes sin rellenar en un formulario. Al usar este atributo en un elemento de entrada, el navegador no permitirá el envío del formulario si el campo está vacío, indicando al usuario que debe completar la información faltante.
¿Cómo se implementa el atributo "require" en nuestros formularios?
La implementación del atributo "require" es directa:
Simplemente, añade el atributo required a cada input que sea imprescindible en el formulario.
Esto creará una validación en el navegador antes del envío.
Si algún campo requerido está vacío, aparecerá una alerta orientando al usuario a completar la información.
¿Qué sigue después del autocompletado y el "require"?
Avanzando en la creación de formularios, la siguiente funcionalidad a explorar es la etiqueta select, utilizada para presentar una lista desplegable, como por ejemplo, un listado de países. En la próxima clase abarcaremos cómo implementar esta etiqueta para hacer que tus formularios sean aún más interactivos y amigables.
La implementación adecuada del autocompletado y el requerimiento de campos es fundamental en la experiencia de usuario, al agilizar el proceso de completar formularios y asegurar que la información esencial sea provista. Como desarrollador, estas herramientas son clave para construir una interfaz web amena y funcional. Recuerda siempre poner a prueba estas funcionalidades y observar cómo mejoran la interacción con el usuario en tus formularios, facilitando no solo el trabajo del usuario sino también el tuyo al procesar los datos recibidos de manera más eficiente.
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>.
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><formaction=""><labelfor="nombre"><span>¿Cuál es tu nombre?</span><inputtype="text"name="nombre"id="nombre"autocomplete="name"required></label><labelfor="correo"><span>¿Cuál es tu correo?</span><inputtype="email"name="correo"id="correo"autocomplete="email"required></label><labelfor="pais"><span>¿En qué país vives?</span><inputtype="text"name="pais"id="pais"autocomplete="country"required></label><labelfor="cp"><span>¿Cuál es tu código postal?</span><inputtype="number"name="cp"id="cp"autocomplete="postal-code"required></label><inputtype="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í
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
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:
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: