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 Chrome Opera IE Android Email? 4+ 5+ 3.1+ 6+/10+ 10.6+ 10+ 2.3- Tel? 4+ 5+ 3.1+ 6+ 10.6+ 10+ 2.3+ Url? 4+ 5+ 3.1+ 6+/10+ 10.6+ 10+ 2.3- Search? 3.6/4+ 5+ 4+ 6+ 10.6+ 9/10+ 2.3- Color? 11- 5.2- 5- 20+ 11+ 10- 2.3-
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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
Al utilizar el atributo form, los elementos de entrada se
pueden ubicar en cualquier zona de la página, no solo en el
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
indica que el elemento es
obligatorio.
El atributo required resulta útil para realizar una validación
basada en el navegador sin utilizar JavaScript personalizado.
autocomplete Sirve para especificar que el
navegador no debe
autocompletar o rellenar
previamente un campo en base
a las entradas anteriores del
usuario.
El atributo autocomplete está destinado a campos como el
número de tarjeta de crédito o una contraseña de un solo
uso, que no quieres que se completen automáticamente. De
forma predeterminada, autocomplete se encuentra activado
(estado on), por lo que si quieres inhabilitarlo, debes
establecerlo en el estado off.
pattern Sirve para validar el valor de un
elemento comparándolo con
una expresión regular.
Al utilizar un atributo pattern, también debes especificar un
valor title para proporcionar al usuario una descripción del
patrón previsto.
dirname Sirve para enviar la
direccionalidad del control con
el formulario.
Por ejemplo, si el usuario introdujo datos de texto con una
direccionalidad de derecha a izquierda y el elemento de
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.
8
Atributo Función Notas
formaction Sirve para anular el atributo
"action" en el elemento de
formulario.
Este atributo es compatible con los elementos input y button.
formenctype Sirve para anular el atributo
"enctype" en el elemento de
formulario.
Este atributo es compatible con los elementos input y button.
formmethod Sirve para anular el atributo
"method" en el elemento de
formulario.
Este atributo es compatible con los elementos input y button.
formnovalidate Sirve para anular el atributo
"novalidate" en el elemento de
formulario.
Este atributo es compatible con los elementos input y button.
formtarget Sirve para anular el atributo de
destino en el elemento de
formulario.
Este atributo es compatible con los elementos input y button.
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:
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.
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');
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 */ }
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
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.