content top
Tutorial: Como crear tu propio formulario validado – Parte 1

Tutorial: Como crear tu propio formulario validado – Parte 1

Escrito por Krato en Tutoriales el 07 de 18 del 2009 | 5 respuestas

Bueno, en este tutorial dividido en 2 partes vamos a ver como crear un formulario de contacto desde el principio con nuestro estilo css y despues aprenderemos a validarlo en ajax mediante ejemplos sencillos y fáciles de comprender.

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:

Ejemplo validación

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.

Tutorial: Como crear tu propio formulario validado - Parte 1



5 comentarios »

  1. theflyperuNo Gravatar says:
    Octubre 7th, 2009

    Hola, quisiera saber como has hecho este formulario, se ve muy chevere. Gracias x la respuesta de antemano…

  2. KratoNo Gravatar says:
    Noviembre 2nd, 2009

    Que como lo he hecho? Explico como hacerlo en el tutorial.

    ¿A que te refieres?
  3. WP ThemesNo Gravatar says:
    Enero 20th, 2010

    Good fill someone in on and this fill someone in on helped me alot in my college assignement. Say thank you you as your information.

  4. lashjgNo Gravatar says:
    Julio 24th, 2010

    y la segunda parte?

  5. ConsultorNo Gravatar says:
    Agosto 27th, 2010

    Eso no esta la parte 2, o no dejaste el link???Saludos

Canal RSS de los comentarios de la entrada. URL para Trackback

Deja un comentario