Este documento describe nuevos elementos y etiquetas de entrada en HTML5. Presenta elementos como progress, meter, output y keygen, así como nuevas entradas como number, range, tel, email y color. Explica que estos nuevos componentes permiten validación y formato automático de datos sin necesidad de código adicional. Sin embargo, la validación nativa de formularios en HTML5 aún está en desarrollo.

1. 10410060-Armendáriz Armendáriz Joel Antonio
10410069-Domínguez Mendoza Lydia Nallely
Objetivo
Investigar, ejemplificar y exponer un tema
relacionado con HTML5.
1

2. ÍNDICE
2
• Nuevos elementos………3
• Nuevas etiquetas input..10
• Conclusión general…….25
• Conclusión personal…..26
• Referencias………………27

3. 3

4. • progress
• meter
• output
• detalist
• keygen
4

5. Progress
• Con esta etiqueta no hay que hacer mayor
explicación, pues como su nombre lo indica, se
usa para crear barras de progreso.
• Podemos emplearlas o usarlas en procesos de
larga duración, como la descarga de archivos,
para indicar a cualquier usuario de nuestra
aplicación el progreso de la operación que se
está realizando.
• HTML5 no está soportado en todos los navegadores y esta
etiqueta no está soportada en versiones como Firefox15 o
IE9
5

6. Meter
• La etiqueta meter nos permite marcar un
valor en rango conocido. A diferencia de
la etiqueta progress este representa un
valor entre un límite máximo y uno
mínimo y no una progresión.
6

7. Output
• Muestra el resultado de un
cálculo matemático, su uso
básico puede ser tan básico
como el de mostrar una simple
suma de dos números.
7

8. Datalist
• La etiqueta datalist permite autocompletar
cajas de texto creadas con la etiqueta input.
No está soportado ni en Safari, Explorer 9 y
versiones anteriores. El atributo list del input
indica el identificador id del datalist.
8

9. Keygen
• Genera claves públicas y privadas
para la encriptación, la clave
privada se guarda localmente y la
pública se envía al servidor. No está
soportado en Internet Explorer.
9

10. 10

11. Number
• Este input valida automáticamente que
los valores introducidos sean numéricos,
con el consiguiente ahorro de código en
la recepción o validación de los
formularios.
11
<form name="" action="" method="POST">
Introduce tu edad: <input type="number"
name="edad">
<input type="submit" value="Enviar">
</form>

12. Range
• Este input es muy parecido al number input, la
diferencia radica en que en este caso la única
manera de especificar el valor es mediante su
slider con sus correspondientes límites.
12
<form name="" action="" method="POST">
Introduce tu edad:
<input type="range" name="edad" min="18"
max="99" step="1" value="40">
<input type="submit" value="Enviar">
</form>

13. Tel
• Este nuevo input resulta muy útil en los
dispositivos móviles actuales.
• El dispositivo móvil detecta que el input es de
tipo ‘tel’ y al pulsar en él automáticamente sale
el teclado telefónico del móvil para insertar el
número en cuestión.
13
<form name="" action="" method="POST">
Introduce tu TELEFONO: <input type="tel"
name="telefono">
<input type="submit" value="Enviar">
</form>

14. Email
• El elemento por defecto detecta que el campo
debe ser rellenado con contenido válido de
una cuenta de email, por lo que mostrará una
@ en el teclado y hará las verificaciones
pertinentes para cumplir los requisitos de una
dirección de email.
14
<form name="" action="" method="POST">
Introduce tu email: <input type="email"
name="email">
<input type="submit" value="Enviar">
</form>

15. Color
• Representa una paleta (selector) de colores sin
necesidad de añadir plugins ni códigos
adicionales como veníamos haciendo hasta
ahora. Así con un solo click podemos elegir
fácilmente un color.
15
<form>Selecciona un color: <input name="color"
type="color" value="#f3f3f3"/></form>

16. Search
• Con este input podremos decir en la validación
del formulario que el campo contendrá valores
de búsqueda, así el propio input nos
proporciona un dato válido y el teclado del
dispositivo móvil mostrará el botón ‘buscar’.
16
<form name="" action="" method="POST">
Introduce el término de búsqueda: <input
type="search" name="busqueda"><br>
<input type="submit" value="Enviar">
</form>

17. Placeholder
• Un placeholder es un texto que se muestra para
ayudar al usuario y darle información.
• En cuanto se hace click en el input,
desaparece:
17

18. URL
• Se parece bastante a el input tel de HTML5. Este
campo cuando se visualiza en dispositivos
móviles facilita en el teclado las teclas ‘.’, ‘/’, y
‘.com’.
18

19. Date
• Este elemento vale para representar en
nuestra web un datepicker o calendario,
el formato de la fecha devuelto es
‘AAAA-MM-DD’.
Chrome, Safari y Opera
19
<form>
<input type="date" name="fecha"></form>

20. Datetime
• Input similar al anterior solo que este último
además de la fecha envía también la hora. El
formato de fecha y hora devuelto es el
siguiente: ‘AAAA-MM-DDTHH:MMZ’.
• Este input aun no funciona en todos los
navegadores, en safari funciona a medias.
20
<form><input type="datetime" name="fecha"></form>

21. Datetime-local
• El mismo elemento datetime pero sin enviar la
zona horaria. El formato devuelto es: ‘AAAA-MM-
DDTHH:MM’.
21
<form>
<input type="datetime-local" name="fechayhora">
</form>

22. Month
• Input para representar mes y año con formato
‘AAAA-MM’.
22
<form>
<input type="month" name="mes">
</form>

23. Time
• Con la inserción de este elemento en un
formulario facilitaremos la entrada de
datos para horas, el formato es:
‘HH:MM:SS’.
23

24. Week
• Input para la inserción del número de la semana
de un año en cuestión. Su formato es ‘YYYY-WNN’
–> ’2014-W07′.
Chrome, Safari y Opera.
24

25. 25
Conclusión general
No es necesario explicar los beneficios de disponer de
controles nativos, el único problema es que no se les
puede aplicar un estilo CSS. Esta es una más de las grandes
bondades que trae consigo HTML5, sin embargo la
validación de formularios de manera nativa aun se
encuentra en una etapa temprana de desarrollo,
especialmente con lo que respecta a la manera de
notificar la existencia de un campo invalido, ya que no
existen etiquetas CSS para personalizar el estilo, al menos
en caso de Google Chrome.

26. 26
Conclusión personal
Estamos actualmente viviendo un desarrollo web muy
activo, con una gran cantidad de cambios, nuevas
tendencias y más importante aun nuevas necesidades.
Uno de los cambios en estos momentos es el nacimiento
del HTML5, una nueva revisión del estándar que mueve
Internet.
El aumento de necesidades ha dado lugar a la
aparición de nuevos formularios, al debate del uso de
otros y cambios más o menos importantes pero que
debemos conocer.

27. REFERENCIAS
• [1]http://exprimiendoopencms.com/export/sites/sagasuite/.gallerie
27
s/test-galeria-descarga/manual-lenguaje-html5.pdf
• [2]http://www.aprenderaprogramar.com/index.php?option=com_c
ontent&view=article&id=520:formularios-html-form-label-name-value-
id-ejemplos-checkbox-option-button-combobox-cu00720b&
catid=69:tutorial-basico-programador-web-html-desde-cero&
Itemid=192