Tutorial: Como crear tu propio formulario validado – Parte 1
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:
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.
28 comentarios »
RSS feed para los comentarios de esta entrada. TrackBack URL
Deja un comentario
links útiles
Hola, quisiera saber como has hecho este formulario, se ve muy chevere. Gracias x la respuesta de antemano…
Que como lo he hecho? Explico como hacerlo en el tutorial.
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.
y la segunda parte?
Eso no esta la parte 2, o no dejaste el link???Saludos
Esta bueno, espero la validacion.
fffffffffffffffffffffffffffffffffff
Gran día , su blog está lleno de spam, debe debe antispam .
Heya estoy por primera vez aquí. Me encontré con este foro y yo en la búsqueda de lo verdaderamente útil y que me ayudó mucho . Tengo la esperanza de dar una cosa hacia atrás y ayudar a los demás como tú me ayuda .
¡Buenos días! Este mensaje no se podría escribir nada mejor! Leyendo este post me recuerda a mi compañero de habitación buena edad! Él siempre se mantiene hablando sobre esto. Yo transmita la presente escritura a él. Bastante seguro de que tendrá una buena lectura. Muchas gracias por compartirlo en 2kblog.net!
Hola Grupo 2kblog.net! Soy nueva en esta página web y quería decir hola. Esto puede ser un gran sitio web y me alegro im me uní. Nuevo en este blog, gracias por la bienvenida. Acabo de llegar a este maravilloso blog y quería presentarme a todo el mundo. Esto realmente es como un sitio de internet excelente.
If I reword a news article is that copyright ?
My brother advisable I may perhaps like this weblog. He was thoroughly right. This post definitely formed my day. You’re able to not picture just the amount of time I had spent for this information! Thank you!
Excellent read, I just passed this onto a friend who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that: Thanks for lunch! “A thing is not necessarily true because a man dies for it.” by Oscar Fingall O’Flahertie Wills Wilde.
I got what you intend, appreciate it for putting up.Woh I am delighted to find this website through google. “No one can earn a million dollars honestly.” by William Jennings Bryan.
Merely a smiling visitor here to share the love (:, btw great pattern . “Forget regret, or life is yours to miss.” by Jonathan Larson.
Very interesting points you have remarked, regards for putting up. “Brass bands are all very well in their place – outdoors and several miles away.” by Sir Thomas Beecham.
I got what you impart, thanks for putting up. Woh I am pleased to uncovering this website finished google. Thanks For Share 2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1.
I got what you will, thanks for putting up. Woh I am gladsome to uncovering this website finished google. Thanks For Share 2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1.
Adoro me mostrar peladinha na web cam
I got what you specify, thanks for putting up. Woh I am glad to make this website through google. Thanks For Share 2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1.
2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1 I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are incredible! Thanks! your article about 2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1Best Regards Veronica
This is the penalise 2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1 diary for anyone who wants to essay out out about this subject. You mention so overmuch its near wearying to argue with you (not that I truly would want…HaHa). You definitely put a new acrobatics on a theme thats been backhand almost for life. Respectable squeeze, just uppercase!
Howdy, i read your weblog occasionally and i own a related one and i was just curious in the event you get plenty of spam feedback? If so how do you protect against it, any plugin or anything you’ll be able to suggest? I get so much lately it’s driving me mad so any support is really much appreciated.
C’est vraiment un morceau frais et des renseignements utiles. Je suis convaincu que vous avez partagé cette information utile avec nous. S’il vous plaît restez-nous informés de ce genre. Merci pour le partage.
Me gusta la valiosa información que usted proporciona en 2kblog.net. Voy a marcar tu blog y comprobar de nuevo aquí con regularidad. Estoy bastante seguro de que voy a aprender un montón de cosas nuevas aquí! Lo mejor de las suertes para el próximo!
2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1 I was suggested this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my trouble. You’re wonderful! Thanks! your article about 2kBlog.net – Tutoriales web 2.0 – Tutorial: Como crear tu propio formulario validado – Parte 1Best Regards Rolf
Aprecio muito a cada um dos ler informativos sobre 2kblog.net. Eu certamente vai se espalhar a frase sobre o seu site com as pessoas. Cheers.