Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 179

Visitas el mes pasado: 211

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


El futuro del desarrollo web: HTML 5
Desarrollo Web
Manual de HTML5 en español
Alejandro Castillo Cantón
HTML5 Tags
quackit.com
Las novedades de HTML5
Victor Pimentel - Jazztel
HTML5 Novedades en los formularios
BufferOverflow
El sustituto del 'iframe' en HTML5
Gepetto - Globedia
HTML5 drag and drop
w3schools.com
Arrastrar y soltar en HTML5 nativo
html5rocks.com
javascript dataTransfer Description
javascript.gakaa.com
dataTransfer object
help.dottoro.com
localStorage en HTML5
rolandocaldas.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




HTML 5 (III)

Formularios

imagen html5

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:

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

Todos los navegadores (excepto IE8 y anteriores) admiten ya este atributo, El resultado es 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 todos los navegadores en sus últimas versiones.

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. por ejemplo:

Rellena este campo:

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

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:

Tipos Firefox Chrome I.E. 10 Safari Opera
email si si si no si
tel no no no no no
url si si si no si
search no no no no no
number si si si no si
range si si si si si
color nsi si no no si
date no si no si si
month no si no si si
week no si no si si
time no si no si si
datatime no no no si no
datatime-local no si no si si

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:



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



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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