Pedir presupuesto

Tutorial – Crear un formulario paso a paso

Vamos a ver paso por paso como haríamos un formulario de forma que lo entendáis fácilmente.

Los pasos son los siguientes:

  1. Crear el formulario HTML
  2. Darle aspecto con CSS (Cascade Style Sheet)
  3. Añadirle código Javascript (Limitación en campos)
  4. Aplicar función Javascript en los campos
  5. Código final y Ejemplo
  6. Créditos

Pues una vez explicados los pasos que vamos a seguir, que mejor que ponernos manos a la obra.

1. Crear el formulario HTML

Lo primero es crear la estructura que formará nuestro formulario. En este ejemplo codificaremos un formulario para dejar comentarios en el que recogeremos algunos campos como Nombre, Apellidos, URL, Comentarios.

[html]

Ejemplo de formulario





[/html]

2. Darle aspecto con CSS (Cascade Style Sheet)

Una vez tenemos creado el “esqueleto” de nuestro formulario, vamos a “maquillarlo” para que sea más elegante.

[css]
.myForm {
width: 400px;
}
.myForm fieldset {
background-color:#F9F9F9;
border:1px solid #CCC;
padding: 10px;
margin: 0;
}
.myForm fieldset legend {
color:#666;
}
.myForm label {
display: block;
float: left;
padding: 0;
margin:0px 0px 5px 0px;
}
.myForm fieldset label:first-letter {
color:#999;
}
.myForm input, .myForm textarea {
width:95%;
}
.myForm input.button {
width:95%;
background-color:#C2C7C0;
border:1px solid #A0A0A0;
padding:3px;
color:#FFF;
}
textarea {
height:150px;
}
.myForm small {
color:#CCC;
}
[/css]

3. Añadirle código Javascript (Limitación en campos)

Algo que todo desarrollador tiene que hacer ante un formulario es controlar lo que el usuario introduce en cada uno de ellos, y aún más si los datos van a ser insertados en una base de datos (no es el caso de este tutorial).

[javascript]

[/javascript]

Como nuestro caso sólo servirá de ejemplo para ver como se utiliza Javascript, sólo haremos control del campo textarea para aplicarle un límite de 500 caracteres (la limitación la haremos en el paso siguiente).

4. Aplicar función Javascript en los campos

En este caso no será en los campos sino en el campo, en concreto en el textarea como he explicado en el punto anterior. Por tanto vamos a aplicarle la función:

Añadimos un «id» que será el contador o mejor dicho limitador del campo textarea.

[html]

Número de caracteres: 500

[/html]

Y después hacemos la llamada a la función javascript de la siguiente manera. Donde tenemos la linea que define el textarea, la modificaremos poniendo lo siguiente:

[html]

[/html]

5. Código final y Ejemplo

Por tanto, el código quedará de la siguiente manera:

[html]

Ejemplo de formulario




Número de caracteres: 500


[/html]

Para ver el ejemplo en funcionamiento hacer clic en el siguiente enlace: Ejemplo Formulario.

Fijaros que mientras vas escribiendo, en el campo textarea el número va disminuyendo hasta llegar 0, momento en el que no se podrá escribir más.

6. Créditos

El código del tutorial se ha sacado de un artículo publicado en Xyberneticos

¿Te ha gustado?, Comparte!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es