Los formularios nos permiten obtener información del usuario.
El resultado puede ser una búsqueda en una base de datos o el envío del contenido por e-mail.

Estructura básica

<form>
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" placeholder="Introduce tu nombre">
    <button>Enviar</button>
</form>
        

<form>

La etiqueta Form se utiliza para crear un formulario.

Puede contener los siguientes atributos que nos van a permitir definir su comportamiento:

• action="send.php": Permite indicar la URL a la que se enviarán los datos.
• name="MiForm": Especificamos el nombre del formulario.
• autocomplete="on/off": Autocompletar campos de forma automática
• method="get/post": Define como enviará los datos.

<label>

Representa la etiqueta de un elemento de formulario.

Siempre debemos asociarlo al control al que corresponde. Podemo hacerlo mediante la el atributo for (que tiene que ser idéntico al id del elemento que queremos etiquetar, o ubicando el elemento dentro del label

<form>
/* Asociacion por atributo for */
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" >

/* Asociacion por anidación */
    <label>
        Nombre:
        <input type="text" id="nombre" >
    </label>
</form>
        

Elemento <input>

<input>

Es el elemento básico de un formulario.

Su funcionalidad varía dependiendo del valor de su atributo "type".

Si omitimos el valor de "type" por defecto es "text".

<form>
  <input type="text" value="nombre"/>
</form>
        

Atributo placeholder

El elemento <input type="text"> puede disponer de otros atributos como por ejemplo placeholder.

En este caso nos permite añadir un contenido predefinido.

Este atributo sólo puede contener texto.

<form>
    <input type="text" placeholder="Introduce tu nombre" />
</form>
        

Podemos cambiar el estilo de placeholder mediante los siguientes selectores css.

Atributo autofocus

Mediante autofocus el cursor se situa de forma automática en el elemento input al cargar la página.

<form>
    <input type="text" autofocus/>
</form>
        

Ejemplo de autofocus con jQuery fallBack.

Atributo required

Con required obligamos al usuario a introducir un valor en este campo.

<form>
    <input type="text" placeholder="Introduce tu nombre" required/>
</form>
        

Podemos cambiar el estilo de placeholder mediante los siguientes selectores css.

<input type="password">

Oculta el valor del campo contraseña mientras se escribe

<form>
    <input type="password" />
</form>
        

<input type="file">

Permite especificar un tipo de archivo concreto para adjuntar en el envío del formulario.

<form>
    <input type="file" name="imagen" accept="image/*">
</form>
        

<input type="submit">

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

<input type="checkbox">

Este elemento permite 2 estados: Marcado/desmarcado (true/false)

<form>
    <label>
        <input type="checkbox" />
        Opción 1
    </label>
</form>
        

Opciones de styling para checkbox

<input type="radio">

Este elemento permite 2 estados Marcado/desmarcado (true/false) pero limita al usuario a escoger entre un número limitado de opciones:

<form>
    <input type="radio" name="sistemaOperativo" value="macosx"/>
    <input type="radio" name="sistemaOperativo" value="linux"/>
    <input type="radio" name="sistemaOperativo" value="windows"/>
</form>
        

Opciones de styling para checkbox

Nuevos elementos incluidos en HTML5

<input type="color">

Permite especificar un color.

<form>
    <input type="color" value="#c0ffee">
</form>
        

Selecciona un color:

El color seleccionado es:

<input type="date">

Permite especificar una fecha con un calendario desplegable.
Además podemos restringir valores máximos y mínimos para una fecha concreta.

<form>
    <input type="date" name="fechaSalida" step="1"
    min="2015-01-26" max="2015-12-31" value="2015-01-26">
</form>
        

<input type="email">

Validación automática de formato e-mail.
En dispositivos móviles el teclado muestra la @.

<form>
    <input type="email" name="userEmail">
</form>
        

<input type="number">

Especificamos campos para introducir exclusivamente valores numéricos.

Podemos realizar operaciones aritméticas.

<form>
    <input type="number" name="dividendo">
</form>
        

Ejemplo de operaciones aritméticas con "number"

<input type="range">

Permite al usuario seleccionar un valor numérico deslizando un control.

Podemos definir un valor mínimo, otro máximo y el valor de cada incremento.

<form>
    <input id="slider" type="range" min="100" max="500" step="10" />
</form>
        

Otros elementos de formulario

<select>

Especificamos el valor inicial del elemento.
Normalmente asignamos un valor con este atributo para elementos que no son editables por el usuario:

<form>
    <select name="text">
        <option value="MacOSX">Sistema operativo Mac</option>
        <option value="Linux">Sistema operativo Linux</option>
        <option value="Windows">Sistema operativo Windows</option>
    </select>
</form>
        

<textarea>

Definimos un area con una anchura y altura determinada para que el usuario pueda introducir sus comentarios.

<textarea name="message" rows="10" cols="30">
</textarea>
        

Características del elemento table

• Una tabla está formada por una sucesión de celdas dispuestas de forma ordenada en filas y columnas.
• Su función principal es la de tabular datos de forma sencilla.

    

        
Celda 1
        
Celda 2
        
Celda 3
    
        


        

Renderizado

El código del ejemplo anterior tendría la siguiente estructura:

Elementos de una tabla

• TABLE - Define las características genéricas de la tabla. (borde, ancho, etc)
• THEAD - Aportamos semántica al encabezado de la tabla.
• TBODY - Define el contenido principal de la tabla.
• TFOOT - Aportamos semántica al pie de la tabla.
• TR - Contenedor de celdas que definen una fila.
• TH - Celdas contenidas dentro de un THEAD.
• TD - Celdas contenidas dentro de un TBODY.
• CAPTION - Elemento designado para aportar una descripción semántica a la tabla.

Estructura HTML

En el siguiente ejemplo se pueden ver los diferentes elementos que componen una tabla:

ejemplo table

Elementos Col & Colgroup

Se trata de elementos "no contenedores" que permiten designar un conjunto de atributos comunes a todas las celdas que pertenezcan a una columna.

Combinando celdas y columnas

Atributo colspan

Una celda puede ser "extendida" en columnas mediante el atributo colspan. De esta forma podemos combinarlas según nos interese.

    
Celda 1 extendida en 2 columnas
    

        
Celda 1
        
Celda 3
    
        


        

ejemplo colspan

Atributo rowspan

De la misma manera, una celda también puede ser "extendida" en filas mediante rowspan.

    
Celda 1 extendida en 2 filas
    

        
Celda 1
        
Celda 2
    
 
    

        
Celda 4
    
 


        

ejemplo rowspan

Anidación de tablas

Las tablas pueden ser anidadas las unas dentro de las otras para representar estructuras de datos más complejas.

ejemplo anidación

Formateado CSS

• Por defecto una tabla ocupa sólo el espacio mínimo de los elementos que contiene
• Tiene su propio tipo de display:table
• Las celdas permiten alineación vertical
• Esta característica permitió utilizar tablas como layout cuendo la especificación CSS no estaba ampliamente extendida entre los diferentes navegadores.

Display: table

• Podemos asignar esta propiedad a un elemento de bloque para que se comporte como una tabla.
• El comportamiento de una tabla es similar a un elemento de bloque pero solo ocupa el ancho que necesita.

ejemplo display:table

Vertical align

Fijando una altura a una celda podemos utilizar la propiedad
vertical-align para alinear verticalmente el contenido

ejemplo vertical align

Tables en layouts

A pesar de que las tablas son consistentes e intuitivas no se recomienda utilizarlas como elementos de layout ya que trata a cualquier tipo de contenido como tabular data

Si necesitamos alguna característica exclusiva de tablas podemos crear la siguiente estructura que aporta el comportamiento de la tabla más la semántica del HTML:

ejemplo que muestra una de las ventajas de usar display:table

Tablas en email marketing

El único lugar en el que todavía se utilizan las tablas para crear layout es en e-mail marketing. El hecho de que los clientes de correo no hayan evolucionado al mismo ritmo que los navegadores web ha provocado que el único formato consistente entre los diferentes clientes de correo sea el formato tabla.