Autocomplete y require

https://developer.mozilla.org/es/docs/Web/HTML/Atributos/autocomplete
Valores autocomplete:

- “off”:
El navegador no puede ingresar o seleccionar automáticamente un valor para este campo. Es posible que el documento o la aplicación proporcione su propia función de autocompletar, o que los problemas de seguridad requieran que el valor del campo no se ingrese automáticamente.

- “on”:
El navegador puede completar automáticamente la entrada. No se proporciona ninguna orientación sobre el tipo de datos que se esperan en el campo, por lo que el navegador puede usar su propio criterio.

- “name”:

El campo espera que el valor sea el nombre completo de una persona. Generalmente se prefiere usar “nombre” en lugar de dividir el nombre en sus componentes porque evita tratar con la amplia diversidad de nombres humanos y cómo están estructurados; sin embargo, puede usar los siguientes valores de autocompletar si necesita dividir el nombre en sus componentes:

1. "honorific-prefix"
   Prefijo tipo “Mrs.”, “Mr.”, “Miss”, “Ms.”, “Dr.”, or “Mlle.”.

2. "given-name"
   Primer nombre (first name)

3. "additional-name"
   Segundo nombre (middle name)

4. "family-name"
   Apellido (last name)

5. "honorific-suffix"
   Sufijo tipo “Jr.”, “B.Sc.”, “PhD.”, “MBASW”, or “IV”.

6. "nickname"
   Un apodo.

- "email"
Dirección de correo electrónico

- “username”:
Nombre de usuario

- “new-password”:
Una nueva contraseña. Al crear una nueva cuenta o cambiar contraseñas, este es el campo “Ingrese su nueva contraseña”, a diferencia de cualquier campo “Ingrese su contraseña actual” que pueda estar presente. Esto puede ser utilizado por el navegador tanto para evitar ingresar accidentalmente una contraseña existente como para ofrecer ayuda para crear una contraseña segura.

- “current-password”:
La contraseña actual del usuario.

-“organization-title”:
Un puesto de trabajo, o el título que tiene una persona dentro de una organización, como “Escritor técnico senior”, “Presidente” o “Líder asistente de tropa”.

- “organization”:
El nombre de una empresa u organización, como “Acme Widget Company” o “Girl Scouts of America”.

- “street-address”:
Una dirección postal. Puede ser varias líneas de texto y debe identificar completamente la ubicación de la dirección dentro de su segundo nivel administrativo (generalmente una ciudad o pueblo), pero no debe incluir el nombre de la ciudad, el código postal o el nombre del país.

- “address-line1”, “address-line2”, “address-line3”:
Cada línea individual de la dirección postal. Estos solo deberían estar presentes si la “dirección postal” también está presente.

- “address-level4”:
El nivel administrativo más detallado, en direcciones que tienen cuatro niveles.

- “address-level3”:
El tercer nivel administrativo, en domicilios con al menos tres niveles administrativos.

- “address-level2”:
El segundo nivel administrativo, en domicilios con al menos dos de ellos. En países con dos niveles administrativos, normalmente sería la ciudad, pueblo, aldea u otra localidad en la que se encuentra la dirección.

- “address-level1”:
El primer nivel administrativo en la dirección. Esta suele ser la provincia en la que se encuentra la dirección. En los Estados Unidos, este sería el estado. En Suiza, el cantón. En el Reino Unido, la ciudad postal.

- “country”:
Código de país

- “country-name”:
Nombre del país

- “postal-code”:
Código postal o ZIP

- “cc-name”:
El nombre completo tal como está impreso o asociado con un instrumento de pago, como una tarjeta de crédito. Por lo general, se prefiere utilizar un campo de nombre completo en lugar de dividir el nombre en pedazos.

- “cc-given-name”:
Nombre (first name) en un instrumento de pago como una tarjeta de crédito.

- “cc-additional-name”:
Un segundo nombre (middle name) como se indica en un instrumento de pago o tarjeta de crédito.

