Skip to content
HTML

HTML5 Form - Nuevos tipos y atributos

05 HTML5 Form - Nuevos tipos y atributos

Section titled “05 HTML5 Form - Nuevos tipos y atributos”

HTML5 incorpora mejoras significativas para los formularios. Aquí tienes las más importantes que vamos a practicar:

🆕 Novedades de HTML5 en formularios:

Section titled “🆕 Novedades de HTML5 en formularios:”

1. Placeholders

Section titled “1. Placeholders”

Los marcadores de posición (placeholder) muestran un texto de ejemplo dentro del input que desaparece al escribir. Ayudan al usuario a entender qué debe ingresar.

2. Nuevos tipos de input

Section titled “2. Nuevos tipos de input”
  • type="email": Valida automáticamente que se ingrese un correo electrónico con formato válido (debe contener @ y un dominio).
  • type="tel": Para números de teléfono. No valida automáticamente (porque hay muchos formatos), pero en dispositivos móviles muestra un teclado numérico.
  • type="url": Valida automáticamente que se ingrese una URL con formato válido (debe comenzar con http:// o https://).

3. Atributo required

Section titled “3. Atributo required”

Hace que un campo sea obligatorio. El formulario no se enviará hasta que ese campo esté completo.

4. Atributo autofocus

Section titled “4. Atributo autofocus”

Enfoca automáticamente el cursor en ese input cuando la página se carga. Solo se puede aplicar a un input por formulario.

📝 Instrucciones:

Section titled “📝 Instrucciones:”

Crea un formulario (<form>) que incluya los siguientes campos en este orden:

Campos obligatorios:

Section titled “Campos obligatorios:”

  1. Correo electrónico

    • Tipo: email
    • Placeholder: “tu@email.com”
    • Atributos: required + autofocus

  2. Teléfono

    • Tipo: tel
    • Placeholder: “123-456-7890”

  3. Sitio web

Campos adicionales (opcionales pero recomendados):

Section titled “Campos adicionales (opcionales pero recomendados):”

  1. Nombre completo

    • Tipo: text
    • Placeholder: “Juan Pérez”

  2. Mensaje

    • Tipo: textarea
    • Placeholder: “Escribe tu mensaje aquí…”

  3. Botón de envío

    • Tipo: submit
    • Valor: “Enviar formulario”

✅ Requisitos específicos:

Section titled “✅ Requisitos específicos:”
  • Usa type="email" para el campo de correo electrónico
  • Usa type="tel" para el campo de teléfono
  • Usa type="url" para el campo de sitio web
  • Aplica required SOLO al campo de correo electrónico
  • Aplica autofocus SOLO al campo de correo electrónico
  • Todos los inputs deben tener su correspondiente <label>
  • Todos los inputs deben tener un placeholder descriptivo

💡 Pistas:

Section titled “💡 Pistas:”
  • El autofocus solo funciona en el primer input donde se aplica. Si lo pones en varios, solo funcionará el último.
  • Los navegadores modernos muestran mensajes de validación automáticos para email, url y required.
  • El type="tel" no valida el formato, solo muestra un teclado numérico en móviles.
  • Puedes combinar required con email para que sea obligatorio Y tenga formato de correo válido.

🧪 Prueba tu formulario:

Section titled “🧪 Prueba tu formulario:”
  1. Prueba la validación del email: Intenta enviar sin el @ → el navegador te mostrará un error.
  2. Prueba el campo obligatorio: Intenta enviar sin completar el email → el navegador te lo impedirá.
  3. Prueba el autofocus: Recarga la página → el cursor debería aparecer automáticamente en el campo de email.
  4. Prueba la URL: Escribe una URL sin http:// → el navegador te sugerirá el formato correcto.

📎 Nota adicional:

Section titled “📎 Nota adicional:”

Los campos tel y url no son obligatorios en este ejercicio, pero el email sí debe serlo para practicar el uso de required.