Creación de Formularios y Uso de Semántica en HTML5

---

Formularios y Controles de Entrada

Los formularios en HTML permiten a los usuarios enviar datos a un servidor. En HTML5, los formularios incluyen nuevos tipos de entrada, validación nativa y atributos avanzados.

Ejemplo de un Formulario HTML5

<form action="/submit" method="POST">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>

<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>

<label for="fecha">Fecha de nacimiento:</label>
<input type="date" id="fecha" name="fecha">

<input type="submit" value="Enviar">
</form>

Controles de Entrada en HTML5

HTML5 introduce varios tipos de entrada útiles para formularios. A continuación, se detallan algunos de los más comunes:

text: Entrada de texto

<input type="text" name="nombre" placeholder="Escribe tu nombre">

email: Valida automáticamente correos electrónicos.

<input type="email" name="email" placeholder="correo@ejemplo.com">

password: Campo para introducir contraseñas.

<input type="password" name="password" placeholder="Contraseña">

date: Selector de fecha.

<input type="date" name="fecha-nacimiento">

number: Entrada para números, con la posibilidad de limitar un rango.

<input type="number" name="edad" min="0" max="100">

tel: Campo para introducir números de teléfono.

<input type="tel" name="telefono" placeholder="123-456-7890">

url: Entrada para URLs.

<input type="url" name="sitio-web" placeholder="https://tusitio.com">

range: Barra deslizante que permite seleccionar un valor en un rango específico.

<input type="range" name="rango" min="0" max="100" step="10">

color: Selector de color que abre un control gráfico para elegir colores.

<input type="color" name="color-favorito">

checkbox: Casilla de verificación para seleccionar opciones múltiples.

<input type="checkbox" name="acepto-terminos"> Acepto los términos y condiciones

radio: Botones de opción para seleccionar una única opción de varias.

<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="femenino"> Femenino

file: Permite la carga de archivos desde el dispositivo del usuario.

<input type="file" name="archivo">

textarea: Campo para introducir textos largos o párrafos.

<textarea name="comentarios" rows="4" cols="50" placeholder="Escribe tu comentario aquí"></textarea>

select: Menú desplegable para seleccionar una opción de una lista.

<select name="pais">
  <option value="colombia">Colombia</option>
  <option value="mexico">México</option>
  <option value="espana">España</option>
</select>

Estos nuevos tipos de entrada hacen que la validación sea más sencilla y ofrecen una mejor experiencia de usuario al mostrar controles adecuados en dispositivos móviles.

Semántica en HTML5

HTML5 introdujo elementos semánticos que ayudan a estructurar correctamente el contenido de las páginas web. Estos elementos aportan significado al contenido, facilitando la accesibilidad y el SEO.

Ejemplo de Semántica en HTML5

<header>
  <h1>Bienvenido a Mi Sitio Web</h1>
</header>

<nav>
  <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#sobre-mi">Sobre Mí</a></li>
  </ul>
</nav>

<main>
<article>
  <h2>Artículo Principal</h2>
  <p>Este es el contenido principal de la página.</p>
</article>
</main>

<footer>
  <p>&copy; 2024 Mi Sitio Web</p>
</footer>

El uso correcto de etiquetas semánticas facilita la organización del contenido y mejora la accesibilidad para lectores de pantalla y motores de búsqueda.