- “cc-family-name”:
Un apellido, tal como figura en una tarjeta de crédito.

- “cc-number”:
Un número de tarjeta de crédito u otro número que identifique un método de pago, como un número de cuenta.

- “cc-exp”:
Una fecha de vencimiento del método de pago, generalmente en el formato “MM / YY” o “MM / YYYY”.

- “cc-exp-month”:
El mes en el que vence el método de pago

- “cc-exp-year”:
El año en el que vence el método de pago

- “cc-csc”:
El código de seguridad del instrumento de pago; en las tarjetas de crédito, este es el número de verificación de 3 dígitos que se encuentra en el reverso de la tarjeta.

- “cc-type”:
El tipo de instrumento de pago (como “Visa” o “Master Card”).

- “transaction-currency”:
La moneda en la que se realizará la transacción.

- “transaction-amount”:
La cantidad, dada en la moneda especificada por “transacción-moneda”, de la transacción, para un formulario de pago.

- “language”:
Un idioma preferido, dado como una etiqueta de idioma BCP 47 válida.

- “bday”:
Una fecha de nacimiento, como una fecha completa.

- “bday-day”:
El día del mes de una fecha de nacimiento.

- “bday-month”:
El mes de una fecha de nacimiento.

- “bday-year”:
El año de una fecha de nacimiento.
**
- “sex”:
Una identidad de género (como “Mujer”, “Fa’afafine”, “Hombre”), como texto de forma libre sin nuevas líneas

- “tel”:
Un número de teléfono completo, incluido el código del país. Si necesita dividir el número de teléfono en sus componentes, puede usar estos valores para esos campos:

1. “tel-country-code”:
   El código de país, como “1” para Estados Unidos, Canadá y otras áreas de América del Norte y partes del Caribe.

2. "tel-national"
   El número de teléfono completo sin el componente de código de país, incluido un prefijo interno del país. Para el número de teléfono “1-855-555-6502”, el valor de este campo sería “855-555-6502”

3. “tel-area-code”:
   El código de área, con cualquier prefijo interno del país aplicado si corresponde.

4. “tel-local”:
   El número de teléfono sin el código de país o área. Esto se puede dividir en dos partes, para los números de teléfono que tienen un número de intercambio y luego un número dentro del intercambio. Para el número de teléfono “555-6502”, utilice “tel-local-prefix” para “555” y “tel-local-suffix” para “6502”.

5. “tel-extension”:
   Un código de extensión de teléfono dentro del número de teléfono, como un número de habitación o suite en un hotel o una extensión de oficina en una empresa.

- “impp”:
Una URL para un punto final de protocolo de mensajería instantánea, como “xmpp: [email protected]”.

- “url”:
Una URL, como una página de inicio o la dirección del sitio web de la empresa, según corresponda, dado el contexto de los otros campos del formulario.

- “photo”:
La URL de una imagen que representa a la persona, la empresa o la información de contacto proporcionada en los otros campos del formulario.

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

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.

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

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

jajaja cuando utiliza el auto completado censuran el correo y código postal en los inputs pero se muestra en la URL al enviar jajaja

Para los que ya manejen JavaScript y quieran hacer un selector de país (Tema de la próxima clase) con todos los países sin ponerlos a mano dejo este API que te entrega país o capitales: http://country.io/data/

Este curso es tan completo💻

Autocomplete and Required:
.

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>

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

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

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

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

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 <[email protected]>",
  "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

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

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

Friendly reminder: amo Platzi 💜

¡SOY PARANOICO!

La opción de autoguardado que [email protected] 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😋

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

Autocompletar

The HTML autocomplete attribute

<input type="text" autocomplete="name">
<input type="text" autocomplete="email">
<input type="text" autocomplete="country">
<input type="text" autocomplete="postal-code">

Require

<input type="text" required>

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

Es muy importante no fiarnos de la validación de require ya que simplemente se puede quitar el atributo y listo ya no es obligatorio este campo. Por eso es bueno acompañar este tipo de validaciones con otras más seguras.

Anotaciones:

