Formularios HTML5
Introducción
HTML5 ofrece algunas mejoras considerables, tanto para los desarrolladores que los crean
co...
Browser Support for New HTML5 Input Types

Firefox Safari Safari

Number?
Range?
Date?

Chrome Opera

IE

Android

11-

4/...
Browser Support for New HTML5 Input Attributes

Firefox Safari Safari Chrome

Opera

IE

Android

Formtarget?
Formenctype?...
Descripción general de las novedades
Nuevos elementos
HTML5 incorpora cinco nuevos elementos relacionados con las entradas...
Tipo de

Función

entrada
de teléfono.

Notas

utilizar pattern osetCustomValidity()para realizar una validación
adicional...
Tipo de

Función

entrada
time

Notas

Sirve para introducir un valor de
hora formado por las horas, los
minutos, los segu...
Atributo

Función

Notas
texto.

form

Especifica uno o varios

Al utilizar el atributo form, los elementos de entrada se
...
Atributo
formaction

Función
Sirve para anular el atributo

Notas
Este atributo es compatible con los elementos input y bu...
1. Comprobar si existe una cierta propiedad sobre un objeto global (como ventana o
navegador).
2. Crear un elemento, a con...
Ejemplos con Modernizr:
1.
con modernizr
if (!Modernizr.inputtypes.date) {
// no native support for <input type="date"> :(...
fields[i].defaultValue =
fields[i].getAttribute('placeholder');
fields[i].onfocus = function() { if(this.value ==
this.def...
[multiple]

Hay unos cuantos aspectos visuales de los formularios de HTML5 en los que puede no ser
evidente la forma de tr...
También puedes utilizar el objeto FormData para añadir datos adicionales a un formulario
existente antes de enviarlo.

var...
<input type="email" id="email_addr" name="email_addr"
required />

El atributo "pattern"
El atributo pattern especifica un...
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">
URL input pattern:

input type="url...
input.setCustomValidity('');
}
}
</script>
Ejemplo de un formulario de solicitud de reserva que agrupa diferentes tipos de...
17
Upcoming SlideShare
Loading in...5
×

Formularios html5

330

Published on

Introducción a los formularios HTML5

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Formularios html5"

  1. 1. Formularios HTML5 Introducción HTML5 ofrece algunas mejoras considerables, tanto para los desarrolladores que los crean como para los usuarios que los rellenan. Gracias a los nuevos elementos, atributos, tipos de entrada, validación basada en el navegador, técnicas de creación de estilos CSS3 y al objeto FormData, todos ellos relacionados con los formularios, ahora crear formas resulta más fácil. Compatibilidad con el navegador En lo que respecta a la escritura de código, la compatibilidad con todos los tipos, atributos y elementos de entrada y de formularios nuevos varía ampliamente según el navegador. Incluso entre navegadores que admiten una función concreta, el comportamiento de estos puede ser diferente. Sin embargo, el estado de compatibilidad de los formularios de HTML5 cambia de forma muy rápida y continúa mejorándose. Webs para consultar la compatiblidad: whatwg.org (Tabla) miketaylr.com (prueba) quirksmode.org (tabla desktop) quirksmode.org (tabla mobile) CanIuse (tabla) Haz.io (prueba) Resumen: Browser Support for New HTML5 Input Types Firefox Safari Safari Email? Tel? Url? Search? Color? Chrome Opera IE Android 4+ 5+ 3.1+ 6+/10+ 10.6+ 10+ 2.3- 4+ 5+ 3.1+ 6+ 10.6+ 10+ 2.3+ 4+ 5+ 3.1+ 6+/10+ 10.6+ 10+ 2.3- 3.6/4+ 5+ 4+ 6+ 11- 5.2- 5- 20+ 10.6+ 9/10+ 11+ 10- 2.32.3- 1
  2. 2. Browser Support for New HTML5 Input Types Firefox Safari Safari Number? Range? Date? Chrome Opera IE Android 11- 4/5.2+ 4+ 9-/10+ 11+ 10- 2.3+ 11- 4+ 5+ 6+ 9+ 10+ 2.3- 11- 5+ 5- 10- 2.3- 10/17/20+ 10.6+ All the new input types are supported in all browsers in that they will submit their data as if it were a "text" input. These valuations are based on if they do anything above and beyond and/or validate against the type of data relevant to them. Browser Support for New HTML5 Input Attributes Firefox Safari Safari Chrome Placeholder? Autofocus? Maxlength? List (Datalist)? Autocomplete? Required? Pattern? Spellcheck? Novalidate? Formnovalidate? Formaction? Opera IE 11.10/11.50 10+ Android 4+ 4/5+ 4+ 10+ 2.3+ 4+ 5+ 5- 6+ 11+ 10+ 2.3- 3.6/4+ 5+ 4+ 6+ 11+ 9/10 2.3+ 4+ 5- 5- 20+ 10.6+ 10+ 2.3- 4+ 5.2+ N/A 17+ 10.6+ 10- 2.3- 6+ 5- 5- 6+ 10.6+ 10+ 2.3- 4+ 5- 5- 6/10+ 10.6/11+ 10+ 2.3- 3.6+ 4+ 5- 10+ 11+ 10+ N/A 4+ 5- 5- 6+ 10.6+ 10+ 2.3- 4+ 5.2- 5- 6+ 10.6+ 10+ 2.3- 4+ 5.2+ 5+ 10+ 10.6+ 10+ 2.3- 2
  3. 3. Browser Support for New HTML5 Input Attributes Firefox Safari Safari Chrome Opera IE Android Formtarget? Formenctype? Accept? Multiple? Min / Max / Step? 4+ 5.2+ 5+ 10+ 10.6+ 10+ 2.3- 4+ 5.2+ 5+ 10+ 10.6+ 10+ 2.3- ? ? ? ? ? ? ? 11+ Formmethod? 5.2+ N/A 10+ 10.6+ 10+ 2.3- 3.6+ 5+ N/A 6+ 11+ 10+ 2.3- 11- 5+ 5- 10.6+ 10+ 2.3- 6+ Browser Support for New HTML5 Form Elements Firefox Safari Safari Chrome Opera Meter? Progress? Output? Keygen? IE Android 16+ 5.2+ 5- 6+ 11+ 10- 2.3- 6+ 5.2+ 5- 6+ 10.6+ 10+ 2.3- 6+ 5.1+ 5+ 13+ 9.2+ 10+ 2.3+ 3.6+ 4+ 5- 6+ 10.6+ 10- 2.3+ About Browser Versions In these charts, a version number like "4" means "the very first release of version 4 of this browser". As in, 4.0.0. The plus (+) sign means "this version and up", and the minus (-) sign means "this version and down". Only very rarely is there features which worked in older browsers but not newer, and in those rare cases it's noted on the informational page associated with the feature. Supported Kind of supported (see info page) Not Supported HTML5 forms con ejemplos: http://www.wufoo.com/html5/example/ 3
  4. 4. Descripción general de las novedades Nuevos elementos HTML5 incorpora cinco nuevos elementos relacionados con las entradas y los formularios. Elemento Función Notas progress Representa el proceso de finalización de una tarea. El elemento progress puede representar el progreso de subida de un archivo. meter Representa una medida escalar en un intervalo El elemento meter se puede utilizar para conocido. representar medidas como la temperatura o el peso. datalist Representa un conjunto de elementos option que se Al destacar la entrada con la lista de datos pueden utilizar en combinación con el nuevo asociada, aparecerá un menú desplegable con atributo list de entrada para crear menús los valores del elemento datalist. desplegables. keygen Representa un control para generar pares de claves. Cuando se envía el formulario, la clave privada se almacena en el almacenamiento de claves local y la clave pública se envía al servidor. output Muestra los resultados de un cálculo. Por ejemplo, el elemento output se puede utilizar para mostrar la suma de los valores de dos elementos de entrada. Nuevos tipos de entrada HTML5 incorpora 13 nuevos tipos de entrada. Cuando estos tipos de entrada se visualizan en un navegador que no es compatible, se convierten en entrada de texto. Tipo de entrada tel Función Notas Sirve para introducir un número El tipo de entrada tel no requiere una sintaxis específica, por lo que si quieres garantizar un formato concreto, puedes 4
  5. 5. Tipo de Función entrada de teléfono. Notas utilizar pattern osetCustomValidity()para realizar una validación adicional. search Sirve para solicitar a los usuarios La diferencia entre search y text es fundamentalmente de estilo. que introduzcan el texto que Si utilizas un tipo de entrada search, es posible que al campo de quieran buscar. entrada se le aplique un estilo que se corresponda con el de los campos de búsqueda de la plataforma. url El tipo de entrada url está diseñado para introducir una única URL URL. email Sirve para introducir una única absoluta, que representa un intervalo de valores bastante amplio. Sirve para introducir una Si se especifica el atributo multiple, se podrán introducir varias dirección de correo electrónico direcciones de correo electrónico separadas por comas. única o una lista de direcciones de correo electrónico. datetime Sirve para introducir una fecha y una hora, siempre y cuando la zona horaria esté configurada como UTC. date Sirve para introducir una fecha sin zona horaria. month Sirve para introducir una fecha formada por el año y el mes, pero sin zona horaria. week Sirve para introducir una fecha Por ejemplo, 2011-W05 para la quinta semana de 2011. formada por el año y el número de semana, pero sin zona horaria. 5
  6. 6. Tipo de Función entrada time Notas Sirve para introducir un valor de hora formado por las horas, los minutos, los segundos y las fracciones de segundo, pero sin zona horaria. datetime- Sirve para introducir una fecha y local una hora sin zona horaria. number Sirve para introducir un número. Los valores válidos son números correspondientes a puntos flotantes. range Sirve para introducir números, En la mayoría de los navegadores que admiten la implementación pero a diferencia de tipo de del control de intervalo, esta es un control deslizante. entrada number, esta no es importante. color Sirve para elegir un color a El valor debe ser un color simple en minúscula, por ejemplo, través de un control adecuado #ffffff. del color. Nuevos atributos de entrada HTML5 también incorpora varios atributos nuevos para los elementos de formulario y entrada. Atributo autofocus Función Notas Centra la entrada en el El atributo autofocus se puede aplicar a entradas, selecciones, elemento cuando se carga la áreas de texto y botones. página. placeholder Sugiere al usuario el tipo de El valor "placeholder" se muestra en texto de color claro datos que debe introducir. hasta que se destaca el elemento y el usuario introduce algunos datos. Se puede especificar en entrada y área de 6
  7. 7. Atributo Función Notas texto. form Especifica uno o varios Al utilizar el atributo form, los elementos de entrada se formularios a los que pertenece pueden ubicar en cualquier zona de la página, no solo en el el elemento de entrada. elemento de formulario. Además, se puede asociar un único elemento de entrada a más de un formulario. required Es un atributo booleano que El atributo required resulta útil para realizar una validación indica que el elemento es basada en el navegador sin utilizar JavaScript personalizado. obligatorio. autocomplete Sirve para especificar que el El atributo autocomplete está destinado a campos como el navegador no debe número de tarjeta de crédito o una contraseña de un solo autocompletar o rellenar uso, que no quieres que se completen automáticamente. De previamente un campo en base forma predeterminada, autocomplete se encuentra activado a las entradas anteriores del usuario. pattern (estado on), por lo que si quieres inhabilitarlo, debes establecerlo en el estado off. Sirve para validar el valor de un Al utilizar un atributo pattern, también debes especificar un elemento comparándolo con una expresión regular. dirname valor title para proporcionar al usuario una descripción del patrón previsto. Sirve para enviar la Por ejemplo, si el usuario introdujo datos de texto con una direccionalidad del control con direccionalidad de derecha a izquierda y el elemento de el formulario. entrada contenía el atributo dirname, se enviará una indicación de direccionalidad de derecha a izquierda junto con el valor de entrada. novalidate Sirve para inhabilitar la validación de envíos de formularios cuando se especifique en un elemento de formulario. 7
  8. 8. Atributo formaction Función Sirve para anular el atributo Notas Este atributo es compatible con los elementos input y button. "action" en el elemento de formulario. formenctype Sirve para anular el atributo Este atributo es compatible con los elementos input y button. "enctype" en el elemento de formulario. formmethod Sirve para anular el atributo Este atributo es compatible con los elementos input y button. "method" en el elemento de formulario. formnovalidate Sirve para anular el atributo Este atributo es compatible con los elementos input y button. "novalidate" en el elemento de formulario. formtarget Sirve para anular el atributo de Este atributo es compatible con los elementos input y button. destino en el elemento de formulario. Testing Support and Modernizr Si estas tratando de escribir JavaScript para imitar la funcionalidad de los formularios HTML5, es posible que desee probar primero la capacidad de los navegadores actuales y escribir el código JavaScript en caso de que no sea soportado HTML5. Puede probar la compatibilidad de atributos así de fácil: // Function to test for attribute support function elSupportsAttr(el, attr) { return attr in document.createElement(el); } Sin embargo, existen cuatro técnicas básicas para detectar si el navegador soporta una función particular. De la más simple a la más compleja: 8
  9. 9. 1. Comprobar si existe una cierta propiedad sobre un objeto global (como ventana o navegador). 2. Crear un elemento, a continuación, comprobar si existe una cierta propiedad sobre dicho elemento. 3. Crear un elemento, comprobar si existe un cierto método en ese elemento, a continuación, llamar al método y comprobar el valor que devuelve. 4. Crear un elemento, establecer una propiedad en un determinado valor, a continuación, comprobar si la propiedad ha conservado su valor. De forma más precisa o avanzada se puede hacer pruebas a través de la excelente biblioteca de JavaScript Modernizr. Mira este artículo DETECTING HTML5 FEATURES Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. You should always use the latest version. To use it, include the following <script> element at the top of your page. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dive Into HTML5</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html> Modernizr runs automatically. There is no modernizr_init() function to call. When it runs, it creates a global object called Modernizr, that contains a set of Boolean properties for each feature it can detect. For example, if your browser supports the canvas API, the Modernizr.canvas property will be true. If your browser does not support the canvas API, the Modernizr.canvas property will be false. if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } 9
  10. 10. Ejemplos con Modernizr: 1. con modernizr if (!Modernizr.inputtypes.date) { // no native support for <input type="date"> :( // maybe build one yourself with Dojo or jQueryUI } 2. Técnica básica function supports_input_placeholder() { var i = document.createElement('input'); return 'placeholder' in i; } o con modernizr if (Modernizr.input.placeholder) { // your placeholder text should already be visible! } else { // no placeholder support :( // fall back to a scripted solution } 2. Técnica básica function supports_input_autofocus() { var i = document.createElement('input'); return 'autofocus' in i; } o con modernizr if (Modernizr.input.autofocus) { // autofocus works! } else { // no autofocus support :( // fall back to a scripted solution } Fallback for the placeholder(iE8+,opera,Firefox) <script type="text/javascript"> // ref: http://diveintohtml5.org/detect.html function supports_input_placeholder() { var i = document.createElement('input'); return 'placeholder' in i; } if(!supports_input_placeholder()) { var fields = document.getElementsByTagName('INPUT'); for(var i=0; i < fields.length; i++) { if(fields[i].hasAttribute('placeholder')) { 10
  11. 11. fields[i].defaultValue = fields[i].getAttribute('placeholder'); fields[i].onfocus = function() { if(this.value == this.defaultValue) this.value = ''; } fields[i].onblur = function() { if(this.value == '') this.value = this.defaultValue; } } } } </script> CSS y HTML5 Forms Pseudo-clases CSS3 tiene una serie de nuevas pseudo clases que pueden seleccionar los elementos de formulario que se encuentran en estados particulares. :required { } :optional { } :valid { } :invalid { } :default { } :in-range { } :out-of-range { } :not() El: not() selector no es específico de las formularios, pero es útil para los selectores como: not ([type = submit]) para seleccionar todas las entradas diferentes de botones de envío. El:valid selector seleccionará el elemento de leyenda de un conjunto de campos(legend element of a fieldset) que contiene una entrada válida en Safari 5. Selectores de atributos Selectores de atributos nos ayudan a seleccionar los elementos que contienen atributos específicos. Desde que los formularios HTML5 tienen nuevos atributos de entrada, esto puede ser útil en la selección de ellos. [autofocus] { } [autocomplete] { } [list] { } [placeholder] { } [type=range] { /* and other types */ } 11
  12. 12. [multiple] Hay unos cuantos aspectos visuales de los formularios de HTML5 en los que puede no ser evidente la forma de tratarlos con estilos en CSS. Por ejemplo, el texto de marcador de posición(placeholder), o el estilo WebKit predeterminado de una búsqueda. ::-webkit-input-placeholder { /* Style placeholder text */ } :-moz-placeholder { /* Style placeholder text */ } [type=search] { -webkit-appearance: none; } ::-webkit-validation-bubble-message { padding: 50px; } El objeto FormData Una de las mejoras de XMLHttpRequest es la incorporación del objeto FormData. Gracias al objeto FormData, puedes crear y enviar un conjunto de pares de valores/claves y, de forma opcional, archivos mediante XMLHttpRequest. Al utilizar esta técnica, los datos se envían en el mismo formato que si los enviaras a través del método de formulario submit() con el tipo de codificaciónmultipart/form-data. FormData te ofrece una forma de crear formularios en HTML sobre la marcha utilizando JavaScript y luego enviarlos mediante XMLHttpRequest.send(). A continuación se indica un sencillo ejemplo: var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", somefile) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData); 12
  13. 13. También puedes utilizar el objeto FormData para añadir datos adicionales a un formulario existente antes de enviarlo. var formElement = document.getElementById("someFormElement"); var formData = new FormData(formElement); formData.append("part_description", "The best part ever!"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData); Validación basada en el navegador Actualmente, para realizar la validación de formularios del cliente, probablemente escribes algún código de JavaScript personalizado o que utilizas una biblioteca para realizar acciones como comprobar entradas válidas o asegurarte de que todos los campos estén completos antes de enviar el formulario. Si utilizas los nuevos atributos de entrada como required y pattern en combinación con selectores de pseudoclases de CSS puede que te resulte más fácil escribir las comprobaciones y mostrar comentarios al usuario. También existen otras técnicas de validación que te permiten utilizar JavaScript para establecer mensajes y reglas de validación personalizadas o determinar si un elemento no es válido y por qué. El atributo "required" Si el atributo required está presente, el campo debe contener un valor a la hora de enviar el formulario. A continuación, se muestra un ejemplo de un campo de entrada para una dirección de correo electrónico obligatoria que garantiza que el campo contenga un valor y que ese valor sea una dirección de correo electrónico válida, tal y como se explica en esta página. This requirement is a willful violation of RFC 5322, which defines a syntax for e-mail addresses that is simultaneously too strict (before the "@" character), too vague (after the "@" character), and too lax (allowing comments, whitespace characters, and quoted strings in manners unfamiliar to most users) to be of practical use here. The following JavaScript- and Perl-compatible regular expression is an implementation of the above definition. /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[azA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ 13
  14. 14. <input type="email" id="email_addr" name="email_addr" required /> El atributo "pattern" El atributo pattern especifica una expresión regular utilizada para validar un campo de entrada. Este ejemplo representa un campo de entrada de texto para un número de pieza. Para el objetivo del ejemplo, diremos que un número de pieza está formado por tres letras en mayúscula seguidas de cuatro dígitos. El uso de los atributos required y pattern garantiza que el campo contenga un valor y que ese valor coincida con el formato adecuado para un número de pieza. Si el usuario pasa el ratón por encima del campo, se mostrará el mensaje del atributo "title". <input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/> Según el ejemplo anterior, también puedes destacar el campo de entrada en rojo si se introduce un número de pieza no válido. Para ello, añade esta hoja de estilo CSS para que establezca un borde rojo alrededor del campo de entrada si el valor no es válido. :invalid { border: 2px solid #ff0000; } El atributo "formnovalidate" El atributo formnovalidate se puede aplicar a los elementos input o button. Si se encuentra presente, se inhabilitará la validación del envío del formulario. A continuación, se muestra un ejemplo en el que para enviar un formulario a través del botón "Enviar" se necesita una entrada válida, pero para enviarlo mediante el botón "Guardar" no es necesaria. <input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/> 14
  15. 15. <input type="submit" formnovalidate value="Save"> <input type="submit" value="Submit"> URL input pattern: input type="url" pattern="https?://.+" IPv4 Address input pattern: input type="text" pattern="d{1,3}.d{1,3}.d{1,3}.d{1,3}" Date input pattern (dd/mm/yyyy or mm/dd/yyyy): input type="text" pattern="d{1,2}/d{1,2}/d{4}" Price input pattern: input type="text" pattern="d+(.d{2})?" Latitude/Longitude input pattern: input type="text" pattern="-?d{1,3}.d+" El API de validación restringida El API de validación restringida te ofrece potentes herramientas para realizar una validación personalizada. El API te permite realizar acciones como configurar un error personalizado, comprobar si un elemento es válido y determinar la razón por la que no lo es. A continuación, se muestra un ejemplo que muestra un error personalizado si los valores de dos campos no coinciden. <label>Email:</label> <input type="email" id="email_addr" name="email_addr"> <label>Repeat Email Address:</label> <input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)"> <script> function check(input) { if (input.value != document.getElementById('email_addr').value) { input.setCustomValidity('The two email addresses must match.'); } else { // input is valid -- reset the error message 15
  16. 16. input.setCustomValidity(''); } } </script> Ejemplo de un formulario de solicitud de reserva que agrupa diferentes tipos de entrada, validación de formularios y estilos y selectores CSS. Ejemplo en Firefox 26.0 Ejemplo en IE11 Ejemplo en Chrome Versión 32.0.1700.76 m Ejemplo en Safari 5.1.7 (Windows) NO Sfari 4.0.3(Mac) NO Safari doesn't display any HTML5 validation messages but CSS3 work. 16
  17. 17. 17

×