1

10410060-Armendáriz Armendáriz Joel Antonio

10410069-Domínguez Mendoza Lydia Nallely

Formularios HTML 5

ObjetivoInvestigar, ejemplificar y exponer un tema relacionado con HTML5.

2

ÍNDICE

• Nuevos elementos………3

• Nuevas etiquetas input..10

• Conclusión general…….25

• Conclusión personal…..26

• Referencias………………27

3

Nuevos elementos

4

• progress

•meter

• output

• detalist

• keygen

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

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.

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.

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.

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.

10

Nuevas Etiquetas

Input

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.

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

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

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

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

<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’.

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

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’.

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

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

<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’.

<form><input type="datetime-local" name="fechayhora"></form>

22

Month

• Input para representar mes y año con formato ‘AAAA-MM’.

<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’.

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.

25

Conclusión generalNo 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

Conclusión personalEstamos 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/.galleries/test-galeria-descarga/manual-lenguaje-html5.pdf

• [2]http://www.aprenderaprogramar.com/index.php?option=com_content&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