Html 5 – Capítulo 04 – Formularios y elementos semánticos

HTML5 permite la creación de experiencias interactivas y estructuras semánticas sólidas en las páginas web. En este manual, exploraremos las etiquetas <form>, <input>, <textarea> y elementos semánticos como <header>, <nav>, <article> y <footer>. Comprenderás cómo crear formularios interactivos y estructurar el contenido de manera significativa.

Etiqueta <form> – Formularios Interactivos

La etiqueta <form> se utiliza para crear formularios interactivos que permiten a los usuarios enviar información al servidor.

<form action="/procesar-formulario" method="POST">
    <!-- Campos del formulario -->
    <input type="text" name="nombre" placeholder="Nombre">
    <input type="email" name="email" placeholder="Correo Electrónico">
    <button type="submit">Enviar</button>
</form>

• action define la URL a la que se enviarán los datos del formulario.
• method especifica el método HTTP utilizado para enviar los datos (POST o GET).

Etiqueta <input> – Campos de Entrada

La etiqueta <input> se utiliza para crear diversos tipos de campos de entrada en formularios.

<input type="text" name="nombre" placeholder="Nombre">
<input type="email" name="email" placeholder="Correo Electrónico">
<input type="password" name="contrasena" placeholder="Contraseña">

• type define el tipo de campo (texto, correo electrónico, contraseña, etc.).
• name proporciona un nombre para identificar el campo.
• placeholder muestra un texto de ejemplo dentro del campo.

Etiqueta <textarea> – Áreas de Texto Multilínea

La etiqueta <textarea> se utiliza para crear áreas de texto multilínea.

<textarea name="comentarios" placeholder="Escribe tus comentarios"></textarea>

• Similar a <input>, pero útil para texto más largo como comentarios.

Elementos Semánticos: <header>, <nav>, <article>, <footer>

Estos elementos semánticos ayudan a estructurar y describir el contenido de manera significativa.

<header>
    <h1>Encabezado de la Página</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

<article>
    <h2>Artículo Importante</h2>
    <p>Contenido del artículo.</p>
</article>

<footer>
    <p>Derechos de autor © 2023</p>
</footer>

• <header>: Encabezado principal de la página.
• <nav>: Barra de navegación con enlaces.
• <article>: Contenido autónomo que puede ser reutilizado.
• <footer>: Pie de página con información adicional.

Ejercicios Resueltos

Ejercicio 1: Crear un Formulario de Registro

<form action="/registro" method="POST">
    <input type="text" name="nombre" placeholder="Nombre">
    <input type="email" name="email" placeholder="Correo Electrónico">
    <input type="password" name="contrasena" placeholder="Contraseña">
    <button type="submit">Registrarse</button>
</form>

Ejercicio 2: Estructura de una Página de Blog

<header>
    <h1>Mi Blog Personal</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Artículos</a></li>
        <li><a href="#">Acerca de</a></li>
    </ul>
</nav>

<article>
    <h2>Título del Artículo</h2>
    <p>Contenido del artículo...</p>
</article>

<footer>
    <p>© 2023 - Mi Blog Personal</p>
</footer>

Conclusión

La combinación de etiquetas como <form>, <input>, <textarea> y elementos semánticos como <header>, <nav>, <article>, <footer> en HTML5 permite crear formularios interactivos y estructurar contenido de manera semántica y significativa. Estos elementos mejoran la experiencia del usuario y facilitan la comprensión del contenido.