Formularios HTML (1)

El código para generar, por ejemplo un formulario de comentarios, es el siguiente:

<form action="/my-handling-form-page" method="post">

 <ul>

  <li>

    <label for="name">Nombre:</label>

    <input type="text" id="name" name="user_name" />

  </li>

  <li>

    <label for="mail">Correo electrónico:</label>

    <input type="email" id="mail" name="user_email" />

  </li>

  <li>

    <label for="msg">Mensaje:</label>

    <textarea id="msg" name="user_message"></textarea>

  </li>

  </ul>

</form>

<button>Enviar</button>

Lo cual tendría el siguiente aspecto:

• Nombre:
• Correo electrónico:
• Mensaje:

En HTML5 no obstante tenemos un método mas practico en el que no es necesario recurrir a las etiquetas de lista para generar orden en los elementos de un formulario HTML.

<form>

    <fieldset>

        <legend>Datos del formulario</legend>

        <label for="namefor">Nombre</label>

            <input type="text" id="namefor"><br>

        <label for="emailfor">Email</label>

            <input type="email" id="emailfor"><br>

        <label for="comentariofor">Comentario</label>

            <textarea name="comentariofor"></textarea>

        <button type="sumit">Enviar</button>

    </fieldset>

</form>

Código que debería pintarlo así el navegador:

Datos del formulario

Nombre
Email
Comentario

La etiqueta <legend> crea un marco con titulo para toda el área del formulario. Para cada etiqueta <label> corresponde un <imput>, indicando esta correspondencia con atributos del mismo nombre: <label for="namefor"> y <imput id="namefor">. Este contenido lo agrupamos con la etiqueta <fieldset>.

Con esto tenemos un buen comienzo para entender los formularios, que es una de las funcionalidades mas potentes de HTML5.