En este artículo veremos cómo crear un formulario profesional por medio de CSS. En primer lugar queremos conceptualizar nuestro formulario. Para este ejemplo, vamos a crear un sencillo formulario de contacto que pide la siguiente información del usuario:
- Nombre
- Sitio web
- Mensaje
Queremos asegurarnos de que el usuario está introduciendo la información correctamente. Para lograr esto, vamos a utilizar HTML5. En el caso que no sepas HTML5, no te preocupes el ejemplo es muy sencillo y lo podrás comprender.
HTML
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="FormHTML5_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 y CSS Formulario de contacto</title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<form class="contact_form" action="#" id="contact_form" runat="server">
<div>
<ul>
<li>
<h2>Contactos</h2>
<span class="required_notification">* Datos requeridos</span>
</li>
<li>
<label for="name">Nombre:</label>
<input type="text" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="info@developerji.com" required />
<span class="form_hint">Formato correcto: "name@something.com"</span>
</li>
<li>
<label for="website">Sitio web:</label>
<input type="url" name="website" placeholder="http://developerji.com" required pattern="(http|https)://.+" />
<span class="form_hint">Formato correcto: "http://developerji.com"</span>
</li>
<li>
<label for="message">Mensaje:</label>
<textarea name="message" cols="40" rows="6" required></textarea>
</li>
<li>
<button class="submit" type="submit">Enviar mensaje</button>
</li>
</ul>
</div>
</form>
</body>
</html>
Un poco de explicación
- Placeholder: en el campo de texto aparece un ejemplo de lo que debe capturar el usuario. Esto ayudará al usuario a entender lo que deben capturar en cada campo.
- <span class="form_hint"> Esta etiqueta la vamos a usar para dar consejos para los campos "Sitio Web" y "Email". Cuando el usuario capture esta información les parecerá un ejemplo de lo que deben capturar.
- Required. Cuando se le agrega esta propiedad a un elemento de texto / textarea le dirá al navegador que se requiere un valor antes de que el formulario puede ser enviado.
- Type. Ya todos conocemos los campos de formulario con el valor predeterminado type="text". Pero ahora queremos cambiar el atributo en nuestro sitio web para los campos de correo electrónico y sitio web a su correspondiente tipo de HTML5 que son email y url.
- Pattern. El atributo pattern acepta expresiones regulares javascript. Esta expresión se utiliza en lugar de la predeterminada del navegador, para validar el valor del campo.
CSS:
/* === Remove input autofocus webkit === */
*:focus {
outline: none;
}
/* === Form Typography === */
body {
font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
.contact_form h2, .contact_form label {
font-family: Georgia, Times, "Times New Roman", serif;
}
.form_hint, .required_notification {
font-size: 11px;
}
/* === List Styles === */
.contact_form ul {
width: 750px;
list-style-type: none;
list-style-position: outside;
margin: 0px;
padding: 0px;
}
.contact_form li {
padding: 12px;
border-bottom: 1px solid #eee;
position: relative;
}
.contact_form li:first-child, .contact_form li:last-child {
border-bottom: 1px solid #777;
}
/* === Form Header === */
.contact_form h2 {
margin: 0;
display: inline;
}
.required_notification {
color: #d45252;
margin: 5px 0 0 0;
display: inline;
float: right;
}
/* === Form Elements === */
.contact_form label {
width: 150px;
margin-top: 3px;
display: inline-block;
float: left;
padding: 3px;
}
.contact_form input {
height: 20px;
width: 220px;
padding: 5px 8px;
}
.contact_form textarea {
padding: 8px;
width: 300px;
}
.contact_form button {
margin-left: 156px;
}
/* form element visual styles */
.contact_form input, .contact_form textarea {
border: 1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius: 2px;
padding-right: 30px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #fff;
border: 1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right: 70px;
}
/* === HTML5 validation styles === */
.contact_form input:required, .contact_form textarea:required {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
background: #fff url(images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
background: #fff url(images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535;
}
/* === Form hints === */
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left: 8px;
padding: 1px 6px;
z-index: 999; /* hints stay above all other elements */
position: absolute; /* allows proper formatting if hint is two lines */
display: none;
}
.form_hint::before {
content: "\25C0";
color: #d45252;
position: absolute;
top: 1px;
left: -6px;
}
.contact_form input:focus + .form_hint {
display: inline;
}
.contact_form input:required:valid + .form_hint {
background: #28921f;
}
.contact_form input:required:valid + .form_hint::before {
color: #28921f;
}
/* === Button Style === */
button.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
opacity: .85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow: 0 0 10px 5px #356b0b inset;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
Conclusión
Como puede ver, las nuevas características de formulario HTML5 son bastante buenas y claras! Todo es compatible hacia atrás para la incorporación de estas nuevas características en su sitio web no se rompe nada.
La validación HTML5 del lado del cliente es muy sencilla de implementar y ayudar a los usuarios a rellenar correctamente los formularios en línea.
Gracias por leer y espero que les sea de utilidad este ejemplo, si tienen alguna duda o comentario, escríbanme y en seguida les responderé.
