sábado, 6 de agosto de 2016
miércoles, 11 de marzo de 2015
1:32
No comments
Validar formulario con HTML5 y CSS3
Una de las ventajas de utilizar estas tecnologías es el avance que nos proporcionan día a día. Validar un formulario usando java script era un poco engorroso, pero gracias a HTML5 Y CSS3, se puede hacer de la manera mas sencilla, y que gracias a los avances de los navegadores ya es soportada en cualquier browser.
Aquí les dejo un ejemplo sencillo de un formulario validado con CSS3, y usando los tipos de input que HTML5 nos proporciona
--Archivo index.html
<!DOCTYPE html>
<html>
<head>
<title>Validando formulario HTML5 Y CSS3 </title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="estilos-formulario.css"/>
</head>
<body>
<h2 class="titulo">Formulario HTML5 Y CSS3</h2>
<form action="#" class="Form">
<label for="nombre" class="Form-Descripcion">Nombre</label>
<input pattern="[a-zA-Z]{6,}" type="text" name="nombre"
required placeholder="Nombre" class="Form-Texto"/>
<div class="Form-Mensaje">
Ingrese un nombre de usuario mayor a 6 dígitos
</div>
<label for="email" class="Form-Descripcion">Email</label>
<input type="email" name="email" required placeholder="Email"
class="Form-Texto"/>
<div class="Form-Mensaje">
Ingrese un correo válido
</div>
<input type="submit" value="Ingresar"/>
</form>
</body>
</html>
--Archivo estilos-formulario.css
body{
font-size:16px;
}
.Form-Texto{
padding:.5em;
}
.Form-Descripcion{
font-weight:bold;
padding:.5em;
width:10em;
}
.Form-Mensaje{
padding:.5em;
text-decoration:italic;
}
/*Validando formulario*/
.Form-Texto:valid + .Form-Mensaje {
visibility: hidden;
}
.Form-Texto:invalid{
border:1px solid red;
}
.Form-Texto:valid{
border:1px solid blue;
}
--Resultado
Suscribirse a:
Entradas (Atom)
