Página de inicio del tutorial de HTML5 con formularios HTML5
HTML5 trae muchas características y mejoras a formularios web, Hay nuevos atributos y tipos de entrada que fueron introducidos Principalmente para facilitar la vida de los desarrolladores web y brindar una mejor experiencia a los usuarios web..
Entonces, en esta publicación vamos a crear una página de inicio de sesión usando Formas HTML5 Para ver cómo funcionan las nuevas características añadidas..
- Manifestación
- Descargar fuente
Entrada HTML5
Echemos un vistazo al siguiente marcado..
Si ha estado trabajando con formularios HTML anteriormente, esto le resultará familiar. Pero, también notarás diferencias allí. Las entradas tienen marcador de posición y necesario atributos, que son nuevos atributos en HTML5.
Marcador de posición
los marcador de posición atributo nos permite dar un texto inicial en la entrada que desaparecerá cuando esté en una atención Estado o se está completando. Anteriormente, solíamos hacerlo con JavaScript, pero ahora se vuelve mucho más fácil con este nuevo atributo.
Atributo Requerido
los necesario el atributo establecerá el campo como obligatorio y, por lo tanto, no debe dejarse en blanco antes de enviar el formulario, por lo que cuando el usuario no haya completado el campo, aparecerá el siguiente error.
Nuevo selector también se introduce en CSS3., :necesario para apuntar campos con necesario atributo. Aquí hay un ejemplo;
entrada: requerida borde: 1px rojo sólido;
Tipo de entrada de correo electrónico
El primer tipo de entrada es correo electrónico que es en realidad un nuevo tipo de campo añadido en HTML5 también. los correo electrónico tipo dará la validación básica de la dirección de correo electrónico en el campo. Cuando el usuario no llena el campo con una dirección de correo electrónico, el navegador mostrará la siguiente notificación;
El uso de tipos de entrada de correo electrónico también puede brindar una mejor experiencia para los usuarios móviles, como los usuarios de iPhone y Android, donde mostrará teclado en pantalla optimizado para correo electrónico con un dedicado “@” botón para ayudar a escribir la dirección de correo electrónico más rápido.
Las desventajas
Las nuevas características de formulario que se ofrecen en HTML5 son potentes y fáciles de implementar, pero aún faltan en algunas áreas. Por ejemplo;
los marcador de posición atributo, Solo es compatible con los navegadores modernos. - Firefox 3.7+, Safari 4+, Chrome 4+ y Opera 11+. Por lo tanto, si lo necesita para trabajar en navegadores no compatibles, puede utilizar estos rellenos automáticos junto con Modernizr.
Lo mismo ocurre con el necesario atributo. La notificación de error no puede ser personalizada, el error permanecerá “Por favor rellene este campo” más bien que “Por favor, complete su nombre”, Este atributo de soporte también está limitado a los últimos navegadores..
Por lo tanto, usar JavaScript para validar el campo requerido es (hasta ahora) una mejor opción.
función validateForm () var x = document.forms ["login"] ["username"]. value; if (x == null || x == "") alert ("Por favor, complete el nombre de usuario"); falso retorno; Estilo de los formularios
Muy bien, ahora vamos a decorar nuestro formulario de inicio de sesión con CSS. Primero le daremos al fondo un patrón de madera en el html etiqueta.
html background: url ('wood_pattern.png'); tamaño de letra: 10 puntos; Entonces, tenemos que eliminar el relleno predeterminado y el margen en ul etiqueta que envuelve todo entradas y flota el li a la izquierda, por lo que las entradas se mostrarán horizontalmente, lado a lado.
.loginform ul padding: 0; margen: 0; .loginform li display: inline; flotador izquierdo;
Desde que flotamos li, los padres se colapsarán, por lo que necesitamos aclarar las cosas alrededor del padre con el hackeo de clearfix.
label display: block; color: # 999; .cf: antes, .cf: después de contenido: ""; pantalla: tabla; .cf: despues de claro: ambos; .cf * zoom: 1; : foco esquema: 0;
En CSS3 tenemos el selector de negación. Entonces, lo usaremos para apuntar entradas otro qué el enviar tipo, que en este caso se dirigirá a la entrada de correo electrónico y contraseña;
.entrada del formulario de inicio de sesión: not ([type = submit]) padding: 5px; margen derecho: 10px; borde: 1px rgba sólido (0, 0, 0, 0.3); radio del borde: 3px; caja-sombra: recuadro 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);
Por último, daremos un poco de decoración de estilo para el Enviar botón, como sigue.
.entrada de formulario de inicio de sesión [tipo = enviar] borde: 1px rgba sólido (0, 0, 0, 0.3); fondo: # 64c8ef; / * Navegadores antiguos * / fondo: -moz-linear-gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradient (linear, left top, left inferior, color-stop (0%, # 64c8ef), color-stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (superior, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-gradiente lineal (arriba, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: gradiente lineal (hacia abajo, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; relleno: 5px 15px; margen derecho: 0; margen superior: 15px; radio del borde: 3px; texto-sombra: 1px 1px 0px rgba (0, 0, 0, 0.3);
Eso es todo, ahora puedes probar el formulario de inicio de sesión de los siguientes enlaces.
- Manifestación
- Descargar fuente
Ultimas palabras
En este tutorial vimos algunas características nuevas en los formularios HTML5:marcador de posición, necesario y correo electrónico tipos de entrada para crear una página de inicio de sesión simple. También hemos superado las desventajas de los atributos, por lo que podemos decidir un mejor enfoque para aplicar.
En la próxima publicación veremos otra nueva función de formulario HTML5, así que estad atentos..
