Bienvenido a cursohacker.es. Puedes acceder a todo el contenido líbremente pero si deseas poder crear tus propios temas en el foro y que tus respuestas y comentarios se publiquen de forma automática regístrate como alumno aquí

Formulario HTML, primera exploración

Una de las partes más delicadas a la hora de elaborar un sitio web, o una aplicación que interactúa con los usuarios mediante un navegador de internet es la parte en la que pedimos al usuario alguna información y éste nos la entrega. Este proceso es muy delicado pues aunque nosotros pidamos un tipo de información concreta al usuario (su nombre, su dirección de correo....) el usuario es libre de introducir cualquier cosa y si nuestro sistema no está preparado para gestionar información errónea no sabrá cómo interpretar lo que el usuario nos ha dado.  Por este motivo cuando nosotros a través de un formulario html pedimos ciertos datos al usuario debemos validarlos antes de hacerlos llegar a nuestra base de datos. 

¿Por qué es tan importante validar los datos de un formulario HTML?

En primer lugar es muy importante validar estos datos porque la primera consecuencia de trabajar con datos erróneos es que nuestra aplicación o la aplicación que estamos auditando no será capaz de trabajar de forma correcta. Por ejemplo; si nosotros pedimos al usuario su número de móvil para que nuestra web sea capaz ede enviarle una alerta cuando se produzca algún evento y nosotros no verificamos que nos introduce no es un dato numérico el sistema no será capaz de enviar dicha alerta. Además podemos comprobar que nos de un número de 9 dígitos y en caso contrario avisar al usuario de que el dato introducido no es correcto. Evidentemente si comete un error en un dígito no podremos saberlo hasta que no le enviemos un SMS de confirmación. De lo que se trata a nivel de formulario HTML es de que si estamos esperando un número de móvil nos debe de llegar un número de 9 dígitios y NO otra cosa, puesto que en primera instancia buscamos ese número y luego mediante otro sistema comprobaremos que el número de 9 dígitos que nos ha dado es correcto.

EL caso descrito anteriormente refleja una situación frente a un usario normal que ha cometido un error a la hora de introducir los datos. Pero este no es nuestro mayor problema a la hora de securizar un formulario HTML. Nuestro principal problema son los usuarios malintencioandos que introducirán a posta datos erróneos para intentar modificar el comportamiento de la aplicación web. Ejemplo; Vamos a suponer que tenemos una tienda online y que como en la gran mayoría de las tiendas permitimos al usuario introducir el número de artículos que desea comprar de cada cosa antes de hacer el pago. Un usuario podría comprar 1 artículo, 2 artículos, 3 artículos... pero nunca -1 artículo, nuestro formulario debe ser capaz de evitar que el usuario nos ponga en la cantidad -1, porque si le dejamos introducir esa cifra nuestra tienda online podría restar el precio del producto al precio total del pedido, luego el usuario haría el pago del importe modificado y si no nos damos cuenta a posteriori enviaremos su pedido con el importe modificado.

El ejemplo anterior puede parecer algo casi imposible, pero la realidad es que no lo es para nada, se han llegado a dar casos en banca online en la que a la hora de hacer una transferecia online se podría modificar el dato de la cuenta de origen y poner una que no fuera la tuya. Estos son solo algunos de los motivos por los cuales validar un formulario HTML es algo OBLIGATORIO, y para poder alcanzar este objetivo has de conocer perfectamente como funcionan los formularios HTML.

Formularios en HTML

Los formularios de HTML son elementos presentes en páginas web ubicados siempre bajo estas etiquetas: <FORM> Y </FORM>. En el lenguaje HTML todos los elementos tienen un etiqueta para indicar donde empiezan <FORM> para el caso de los formularios y otra para cerrar el elemento </FORM> en el caso de los formularios. Así pues con estas dos etiquetas creamos formularios en HTML para interactuar con el usuario. Pasamos a ver que propiedades elementos puede contenter un formulario HTML. Empezamos con los parámetros obligatorios que todo formulario HTML ha de tener para funcionar correctamente:

  1. ACTION. "destino", donde "destino" es a donde se enviarán los datos introducidos por el usuario cuando éste pulse el botón de envío.
     
  2. METHOD. Se refiere al método que se va a emplear para realizar el el envío de los datos. Tenemos disponibles 2 métodos. Por un lado el método GET y por otro el método POST. Si utilizamos el primer método (GET) el usuario verá en la URL todos los datos que ha enviado. Como consecuencia se quedará guardado en su historial de navegación al alcance de cualquiera que pueda ver su historial. No debemos utilizar este método si estamos enviando información sensible. En cambio el método POST no deja rastro en la URL, es un método más seguro que GET y es el que se utiliza cuando estamos pidiendo al usuario información sensible. Imaginad que creamos un formulario para pedirle al usuario su clave y su contraseña para logear y utilizamos el método GET para hacer el envío. Ahora alguien revisa el historial de navegación de este usuario y verá una URL con dos parámetros de esta forma:
    cursohacker.es/user?Usuario="CursoHacker"&Password="M1C0nTRaS3ñ4".
    Los datos confidenciales usuario y contraseña habrían sido descubiertos por la persona que está mirando el historial.

Tipos de datos en un formulario HTML

Llega el momento de ver los distintos tipos de datos que tenemos disponibles en un formulario HTML para interactuar con el usuario. Nosotros no utilizaremos el mismo tipo para pedir un nombre, una contraseña o mostrar una lista con opciones de la cual el usuario ha de elegir una. Este es el motivo por el que hay distintas formas de interactuar con el usuario.

  1. <INPUT TYPE="TEXT"> Esta es la etiqueta que mas os váis a encontrar cuando examinéis formularos escritos en HTML. Se utiliza para pedir al usuario que introduzca un texto normal, se suele utilizar para pedir su nombre, su dirección o cualquier dato en el que queremos darle al usuario un alto grado de libertad. 

    Los parámetros que se pueden agregar son:
    NAME="nombre" Para asignarle el nombre a la variable.
    ID="nombre" Igual que NAME.
    VALUE="algo" Para que tenga un valor preestablecido.
    SIZE="n" Para darle "n" caracteres de largo a la caja de texto.
    MAXLENGTH="n" Para el máximo de caracteres escribibles (n).

    Ejemplo en el que pedimos a un usuario su nombre, lo guardamos en la variable "name" y como máximo permitimos que escriba 8 caracteres
    Introduce tu nombre: <INPUT TYPE="TEXT" name="usuario" size="8" maxlength="8">

    Y así es como se mostraría en la web:
    INPUT TYPE TEXT

  2. <INPUT TYPE="PASSWORD"> Es igual que el anterior solo que no se muestra el texto que el usuario escribe. Esto es una medida de protección para evitar que personas que estén detrás de nosotros vean la contraseña mientras la tecleamos.
     
  3. <INPUT TYPE="RADIO"> Mediante la opción RADIO creamos opciones para que el usuario tenga que escoger entre varias alternativas

    Los parámetors que se pueden agregar son:
    VALUE="valor" Dato que enviará la variable si es seleccionada.
    CHECKED Si debe estar seleccionada por defecto.
    NAME="nombre", es el nombre de la variable
    ID="nombre" igual que NAME.

    Ejemplo en el que pedimos al usuario que nos idique su sexo:
    <b>Selecciona tu sexo <BR></b>
    <input type="radio" value="Hombre" name="sexo">Hombre.<br>
    <input type="radio" value="Mujer" name="sexo">Mujer.<br>
    <input type="radio" value="No Indicado" name="sexo" CHECKED>Prefiero no indicarlo<br>

    Y así es como se vería en la web:
    INPUT TYPE RADIO
     

  4. <INPUT TYPE="CHECKBOX"> Utilizamos esta opción cuando a diferencia del tipo anterior queremos dejar al usuario que pueda seleccionar más de una opción. Funcionan exactamente igual que los tipo RADIO.

    Ejemplo en el que pedimos al usuario que elija las categorías a las que se quiere inscribir.
    <b>Escoge categoría<BR></b>
    <input type="checkbox" value="Informática" name="categoria">Informática.<br>
    <input type="checkbox" value="Matemáticas" name="categoria">Matemáticas.<br>
    <input type="checkbox" value="Física" name="categoria" CHECKED>Física.<br>

    Y así es como se vería:
    INPUT TYPE CHECKBOX
     

  5. <INPUT TYPE="HIDDEN"> Este campo se utilza para enviar información oculta sin que el usuario se percate de ello. Se puede por ejemplo detectar el navegador que está utilizando, y hacer que el formulario nos haga llegar esa información sin que el usuario tenga que especificarlo.
     
  6. <INPUT TYPE="SUBMIT"> Este campo crea el botón que será el que el usuario ha de pulsar para enviar la información.

    Ejemplo:
    <input type="submit" name="Submit" value="Enviar">
    INPUT TYPE SUBMIT
     

  7. <INPUT TYPE="RESET"> Igual que el anterior pero en vez de enviar la información del formulario reseta todos los valores que el usuario ha rellenado. Es especialmente útil para darle la opción al usuario de empezar de nuevo.
     
  8. <SELECT>. Utilizamos el tipo SELECT para crear una lista desplegable y que el usuario tenga que escoger una opción. Es muy similar al tipo RADIO. La principal ventaja es que si hay muchas opciones el tipo radio hará que el formulario crezca mucho, ya que se muestran todas las opciones en pantalla. Con la lista desplegable esto no ocurre:

    En el siguiente ejemplo pedimos al usuario que seleccione el método de pago:
    <SELECT NAME=“metodoPago”>
    <OPTION value="paypal" SELECTED>Pago por Paypal</option>
    <OPTION value="transferencia">Pago por transferencia</option>
    <OPTION value="contrareembolso">Pago contrareembolso.</option>
    </SELECT>

    Y así es como se mostraría en pantalla:
    SELECT

  9. <TEXTAREA> Utilizamos el tipo TEXTAREA para crear una caja en la que el usuario pueda escribir varias líneas. Esto es especialmente útil para pedir comentarios, reseñas, opiniones etcétera. Tiene dos parámetros principales a configurar, el número de filas y el número de columnas. 

    Vamos a ver en este ejemplo como crear una caja de texto de 10 filas y 80 columnas con un texto predefinido:
    <TEXTAREA id="comentario" rows="10" cols"80" > Escribe comentario</textarea>

    Y así es como se vería:
    TextArea formulario HTML

Este ha sido el primer acercamiento a formularios HTML que vamos a ver durante el curso. La primera medida para securizar un formulario HTML es conocer sus elementos y determinar si son los adecuados para el tipo de dato que se le está pidiendo al usuario. Después entrará en juego la validación de datos en sus dos vertientes tanto de lado del usuario para evitar por ejemplo que introduzca por error un dato y la validación de datos en el servidor para evitar a aquellos usuarios que nos meten adrede datos erróneos para modificar el comportamiento de nuestra web.

Tags: 

Si te ha sido de utilidad Compárteme