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.

Tablas en HTML (1)

 La estructura básicas para generar una tabla con HTML es la siguiente:

<table>

    <thead>

        <tr>

            <th>dato1</th>

            <th>dato2</th>

            <th>dato3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>dato1</td>

            <td>dato2</td>

            <td>dato3</td>

        </tr>

        <tr>

            <td>dato4</td>

            <td>dato5</td>

            <td>dato6</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>dato7</td>

            <td>dato8</td>

            <td>dato9</td>

        </tr>

    </tfoot>

    <caption>Aquí debería ir una descripción de los datos de esta tabla</caption>

<table/>

El resultado de estas lineas de HTML es:

Aquí debería ir una descripción de los datos de esta tabla

dato1	dato2	dato3
dato1	dato2	dato3
dato4	dato5	dato6
dato7	dato8	dato9

Aplicando un poco de estilo en la etiqueta table podemos agregar los bordes.

<table border="1">...

Dejando nuestra tabla con este aspecto básico:

Aquí debería ir una descripción de los datos de esta tabla

dato1	dato2	dato3
dato1	dato2	dato3
dato4	dato5	dato6
dato7	dato8	dato9

El resultado es básico y debemos hacer mejoras a través de CSS, por ejemplo:

Aquí debería ir una descripción de los datos de esta tabla

Encabezado 1	Encabezado 2	Encabezado 3
dato1	dato2	dato3 con más contenido
dato4 con más contenido	dato5 con más contenido	dato6
dato7	dato8	dato9 con más contenido