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:
  1. <form action="#" method="post" name="myForm" class="myForm">
  2.         <legend>Ejemplo de formulario </legend>
  3.         <p>
  4.           <label for="name" accesskey="n">Nombre: <small>( Requerido ) </small> </label>
  5.           <input type="text" id="name" name="name" tabindex="1" value="" title="name" />
  6.         </p>
  7.         <p>
  8.           <label for="email" accesskey="e">Email: <small>( No se mostrará ) </small></label>
  9.           <input type="text" id="email" name="email" tabindex="2" title="email" />
  10.         </p>
  11.           <p>
  12.           <label for="url" accesskey="w">Website:</label>
  13.           <input name="url" type="text" id="url" tabindex="3" title="url" value="http://" />
  14.         </p>
  15.         <p>
  16.           <label for="comentario" accesskey="c">Comentario: </label>
  17.           <textarea name="comentario" id="comentario" tabindex="4" title="comentario"></textarea>
  18.         </p>
  19.         <p>
  20.           <input type="submit" value="Enviar" id="submit" class="button" tabindex="5" />
  21.         </p>
  22.     </fieldset>
  23. </form>

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:
  1. .myForm {
  2.         width: 400px;
  3.       }
  4.       .myForm fieldset {
  5.         background-color:#F9F9F9;
  6.         border:1px solid #CCC;
  7.         padding: 10px;
  8.         margin: 0;
  9.       }
  10.       .myForm fieldset legend {
  11.           color:#666;
  12.       }
  13.       .myForm label {
  14.           display: block;
  15.           float: left;
  16.           padding: 0;
  17.           margin:0px 0px 5px 0px;
  18.       }   
  19.       .myForm fieldset label:first-letter {
  20.           color:#999;
  21.       }
  22.       .myForm input, .myForm textarea {
  23.           width:95%;   
  24.       }
  25.       .myForm input.button {
  26.           width:95%;
  27.           background-color:#C2C7C0;
  28.           border:1px solid #A0A0A0;
  29.           padding:3px;
  30.           color:#FFF;
  31.       }
  32.       textarea {
  33.           height:150px;
  34.           }
  35.       .myForm small {
  36.           color:#CCC;
  37.       }

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:
  1. <script language="javascript" type="text/javascript">
  2.       function string(what,chars,counter) {
  3.           var d=document;
  4.           if (what.value.length> chars) {
  5.               what.value=what.value.substr(0,chars);
  6.               alert('Excediste los '+chars+' caracteres en el campo de comentario');
  7.           }
  8.           counting = (chars - what.value.length);
  9.           c = document.getElementById(counter);
  10.           c.innerHTML = counting;
  11.       }
  12.       //-->
  13.       </script>

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:
  1. <p>N&uacute;mero de caracteres: <span id="contador">500</span></p>

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:
  1. <textarea onkeyup="string(this,500,'contador');" onkeydown="string(this,500,'contador');" onblur="string(this,500,'contador');" name="comentario" id="comentario" tabindex="4" title="comentario"></textarea>

5. Código final y Ejemplo

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

HTML:
  1. <form action="#" method="post" name="myForm" class="myForm">
  2.         <fieldset>
  3.         <legend>Ejemplo de formulario </legend>
  4.         <p>
  5.           <label for="name" accesskey="n">Nombre: <small>( Requerido ) </small> </label>
  6.           <input type="text" id="name" name="name" tabindex="1" value="" title="name" />
  7.         </p>
  8.         <p>
  9.           <label for="email" accesskey="e">Email: <small>( No se mostrará ) </small></label>
  10.           <input type="text" id="email" name="email" tabindex="2" title="email" />
  11.         </p>
  12.           <p>
  13.           <label for="url" accesskey="w">Website:</label>
  14.           <input name="url" type="text" id="url" tabindex="3" title="url" value="http://" />
  15.         </p>
  16.         <p>N&uacute;mero de caracteres: <span id="contador">500</span></p>
  17.         <p>
  18.           <label for="comentario" accesskey="c">Comentario: </label>
  19.           <textarea onkeyup="string(this,500,'contador');" onkeydown="string(this,500,'contador');" onblur="string(this,500,'contador');" name="comentario" id="comentario" tabindex="4" title="comentario"></textarea>
  20.         </p>
  21.         <p>
  22.           <input type="submit" value="Enviar" id="submit" class="button" tabindex="5" />
  23.         </p>
  24.         </fieldset>
  25.       </form>

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

Posts Relacionados