Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

HTML5 III

Formularios

Las novedades de HTML 5 en los formularios están en las etiquetas input las cuales incluyen nuevos atributos, así como nuevos valores para el atributo type.

Estos elementos no están disponibles todavía en todos los navegadores actuales. Esperemos que más pronto que tarde los vayan incorporando para poder utilizar HTML 5 como lenguaje estándar de la web.

Veamos ahora los nuevos atributos para input.

Atributos para formularios

Atributo placeholder

El atributo placeholder muestra un texto que aparece por defecto en las etiquetas input. La diferencia con el atributo value es que el texto desaparece cuando se selecciona el elemento, y además aparece en un color gris atenuado.

Por ejemplo, escribamos la siguiente línea dentro de un formulario:

Nombre: <input type="text" placeholder="Escribe tu nombre" />

Si estás utilizando un navegador que admita este elemento (en sus últimas versiones, todos excepto Internet Explorer), lo verás como en la siguiente línea:

Nombre:

Atributo autofocus

En las etiquetas input pone el cursor o foco en el elemento que lleva este atributo. Sólo puede haber uno por página, ya que si ponemos más de uno el foco se pondrá en el primero de ellos, ignorando el resto.

Al igual que el anterior funciona ya en las nuevas versiones de todos los navegadores excepto Internet Explorer.

Veamos un ejemplo. Escribimos el siguiente código en el formulario:

Usuario: <input type="text" autofocus />

Al abrir o recargar la página el elemento está ya seleccionado, como puedes ver en la siguiente línea:

Usuario:

Atributo required

La presencia de este atributo indica que el campo en el que aparece es obligatorio. Si no está relleno nos indica un mensaje de que debemos rellenarlo para poder mandar el formulario.

Este atributo no requiere ningún valor.

Atributo form

Con este atributo podemos poner un elemento del formulario fuera de su etiqueta.

Para ello la etiqueta <form> debe llevar el atributo id . El valor del atributo form será el mismo que el del id del formulario.

<form action="#" method="post" id="miform">
....
....
</form>
<input type="text" form="miform" />

Aunque el input final está fuera del formulario, éste forma parte del mismo al llevar el atributo form.

Otros atributos

  • Autocomplete : para completar un campo una vez escrita una parte del mismo. Todavía no está disponible en los navegadores.
  • max y min : Marcan un máximo y un mínimo en los campos que indican un número, tal como veremos en los nuevos tipos de input.

Nuevos tipos de input

Los valores del atributo type del elemento input se amplian. Algunos de ellos, como los referentes a direcciones Web o emails, ya están disponibles en algunos navegadores; otros, como los referentes al tratamiento de fechas sólo están disponibles, de momento, en la última versión del navegador Opera.

En los navegadores que no están disponibles se muestran simplemente como un input type="text". A continuación damos ejemplos de los nuevos tipos de input. Puedes probar a abrir esta página en diferentes navegadores para ver cuáles lo admiten y cómo se ven los nuevos elementos en cada uno de ellos.

De momento (a fecha de octubre 2011) el navegador que está más al día es Opera.

type = "email"

Para seleccionar un email:

Email: <input type="email" />

Lo visualizamos de la siguiente manera:

Email:

type = "url"

Para seleccionar una dirección Web:

Web: <input type="url" />

Lo visualizamos de la siguiente manera:

Web:

type = "tel"

Para seleccionar un número de teléfono:

Web: <input type="tel" />

Lo visualizamos de la siguiente manera:

Tel:

type = "search"

Para cajas de búsqueda:

Buscar: <input type="search" />

Lo visualizamos de la siguiente manera:

Buscar:

type = "number"

Para elegir un número entre un máximo y un mínimo:

Dime un número del 1 al 10: <input type="number" min="1" max="10" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Número:

Los atributos min y max marcan el mínimo y el máximo del número que queremos que el usuario introduzca.

type = "range"

Elige también un número entre un máximo y un mínimo, pero mediante una barra de desplazamiento:

Velocidad: (de 1 a 50): <input type="range" min="1" max="50" />

Lo visualizamos de la siguiente manera: (En Opera, Safari y Chrome, últimas versiones)

Velocidad:

Los atributos min y max marcan el mínimo y el máximo del número que utilizamos para medir lo que controlamos mediante este elemento.

type = "color"

Para seleccionar un color:

Color: <input type="color" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Color:

type = "date"

Para seleccionar un día en el calendario:

Día: <input type="date" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Día:

type = "month"

Para seleccionar un mes en el calendario:

Mes: <input type="month" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Mes:

type = "week"

Para seleccionar una semana:

Semana: <input type="week" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Semana:

type = "time"

Para seleccionar una hora:

Hora: <input type="time" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Hora:

type = "datetime"

Para seleccionar una fecha en hora internacional, con hora y minuto:

Fecha internacional: <input type="datetime" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Fecha (internacional):

type = "datetime-local"

Para seleccionar una fecha en hora local, con hora y minuto:

Fecha local: <input type="datetime-local" />

Lo visualizamos de la siguiente manera: (de momento sólo en Opera)

Fecha (local):

La etiqueta datalist

Esta nueva etiqueta está asociada a los input de tipo texto, email, tel y url.

Crea una lista que veremos al poner el foco en el elemento input, y de la cual podemos elegir una opción. De momento esta etiqueta sólo funciona con el navegador Opera

Su funcionamiento es parecido al de la etiqueta select. Veamos un ejemplo:

En primer lugar ponemos la etiqueta input en la cual introduciremos la lista. Esta etiqueta lleva un nuevo atributo: list="nombre_lista"

<input type="tel" name="telefono" list="mistelefonos"/>

A continuación ponemos la etiqueta datalist la cual lleva el atributo id="nombre_lista con el mismo valor dado en list. Dentro de esta etiqueta escribimos las etiquetas option, igual que haríamos en una lista select. El código completo es el siguiente:

<p><input type="tel" name="telefono" list="mistelefonos"/></p>
<datalist id="mistelefonos">
  <option value="648210025" label="Miguel Carbonell">
  <option value="639400125" label="Juan Echeandia">
  <option value="671200458" label="Pilar Martinez">
</datalist>

En cada una de las opciones option incluimos el atributo value con el texto que se introducirá en el input. La etiqueta label indica un texto que veremos al desplegarse la lista, pero que no se introducirá al ser seleccionado el elemento.

El input funciona como en la siguiente línea (sólo si estás usando Opera podras ver como funciona).







En la siguiente página veremos el tratamiento que da HTML 5 al contenido multimedia en la página.

Multimedia en HTML 5



Manual HTML5

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo