Lo primero que debemos hacer esabrir nuestro editor web y crear un documento html ya que en este caso no será necesario para enviar el formulario ya validado que la página esté en php.

Una vez tengamos abierto nuestro editor de texto, (yo en mi caso uso dos, Notepad++Portable para el código  y Dreamweaver para el css) empezamos a escribir el código. En este caso mi formulairo tiene el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<form id="valida" method="post">
<h2>2kBlog</h2>
Tutorial: Como crear tu propio formulario validado - Parte 1
<ul>
	<li>
		<label class="descripcion">Nombre </label>
<input id="nombre" class="clear" type="text" value="Nombre" /></li>
	<li>
		<label class="descripcion">Apellidos </label>
<input id="apellidos" class="clear" type="text" value="Apellidos" /></li>
	<li>
		<label class="descripcion">Email </label>
<input id="email" class="clear" maxlength="255" type="text" value="E-mail" /></li>
	<li id="li_5">
		<label class="descripcion">Género </label> 
<select id="genero">
 
<option selected="selected" value="0">Nada</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
<option value="3">Niño</option>
</select></li>
	<li id="li_4">
		<label class="descripcion">Sobre ti </label>
			<textarea id="sobre_ti" cols="60" rows="8">Descríbete  en este campo</textarea></li>
	<li>
<input id="enviar" type="button" value="Enviar" />
<input id="reset" type="button" value="Restablecer" /></li>
</ul>
</form>

Voy a explicar el código:

Lo pimero es que en la linea 6 hace referencia al la página que contiene el estilo que despues veremos.

En la linea 9, es decir la de la etiqueta “<form>” como veis no definimos la acción si no que solo el id del formulario y el método de trapaso de las variables, en este caso, post. Vereis porque hago esto en la última parte del tutorial.

Despues creamos las estructuras en este caso mediante <ul> y <li>.

Para cada etiqueta del campo a rellenar que en este caso estan en las lineas:  14, 17, 20, 23 y 32 añadimos la clase “descripcion” que después veremos lo que contiene. Tan solo es para darle formato.

Y para cada campo añadimos el id correspondiente, le damos la clase “clear” que veremos en la segunda parte del tutorial y le damos un valor.

En el campo de textarea añadiremos también la linea de onFocus que nos servirá para que cuando un usuario pulse vaya a escribir en ese campo se elemine el valor por defecto del textarea.

Y en los botones en vez de definir el boton como type=”submit” lo cambiamos a type=”button” para que el formulario no se envie por defecto si no que como veremos en la segunda parte del tutorial lo podamos validar con ajax.

Bueno, y ahora vamos al css. para este ejemplo he creado un css sencillo. Para crearlo simplemente crear un texto plano (un archivo txt) y despues le cambias la extensión de txt a css.  Aquí dejo el código aunque al final de este primer tutorial incluiré el ejemplo para descargar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

@charset "utf-8";
/*
<2kBlog - Turorial: Como crear tu propio formulario validado - Parte 1
*/
html {
background-color:#2d2d2d;
}
 
body {
height:auto;
width:auto;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF;
}
 
ul {
list-style-type:none;
}
 
.descripcion {
border:none;
color:#f4f4f4;
display:block;
font-size:95%;
font-weight:700;
margin-top:5px;
}
 
input {
font-weight:bold;
color:#09F;
}
 
input:focus {
border: 2px dotted #09F;
}
 
textarea {
font-weight:bold;
color:#09F;
}	
 
textarea:focus {
border: 2px solid #09F;
}
 
select {
font-weight:bold;
color:#09F;
}
 
#enviar, #reset {
margin-top:20px;
color:black;
}

Bueno, el css es simple ¿no?  Tan solo tiene dos pseduo-clases paraque cuando un campo reciba enfoque cambie el color del borde a un color azul. y en la eiqueta ul le ponemos el list-style-type:none para que no salga ningún punto si no que quede como si fuera una tabla.

Ahora que teneis los dos archivos tan solo crear un carpeta y copiar los dos archivos dentro de la misma. Y probar el archivo html, debería saliros algo muy parecido a ésta imagen:

Debería de mostrar algo muy parecido

Y si no revisar el código , algo os faltará. También podemis poner vuestros problemas o agaradeciendo o simplemente escribiendo algo en el formulario de comentario que teneis abajo.

Aquí os dejo el ejemplo funciable de la primera parte del tutorial. En la siguiente parte veremos como validarlo fácilmente con jQuery.