Notas de la clase

Lo se todo, lo veo todo, y voy a interferir.

Código por si alguien quiere:

<!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>Autocomplete</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lato:[email protected]&display=swap');
        form{
            font-size: 13px;
            font-family: 'Lato', sans-serif;
            background-color: aquamarine;
            padding: 40px 20px 0px;
            border-radius: 20px;
            margin: 30px;
            display: grid;
            grid-template-columns: repeat(5, 0.5fr);
            grid-gap: 0px;
            grid-auto-rows: minmax(80px, auto);
        }
        #nombre{
            grid-column: 1;
            grid-row: 1;
        }
        #correo{
            grid-column: 2 ;
            grid-row: 1 ;
        }
        #país{
            grid-column: 3 ;
            grid-row: 1 ;
        }
        #cp{
            grid-column: 4 ;
            grid-row: 1 ;
        }
        #submit{
            grid-column: 5;
            grid-row: 1;
        }
        figure img{
            display:block;
            margin:auto;
            width: 600px;
            height: 350px;
            align-items: center;
        }
    </style>
</head>
<body>
    <form action="">
    <label for="nombre">
        <span>¿Tu nombre?</span>
        <input type="text" id="nombre" name="nombre" autocomplete="name" required>
    </label>
    <label for="correo">
        <span>¿Tu correo?</span>
        <input type="email" id="correo" name="correo" autocomplete="email" required>
    </label>
    <label for="país">
        <span>¿Tu país de residencia?</span>
        <input type="text" id="país" name="país" autocomplete="country-name" required>
    </label>
    <label for="cp">
        <span>¿Tu código postal?</span>
        <input type="text" id="cp" name="cp" autocomplete="postal-code" required>
    </label>
    <label for="submit">
        <input type="submit" id="submit">
    </label>
    </form>
<figure>
        <img src="/Curso Definitivo de HTML y CSS/image/watcher.jpg" alt="uatu">
    </figure>
</body>
</html>

Es necesario, o tiene alguna utilidad mantener el input dentro del label, y usar un span para el nombre del input?, yo lo utilizo de la siguiente forma:

<form>
	<label for="nombre">Nombre</label>
   	<input type="text" name="nombre" id="nombre">
</form>

Igualmente el label esta vinculado al input por que comparten el mismo valor en el for="" e id="", y me ahorro tener que usar un span.

A mi no me funciona tan bien el atributo autocomplete, se supone que al ponerlo te debe hacer un autocompletado de la información que usas en otras páginas, pero no me funciona espero que alguien me pueda ayudar. Comparto mi código para que me digan si lo hice bien o si falle en algo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario</title>
</head>
<body>
    <main>
        <form action="">
            <label for="nombre">
                <span>¿Cuál es tu nombre?</span>
                <input type="text" id="nombre" name="nombre" autocomplete="name" required>
            </label>
            <label for="correo">
                <span>¿Cuál es tu correo?</span>
                <input type="email" id="correo" name="correo" autocomplete="email" required>
            </label>
            <label for="pais">
                <span>¿De que país nos escribes?</span>
                <input type="text" id="pais" name="pais" autocomplete="country" required>
            </label>
            <label for="cp">
                <span>Código postal</span>
                <input type="text" id="cp" name="cp" autocomplete="postal-code" required>
            </label>
            <input type="submit">
        </form>
    </main>
