Autocompletado y Requerimiento en Formularios HTML

Clase 19 de 56 • Curso Definitivo de HTML y CSS

Clase anteriorSiguiente clase

Iván Arcos

student•

VSCode + Emmet es la mejor combinación para ahorrar tiempo:

Joel Dominguez Merino

student•

Totalmente! ahorra demasiado tiempo.

Esteban Casallas

student•

es una herramienta muy potente, de los mejores editores.

Raúl Martín Landa Ochoa

student•

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.

Jesus Velasco

student•

Muchas gracias por el aporte

Erick Fernando Guzmán Valerio

student•

El problema ahí es que no contara con los formularios que no cuentan con algun tipo: Pais, ciudad, direccion

Gabriel Quevedo

student•

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

Joel Dominguez Merino

student•

Gracias Gab! Buen aporte a la comunidad.

Andres Condezo Monge

student•

Gracias

Alejandro Ramos

student•

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

Joel Dominguez Merino

student•

Muy buen resumen! muchas gracias :D

Nestor Quiroga Suárez 🧑🏼‍🚀

student•

Autocomplete and Required: .

Mave Fers

student•

¡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

Sergio Gonzalez

student•

Muchas gracias por el resumen 🙏🏻

Carlos Eduardo Gomez García

teacher•

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

César Palma

student•

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.

Alejandra

student•

Este curso es tan completo💻

Joel Dominguez Merino

student•

Estoy aprendiendo mas que en otras plataformas la verdad! Platzi es excelente.

Daniel Vergel

student•

he aprendido bastante Platzi es lo mejor

Anthony Ismael Manotoa Moreno

student•

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: https://developer.mozilla.org/es/docs/Web/HTML/Atributos/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>

Ricardo López García

student•

Mil gracias!

John Stiven Jiménez Alzate

student•

Sorry, the page /es/docs/Web/HTML/Atributos/autocomplete could not be found. Ya el recurso no se encuentra disponible

Peter Quiñones Guerrero

student•

Usando todo lo básico que nos enseño platzi

Imaginemos por un momento que ya existen los parques jurásicos uwu 🤣🤣🤣.

emanuel

student•

Excelente aporte de la imagen de fondo!

Maritza Miranda

student•

Como así ?? Ya hice me inscripción , así que me tienes que devolver el valor de mis boletas. jajaja Genial pantalla , felicitaciones.

Pegoraro Maria Concepcion

student•

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

Hector Mauricio Giraldo

student•

Me los deja todo en una misma línea sin tabular. Se puede hacer que venga ya tabulado y ordenado

Markin Piero Pulache Guarniz

student•

Gracias por el tip

Daniel Omar Hernández Muñoz

student•

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

Luis Carlos Correa Giraldo

student•

muy útil, mcuhas gracias

Susan Mariana de Jesús Truyenque Jiménez

student•

Me ayudaste demasiado, muchas gracias

Carlos David Ramírez Gómez

student•

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

Andres Condezo Monge

student•

Gracias por el dato!

Jimmy Buriticá Londoño

student•

Wow. Esta super este comando, gracias

Daniela Díaz Graziani

student•

Friendly reminder: amo Platzi 💜

Andres Salazar

student•

¡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😋

Alexis Daniel Sanchez Arias

student•

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

Andres Salazar

student•

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

Jose Luis Grande Acevedo

student•

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

Cristian Mauricio Cavanzo Arias

student•

Sin poner autocomplete , se autocompleto. Es necesario ponerlo?

Giuseppe Ramirez

student•

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.

Carlos Felipe González Calero

student•

Me pasa lo mismo

Anthony González (@ThonnyGeek)

student•

Anotaciones:

Alejandro Picado Brenes

student•

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

Railly Hugo

student•

Atributos que juegan un papel importante en cuanto a la UX (Experiencia de Usuario).

RICHARD MONTORO MEJIA

student•

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

Lisbeth Diaz

student•

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

Juan Gui Arenas

student•

Hola la funcion del for sirve para que el navegador cuando haga clic en una pregunta del form, se enfoque en el input