Formulario estilo Facebook

¿Te gusta la simplicidad de los formularios de Facebook?

En este tutorial explicaré como diseñar un vistoso formulario (al más puro estilo Facebook) utilizando las etiquetas label e input. Además este formulario os podrá servir de base para vuestros proyectos.

DemostraciónEjemplos en HTML

DescargaArchivo ZIP

1. Las etiquetas label e input

Cuando se diseña un formulario para una página web se suele recurrir al uso de tablas para ordenar los campos, otra solución, mejor desde el punto de vista de los estándares web, es utilizar las etiquetas anteriormente mencionadas.

Código HTML

<label>
	<span>Nombre:</span>
	<input type="text"name="nombre" id="nombre"/>
</label>

Código CSS

div.cajetin input {
	border:1px solid #1d2a5b;
	color:#666666;
	width:180px;
}
div.cajetin label {
	display:block;
	margin-bottom:10px;
	color:#555555;
}

2. Botón de envío

A la hora de añadir el botón, destinado al envío del formulario, es importante que este resalte y destaque entre el resto del formulario. Cuando añadimos a nuestros formularios uno sin un estilo fijado es muy común que se muestre de diferentes formas en los distintos navegadores que utilicemos. Una solución para este problema es utilizar el botón de envío como si fuese un enlace más con la etiqueta a, dándole un estilo de botón (en este caso la clase ‘.verde’).

Código HTML

<a href="#" onClick="javascript:submit()" class="verde">Regístrate</a>

Código CSS

a {
	color:#3b59b1;
	text-decoration:none;
}
.verde {
	background:url('img/verde.png');
	border:0;
	height:22px;
	width:82px;
	color:#fff;
	font-size:12px;
	line-height:24px;
	text-align:center;
	font-weight:bold;
	display:block;
	text-decoration:none;
	margin:20px 25px;
}