Guia y Documentacion HTML: Formularios
Guía y Documentación HTML: Formularios



Los formularios permiten que el usuario introduzca datos mediante un cuestionario usando las páginas WEB.
Asociado al concepto de formulario, encontramos el concepto CGI(Common Gateway Interface), cuyo significado es un programa que corre.
El primer tag que necesitamos es el siguiente:
<form> y su cierre </form> . Este tag determinara la accion a realizar y el metodo de envio de los datos. entre estos tags se debe introducir todos los elementos de entrada de información que el usuario desea enviar a nuestro servidor.
Los atributos de este tag son los siguientes:
  • method = post|get . Indica el método a través del cual se enviarn los datos al servidor.
    La diferencia entre ambos métodos reside en la recepción de los datos en el servidor.
    Cuando utilizamos el método POST los datos se recibiran en nuestro CGI a través de la entrada standar (stdin), mientras que el método GET los datos se recibirían en una variable de entorno llamada QUERY-STRING.
  • action = URL. Indica la acción a ejecutar cuando se ejecuta el submit.
    La acción más habitual es llamar a un programa CGI, que trate los datos, si bien, se puede hacer una llamada a la aplicación de mail, de manera que los datos se reciben mediante un mail.
  • enctype = valor. Indica el tipo de encriptación que se va a realizar con los datos que se van a enviar

Una vez definido el tag form , necesitamos definir los tags de entrada de datos:
  • <input> . Este tag nos permite al usuario introducir los datos en función de su tipo, siendo por ello muy importante este atributo. Los atributos asociados a este tag son:
    • type = valor . Este atributo nos indica el tipo de datos que se van a introducir.
      Podemos encontrar los siguientes valores:
      • text . Significa que los datos introducidos son de tipo texto. Este será el tipo adoptado por defecto si no se indica.
      • password . Significa que los datos introducidos son de tipo texto, pero al ser una contraseña cuando son tecleados el resultado visualizado por pantalla es un conjunto de asteriscos.
      • hidden . Significa que los datos no son introducidos por el usuario, sino que son datos ocultos, introducidos por el diseñador de la página HTML.
      • radio . Este tipo de input permite realizar una seleccion dentro de un conjunto de items de manera que una selección excluya a otra.
      • chexkbox . Similar al anterior, con la particularidad de poder habilitar o inhabilitar la elección en cualquier momento, no siendo excluyentes entre varias entradas.
      • image . En este caso la entrada de datos se realiza al hacer "click" con el raton sobre algún punto de un gráfico, obteniendo como resultado, en el programa que gestiona los datos introducidos el nombre del elemento (atributo name) y las coordenadas donde estaba situado el puntero del ratón.
      • submit . Este tag nos presenta un botón donde se debe pulsar (con el ratón) para enviar los datos introducidos en el formulario.
      • reset . Este tag nos presenta un botón donde se debe pulsar (con el ratón) para borrar todos los datos introducidos en el formulario.
      • file . (Sólo Netscape) Este tipo permite selecionar un fichero al usuario para enviarlo al servidor.
    • size = valor . Este atributo nos indica la amplitud de la ventana de entrada de datos.
    • maxlength = valor . Este atributo nos indica la longitud de los datos de entrada.
    • name = valor . Este atributo indica el nombre que se le da al objeto, para su posterior
    • value = valor . Este atributo indica el valor por defecto que tendrá el tag asocidado. Especial mención merecen los tipos submit y reset, puesto que con este atributo se indica el texto que se desea que aparezca en el botón, así como en el tipo hidden puesto que se le debe asignar un valor.
    • checked . Este atributo indica la selección ofrecida al usuario por defecto en los inputs de tipo radio y checkbox .
    • src = camino/fichero . Este atributo indica el el camino hasta el gráfico que se utilizará para la entrada de datos.
  • <select> . Este tag permite presentar en la pagina una caja de selección con las opciones que decide el diseñador. Los atributos asociados a este tag son los siguientes:
    • name = valor . Este atributo indica el nombre que se le da al objeto, para su posterior tratamiento en el CGI al cual se llama, o para su tratamiento por los scripts.
    • size = valor . Este atributo indica el tamaño de las opciones visibles por defecto en la página.
    • multiple . Este atributo indica si se desea que se pueda realizar un selección múltiple por parte del usuario, de manera que pueda tener varias opciones seleccionadas
    • selected . Este atributo indica la selección ofrecida al usuario por defecto.
    Es necesario cerrar el tag <select> con el tag </select> .
    Asociado a este tag encontraremos el tag <option> a continuación del cual podemos introducir el texto que se visualiza dentro de cada opción del select.
    Asociado a este tag tenemos el atributo selected, que es similar al atributo checked de los input, de manera que por defecto la opción deseada es la marcada con este atributo.
  • <textarea> . Este tag permite al usuario introducir textos (en formato ASCII) de longitud indefinida.
    Los atributos asociados a este tag son los siguientes:
    • rows . Determina el número de filas que se desea tenga la ventana de entrada de datos.
    • cols . Determina el número de columnas que se desea tenga la ventana de entrada de datos.
    • name = valor . Este atributo indica el nombre que se le da al objeto, para su posterior tratamiento en el CGI al cual se llama, o para su tratamiento por los scripts.

El siguiente formulario es un ejemplo de todo los expuesto anteriormente:

<form method = post action = URL>
Input 1 <input type = texto name = input1 size = 30 maxlength = 20>
Input 2 <input type = password name = input2 size = 30 maxlength = 20>
Input 3 <input type = hidden name = input3 value = texto_oculto>
Input 4 <input type = image name = input4 src = "espro.gif">
Input 5 <input type = file name = input5 size = 30>
Input 61 <input type = radio name = input6>
Input 62 <input type = radio name = input6>
Input 63 <input type = radio name = input6 checked>
Input 71 <input type = checkbox name = input7 checked>
Input 72 <input type = checkbox name = input7>
Input 73 <input type = checkbox name = input7>
Select
<select name = select1>
<option> Uno
<option> Dos
<option> Tres
</select>
<select name = select2 multiple size = 4>
<option> Uno
<option> Dos
<option> Tres
<option> Cuatro
</select>
Area de Texto
<textarea rows = 5 cols = 30>
</textarea>
Pulsar para ver ejemplo
Los formularios le permitirán que sus usuarios usen sus páginas para comunicarse con usted o para activar funciones especiales. Si tiene dudas escribanos a support@interec.com.