Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo HTML5

Las nuevas tendencias llegan a las páginas web con HTML5.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

HTML 5 (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.

Los datos que aquí damos sobre la disponibilidad de estos elementos se han comprobado a fecha de diciembre de 2013.

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:

Si el campo no se ha rellenado al pulsar en enviar (botón "submit"), el formulario no se envía y nos recuerda con un mensaje que debemos rellenarlo.

Este atributo funciona en todos los navegadores en su ultima versión excepto en Safari.

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.

Este atributo funciona en todos los navegadores excepto en Internet Explorer.

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 están teniendo una incorporación más tardía.

En los navegadores que no están disponibles estos campos, 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.

Al final de esta lista damos una tabla donde se indica en qué navegadores están disponibles los tipos de "input" que iremos viendo.

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:

Día:

type = "month"

Para seleccionar un mes en el calendario:

Mes: <input type="month" />

Lo visualizamos de la siguiente manera:

Mes:

type = "week"

Para seleccionar una semana:

Semana: <input type="week" />

Lo visualizamos de la siguiente manera:

Semana:

type = "time"

Para seleccionar una hora:

Hora: <input type="time" />

Lo visualizamos de la siguiente manera:

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:

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:

Fecha (local):

La siguiente tabla muestra los navegadores en los que están disponibles los tipos anteriores:

Las comprobaciones están hechas a fecha 21-8-14. Los campos en los que no funciona se muestran como campos de texto.

Para hacer la comprobación hemos utilizado la siguiente página:

Comprobar tipos de input.

Observamos que el comportamiento no es el mismo en todos los navegadores:

• En Safari siempre se puede enviar el formulario, aunque los datos no sean correctos.
• Para los tipos email y url Firefox, Chrome y I.E 10 muestran un mensaje diciendo que hay que incluir un dato válido. En Opera no indica el mensaje, aunque en todos ellos no deja enviar el formulario si los datos no son correctos, aunque sí podemos enviarlo si dejamos el campo vacío.
• El campo number no deja enviar el formulario (excepto en safari), si no se pone un número entre los indicados como mínimo y máximo. Firefox, I.E 10 y Opera muestran un mensaje diciendo que el número no es correcto, Opera no muestra el mensaje, pero no deja enviar el formulario. Con Safarti el formulario se envía siempre, aunque sólo recoge el dato si este es numérico, aunque no esté entre los margenes indicados.
• Con los campos de fechas, tanto Chrome como Opera muestran un formato de fecha que podemos modificar escribiéndolo o mediante un calendario desplegable. En Safari no tenemos la opción del calendario desplegable, y además podemos poner otro dato que no sea una fecha.

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 (Todos los navegadores, en su última versión, excepto Safari -Marzo 2014-)).

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

Multimedia en HTML 5

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com