</body>
</html>```

Resumen

• El orden para anidar un formulario es form>label>span e input. El mismo valor que va en for=”” es el de id=””. Esto permite conectar el casillero con el espacio del formulario.

• span contiene el texto que indica al usuario con qué información completar.

• autocomplete ayuda al usuario a rellenar los casilleros con datos que usualmente usa. Esto es importante ya que tenemos que hacer la ingesta de datos lo más sencilla para el usuario.

• require indica que llenar ese casillero es obligatorio para poder avanzar. Debemos ser juiciosos con los datos que más nos importan y cuáles son opcionales.

Como puedo ejecutar rapídamente el código en firefox o chrome con un atajo de teclado, o con el click derecho como hace en el video?

genial yo ya sabia HTML pero ahora me siento como si fuera super profesional no les pasa

Nose porque pero a mi me sale que la clase de calendar y esta de Autocomplete y requiere es el mismo video a ustedes les pasa?

Aplicando un poco lo aprendido

![](

Para escribir un texto, que se repita en varias líneas de código, pulsen la tecla ctrl y vayan haciendo click en el lugar donde quieran repetir la misma palabra y después escríbanla.

Se está profundizando muy bien el tema ✌

Simplemente uno de los mejores profesores de Platzi, adoro este curso y como lo esta desenvolviendo.

Están desordenados los videos. Primero va el numero 17, luego el 18 y luego este el 16. Después continúan con el 19. Deberían arreglarlo

Les presento la siguiente etiqueta:

<br> <!--Salto de Linea-->

De nada 😃

Autocomplete y require

• Autocomplete te ayudara a completar datos dentro dentro de un formulario que ya hayas llenado anteriormente como nombre, código posta, correo, etc.
• Require funciona para solicitarle al usuario un dato que no lleno de forma correcta o que hace falta para que la información pueda ser enviada.

<main>
	<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="text" name="cp" id="cp" autocomplete="postal-code" required />
	</label>
	</form>
</main>

autocomplete usa lo que el usuario ya ha introducido anteriormente para que el llenado sea más rápido. el uso de ese argumento depende del tipo de información.

No me estaba funcionando el autocomplete en Chrome y me di cuenta que tenía la configuración de autocomplete apagada.

La puse en ON, y a partir de ahí me está autocompletando.

Si conocen otro motivo por el cuál dejen de funcionar y cómo reactivar los autocomplete, sería bueno saberlo.

Saludo!

Required
Al colocar este atributo el submit no funcionará si el campo indicado no está completado

Autocomplete
Este atributo le indica al navegador que le puede ayudar al usuario a completar indicando el tipo de input que estamos solicitando

REQUIRED

16. Mis apuntes sobre: “Autocomplete y require”

Podemos usar los atributos autocomplete y required, para que permita al navegador autocompletar información, y señalar qué campos son obligatorios de llenarse para poder enviar.

Les comparto el código de la clase:

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📅 myCalendarv2.com</title>
</head>
<body>
    <main>
        <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>¿Cuál es tu país?</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="text" name="cp" id="cp" autocomplete="postal-code" required>
                <input type="submit">
            </label>
        </form>
    </main>
</body>
</html>

Pude aprender dos cosas de esta clase:

1. Es muy útil para nosotros como programadores el hacer esto de autocompletar, ya que la experiencia del usuario es mejor y se gasta menos tiempo en llenar un formulario
2. La cantidad de información que el navegador tiene acerca de cada uno de nosotros es muchísima, cosa que llega hasta dar miedo, ya que aunque los navegadores no publican esa información, la venden a otras empresas o con los cookies de terceros.

Nada que ver con lo que estudie, me cambiaré de profesión AHORA MISMO
Lo recomiendo
https://platzi.com/clases/taller-carrera/

Si quisieran hacerlo a la inversa y que no se completen los campos la opcion a colocar seria la siguiente:

<input type="text" name="campo" autocomplete="off">

📌 require es un atributo booleano que permite establecer un campo obligatorio en un formulario.

Para todos los atributos input y sus valores:
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input

Para poner tildes ´ a tus preguntas, puedes usar esta entidad, acute :

á = á
é = é
í = í
ó = ó
ú = ú

<span>¿Cu&aacute;al es tu nombre?</span>
<span>¿Cu&aacute;l es tu correo?</span>
<span>¿En que pa&iacute;s vives?</span>
<span>¿Cual es tu c&oacute;digo postal?</span>

🔗 Link a todas las entidades

El atributo autocomplete tambien se puede usar en la etiqueta form, con los valores on u off, para apagar o encender el autocompletado en todos los elementos input dentro del form. Ejemplo:

<form action="" autocomplete="off">
	<label for="nombre">
		<input type="text" name="nombre" id="nombre" required>
	</label>
	<input type="submit">
</form>

Agregado: Formulario de auto-completado y campos obligatorios “required”

<!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>
    <section>
        <figure>
            <h2>Formulario Calendar</h2>
            <form action="">
                <label for="hora">
                    <span>Horario de Viaje</span>
                    <input type="time" id=hora name=hora>
                </label>
                <label for="dia">
                    <span>Día del Viaje</span>
                    <input type="date" id=dia name=dia>
                </label>
                <label for="semana">
                    <span>Semana del Viaje</span>
                    <input type="week" id=semana name=semana>
                </label>
                <label for="mes">
                    <span>Mes de Viaje</span>
                    <input type="month" id=mes name=mes>
                </label>
                <input type="submit">
            </form>
        </figure>
    </section>
    <section>
        <figure>
            <h2>Formulario Calendar Completo</h2>
            <form action="">
                <label for="calendario">
                    <span>Calendario Completo</span>
                    <input type="datetime-local" id="calendario" name="calendario">
                </label>
                <input type="submit" value="Me voy de viaje">
            </form>
        </figure>
    </section>
    <section>
        <figure>
            <h2>Formulario con Autocompletado:</h2>
            <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 email?</span>
                    <input type="email" name="correo" id="correo" autocomplete="email" required>
                </label>
                <label for="pais">
                    <span>¿Cuál es tu país?</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="text" name="cp" id="cp" autocomplete="postal-code" required>
                </label>
                <input type="submit">
            </form>
        </figure>
    </section>
    </main>
    <footer>
        <p>Creado con amor por Orlando Altamiranda con ayuda del Team Platzi</p>
    </footer>
</body>
</html>


<!-- Comandos para convertir el código en comentarios:
    Shift + Alt + A
    CTLR + K + U
    CTLR + }
-->

¡¡¡Estas clases me encantan!!!

así quedo el mio le puse un poco de css aun me falta aprender xd

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Consejo

Crea multiples cursores en tu editor de codigo

El profe Diego coloca un espacio + slash al final de sus etiquetas “self-closed” (los tags HTMl que no tienen etiqueta de cierre) de esta manera:

<input type="text" />

Se usa para mejorar la legibilidad del codigo creando uniformidad y discriminacion entre el inicio y el termino de las etiquetas.
El boilerplate de HTML (la estructura creada usando ! + TAB) en VSCode no agrega esos slashs en las etiquetas self closed y debemos hacerlo manualmente. Podemos usar multiples cursores para editar nuestro documento en multiples lugares al mismo tiempo.

¿Como crear multiples cursores en VSCode?

Presiona la tecla ALT y haz click izquierdo en los lugares donde quieres agregar un cursor adicional en el editor. Suelta la tecla ALT y estas [email protected] para usar toda la funcionalidad de tu teclado en multiples lugares de tu editor de codigo ¡Al mismo tiempo!
Pulsa la tecla ESC para eliminar los cursores adicionales.

Si conoces otros trucos de Visual Studio Code compartelos en comentarios!

Estos cursos están muy complicados para una persona como yo que empiezo desde ceros

Es **redundante **usar el atributo for en el label y el atributo id en el input, porque el label está enlazado estructuralmente con el span y el input, solo se necesita que dicho spane input estén dentro del label.

CURSO COMPLETO

Existen una gran variedad de campos para hacer formularios. Entre los que vimos en clase están los campos de texto, hora, fecha, semana y mes! El orden en la página vendrá después, por ahora los podemos agregar de una forma muy profesional de la siguiente forma…

<!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>Clase calendario</title>
</head>
<body>
    <!-- <form action="#">
        <label for="hora">
            <span>Hora:</span>
            <input type="time" name="hora" id="hora">
        </label>
        <label for="dia">
            <span>Día:</span>
            <input type="date" name="dia" id="dia">
        </label>
        <label for="semana">
            <span>Semana:</span>
            <input type="week" name="semana" id="semana">
        </label>
        <label for="mes">
            <span>Mes:</span>
            <input type="month" name="mes" id="mes">
        </label>
        <input type="submit"> -->
        <!-- Esto es un comentario -->
        <label for="calendario">
            <span>Calendario preciso:</span>
            <input type="datetime-local" name="calendario" id="calendario">
        </label>
        <input type="submit" value="Mándalo!">
    </form> 
</body>
</html>

Como podemos ver, los formularios deben estar contenidos en la etiqueta form, dentro de esta, cada entrada al formulario debería estar contenida de un label, que indicará lo que se ingresará en el campo en cuestión, para probablemente después añadir estilos específicos a los textos del formulario, cada uno de estos lo encerramos en un span, posteriormente viene el input. Notemos que el label de la entrada en especifico lleva el for que indica a cual entrada pertenece, por lo que su valor deberá ser la misma que el nombre del input, el id se puede dejar para posteriormente dar estilo con css a esa entidad en específico.

<label for="dia">
            <span>Día:</span>
            <input type="date" name="dia" id="dia">
</label>

Autocomplete es un atributo de las etiquetas de formulario que permiten que estos sean más amigables para los usuarios, permitiendo que seleccione los datos frecuentes del mismo tipo que ya haya rellenado en otros formularios en el
mismo navegado.
Required por otra parte especifica que un campo debe ser llenado obligatoriamente.
Ambos son atributos que van dentro de la etiqueta, por ejemplo:

<label for="correo">
            <span>¿Cuál es tu correo?</span>
            <input type="email" name="correo" id="correo" autocomplete="email" required>
        </label>

No hay autocompletado para todos los tipos de datos, por o que lo conviene consultar antes si existe para el dato en específico que busquemos solicitar en nuestro formulario.

Increíble lo que he aprendido con este curso, es genial y me siento muy contenta

Podemos cambiar el mensaje del input agregándole un "value"
por ejemplo:

<input type="submit" value="Enviar datos">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
</head>
<html>
<body>
    <form action="">
        <label for="username">Log In<br><br>
            <input type="text" name="username" id="username" placeholder="Your Name" autocomplete="username" required /><br><br>
        </label>
        <label for="password">
            <input type="password" name="password" id="password" placeholder="Password" autocomplete="email" required /><br><br>
        </label>
        <label for="country">
            <input type="text" name="country" id="country" placeholder="Country" autocomplete="country" required /><br><br>
        </label>
        <label for="cp">
            <input type="text" name="cp" id="cp" placeholder="Postal Code" autocomplete="postal-code" required /><br><br>
        </label>
        <input type="submit" />
    </form>
</body>
</html>

Es como si ya hubiera un lenguaje de fondo

Recuerden que para ver el autocomplete deben tenerlo habilitado en el navegador (Ej en chrome: configuración > autocompletar). En términos de seguridad informática no es buena idea, pero pueden habilitarlo para estas clases.

no me auto completa que podria ser?? y como dijo el profe tengo vinculada mi cuenta de google con el navegadory tambien he realizado compras en tiendas como amazon o mercado libre que podria ser?? y por cierto copie el codigo disponible de archivos y enlaces pero tampoco me funciona help???

<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“desciption” content=“Esta página te mostrará lo que se hizo en la clase 18”>
<meta name=“robots” content=“index,follow”>
<title>Me dio hambrita</title>
<meta name=“viewport” content=“width=device-width, inictial-scale=1.0”>
</head>

<body>
    <main>
        <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é pais 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="text" name="cp" id="cp" autocomplete="postal-code" required>
            </label>
            <input type="submit">
        </form>
    </main>
</body>

<!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">
        <meta name="description" content="x"/>
        <meta name="robots" content="index, follow"/>
        <title>Formularios</title>
    </head>
    <body>
        <main>
            <form action="">
                <!-- ↑ Esta etiqueta es para generar formularios-->
                    <label for="nombre">
                        <!-- ↑ Es el contenedor de la linea del formulario-->
                        <span>Cual es tu nombre?</span>
                        <!-- ↑ Esta etiqueta es para escribir texto-->
                        <input type="text" name="nombre" id="nombre" placeholder="Tu nombre" autocomplete="name" required/><br/><br/>
                        <!-- ↑ El input es para crear cajas de formularios, botones etc, con el atributo "type" espesificas el tipo de informacion que debe entrar, "id" es para identificar espedificamente ese input y "placeholder" es para dar ejemplos al usuario de lo que debe escribir-->
                        <!-- ↑ existe un atributo llamado "required" es para hacer obligatorio un campo.-->
                    </label>
                    <label for="correo">
                        <span>Cual es tu email?</span>
                        <input type="email" name="correo" id="correo" placeholder="Ejem. [email protected]" autocomplete="email" required/><br/><br/>
                    </label>
                    <label for="pais">
                        <span>Cual es tu pais de recidencia?</span>
                        <input type="text" name="pais" id="pais" placeholder="Ejem. Land of Ooo" autocomplete="country" required/><br/><br/>
                    </label>
                    <label for="cp">
                        <span>Cual es tu codigo postal?</span>
                        <input type="number" name="cp" id="cp" placeholder="Ejem. 12345" autocomplete="postal-code" required/><br/><br/>
                    </label>
                    <label for="inicioPlatzi">
                        <span>Que dia iniciaste en platzi??</span>
                        <input type="date" id="inicioPlatzi" /><br/><br/>
                    </label>
                    <label for="horario">
                        <span>En que horario estudias?</span>
                        <input type="time" id="horario" /> <br/><br/>
                    </label>
                    <input type="submit">
                </form>
        </main>
    </body>
</html>

Información resumida de esta clase
#EstudiantesDePlatzi

• Importante que el proyecto que creamos sea amigable con el usuario

• El tipo de dato email nos ayuda a verificar si lo que se está escribiendo es en realidad un email, ya que verifica dentro de la cadena de texto si hay un @ y un “.”

• Dentro del input vienen los atributos que nos ayudan reteniendo la información para ser enviada

• El autocompletado ayuda con la experiencia del usuario

• El navegador tiene herramientas como los atributos que hacen más fácil la tarea para nosotros como desarrolladores y así mismo al usuario

RESUMEN CLASE 18:
AUTOCOMPLETE Y REQUIRE

<!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>Calendario</title>
</head>
<body>
    <form action="">
        <label for="nombre">
            <span>¿Cual es tu nombre?</span>
            <input type="text" name="nombre" id="nombre" autocomplete="name" required>
        </label>
        <label for="correo">
            <span>¿Cual es tu correo?</span>
            <input type="email" name="correo" id="correo" autocomplete="email" required>
        </label>
        <label for="pais">
            <span>¿En que país vives?</span>
            <input type="text" name="pais" id="pais" autocomplete="country" required>
        </label>
        <label for="cp">
            <span>¿Cual es tu código postal?</span>
            <input type="text" name="cp" id="cp" autocomplete="postal-code" required>
        </label>
        <input type="submit">
    </form>
</body>
</html>

etiqueta:
el usuario utiliza navegador todo el tiempo sabe que el usuario hace pago , le llega tarjeta de crédito para que la utilizan , utiliza correo.

• información que el usuario desea compartir
• el usuario debe llenar todo el formulario de seguridad

Increible, ya veo como funciona el autocomplete y es en html

El correo que estaban censurando para que no se viera se puede ver facilmente en la barra de direcciones jaja Ojo.

muy bueno

este profe, es directo, concreto, directo al punto… me encanta

Al principio me parecio complicado lo de los atributos y etiquetas pero ahorita ya le estoy agarrando la onda y si esta sencillo , con las buenas practicas y el thml semantico.

<!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>Document</title>
</head>
<body>
    <main>
        <form action="">
            <label for="nombre">
                <span>Cual es tu nombre?</span>
                <input type="text" name="nombre "id="nombre" autocomplete="name" required>
            </label>
            <label for="correo">
                <span>Cual es tu correo?</span>
                <input type="email" name="correo" id="nombre" autocomplete="email" required>
            </label>
            <label for="pais">
                <span>Cual es tu pais?</span>
                <input type="text" name="pais" id="pais" autocomplete="country" required> <!--El atributo required evita que se envie informacion del formulario si el input esta vacio, es decir que hasta que no se llene ese campo no se puede enviar la informacion-->
            </label>
            <label for="cp">
                <span>Cual es tu codigo postal?</span>
                <input type="text" name="cp" id="cp" autocomplete="postal-code" required> <!--El atribuo autocomplete se usa para que el navegador auto complete los campos con informacion tomada en otros forms-->
            </label>
            <input type="submit">
        </form>
        
    </main>
</body>
</html>

Yo pienso que el atributo autocomplete puede generar incomodidad en el usuario que no comprende que es el navegador el que tiene acceso a esos datos y no el sitio web o la empresa en una base de datos privada, me gustaría leer sus opiniones sobre eso.

El enlace que esta en los aportes para que ya no. funciona.
Aquí les dejo este enlace que si me sirvió
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Así vamos…

jejejejej en el minuto 9:16 se ve el correo de el profe diego

Mi proyecto ya tenia autocomplete por defecto sin tener que agregarle ese atributo 😮

Tengo que dar click sobre cada casilla para que me salga la información, como Diego lo hizo (solo aplastando la infomación de una casilla) se lo puede hacer solo en mac?(porque el trabajó ahí)

Pd: Intenté con varios navegadores, tuve que ahcer lo mismo en todos

El atributo HTML autocompletepermite a los desarrolladores web especificar qué permiso tiene el agente de usuario para proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como orientación para el navegador sobre el tipo de información que se espera en el campo.

Está disponible en <input>elementos que toman un valor de texto o numérico como entrada, <textarea>elementos, <select>elementos y <form>elementos.

Atajos de teclado para copiar líneas de código de manera rápida:

**Ctrl+X **= Cut line (empty selection)
Ctrl+C = Copy line (empty selection)
Alt+ ↑ / ↓ = Move line up/down
Shift+Alt + ↓ / ↑ = Copy line up/down

1. Autocomplete: Usado para poder autocompletar los campos y poder hacerle la vida más fácil al usuario
2. Requiere: Usado cuando se requiere que obligatoriamente algún campo del formulario deba ser rellenado

Al final si se ve el código postal…

excelente clase =)

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario</title>
    <style>
        body {
        background-color: #b28c4e;
        color: white;
        font-family: "Open Sans";
        }
   
    </style>
    <link rel="stylesheet" href="estilos.css" />
</head>

<body> 
<h1>Formulario JCOR</h1>
    <div id="container">
        <div id="cabecera">
            <img id="logo" src="tube.png" />
            Formulario
            <span id="tagline">⏰Blog de Juan Carlos⏰ </span>
        </div>
    <div id="post">
<form action="">
    <label for="nombre">
        <span>¿Cuál es tu nombre?</span>
        <input type="text" id="nombre" placeholder="Tu nombre" required>
    </label><br>

    <label for="inicio-platzi">
        <span>¿Que día comenzaste en Platzi?</span>
        <input type="date" id="inicio-platzi">
    </label><br>
    <label for="horario">
        <span>En que horario estudias?</span>
        <input type="time" id="horario">
    </label>
</form>
    </div>
    </div>
</body>

</html>

El enlace en español parece no estar disponible, aqui dejo el de ingles
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

yo hize mi formulario de registro asi, tambien lo hize en vertical usando la etiqueta br, pero no sé, si asi sea.

Hacer la vida de los usuarios mas facil con el autocomplete, para que vaya llenado el formulario de una forma mas rápida y el require, para asegurar que la información que se necesite de forma obligatoria, sea llenada por el usuario.

Autocomplete y require
Autcomplete

• usar type
• autocomplete=“on/off”

Required