Formularios en html

[KarlanKas]

Hola Cacao!

Lo que dices es lo más común en los comienzos de esto de la programación web. Los formularios, tal vez lo más útil de HTML, es lo que más cuesta a la hora de enterarse de como funcionan. Pero no te preocupes, con el tiempo y vistando páginas como esta ya verás como pronto te vuelves todo un profesional del mundo formularil .

Un formulario no es sino una forma de interactar con el visitante de tu web, brindándole la posibilidad de informarnos de determinados aspectos de interés para los dos (interés para él porque le interesa que lo sepas e interés para tí ya que tú lo quieres saber). Jejeje! como me enrollo!

El caso es que para que esa información pueda traspasarse, para que el formulario sea tal necesita estar entre las etiquetas <FORM> y </FORM>. En la etiqueta <FORM> además determinamos ciertos parámetros necesarios para recibir esa información.

Una de ellas es dónde mandar los datos para su proceso. Esto se consigue con la propiedad ACTION. Esto es importante porque HTML puede recoger la información, pero no puede procesarla. Para procesarla necesitas algo que trabaje en el lado del servidor: un CGI, una página PHP... Así si tenemos el archiconocido CGI de formMail podemos poner <FORM ACTION="cgi-bin/formMail.pl">.

Para poder atriburir cada contenido a una variable o para poder manejar dicho formulario con JS deberíamos darle un nombre. Sí, sí... hay que "bautizar" cada elemento de un formulario (incluido este) con un nombre único. Aquí vamos a ponerle un nombre de lo más original: <FORM ACTION="cgi-bin/formMail.pl" NAME="formulario">.

Otro atributo es METHOD, con este atributo símplemente indicamos si queremos que los datos enviados se vean en la url de destino o no. Si no ponemos nada o ponemos GET se verán, si no queremos que se vean debemos poner POST. Así, si no queremos que se vea ponemos:
<FORM ACTION="cgi-bin/formMail.pl" NAME="formulario" METHOD="post">

Bueno, pues ya tenemos nuestra etiqueta FORM, ahora vamos a por los inputs y demás.

Por lo que dices quieres hacer una lista desplegable con los distintos posibles resultados (1X2). Bien, pues para eso te recomiendo meterlo dentro de una tabla. Pero como supongo que eso ya lo habrás pensado no voy a ponerme pesado. Vamos a centrarnos en la lista desplegable (perdona que me enrollo como las persianas!).

La lista se logra con la etiqueta <SELECT>. Esta etiqueta además utiliza otra etiqueta que es <OPTION>. La sintaxis sería:
<SELECT NAME="resultado_1"> (recuerda que todos los elementos deben tener un nombre único).

Debajo ponemos las distintas opciones que debe contener dicha lista con <OPTION> y cerramos la etiqueta con un </SELECT>. cada option debe tener un valor. este valor se le da con VALUE. Así lo que se pase cuando se envíe el formulario será el value del option que hayas elegido. En el ejemplo uqe pides sería:
<SELECT NAME="resultado_1">
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="X">X</OPTION>
<OPTION VALUE="2">2</OPTION>
</SELECT>

Entonces nuestro formulario quedaría:

Código PHP:

  <FORM ACTION="cgi-bin/formMail.pl" NAME="formulario" METHOD="post">
 
<TABLE>
<TR>
<TD>
Real Madrid - FC Barcelona
</TD>
<TD>
 <SELECT NAME="resultado_1">
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="X">X</OPTION>
<OPTION VALUE="2">2</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
 
</FORM> 
   

Obviamente debes poner un select por cada uno de los 14 partidos de la quiniela.

Pero a nuestro ejemplo le falta algo... uno rellena su quiniela ¿y cómo le dice que la mande al ordenador? Y es que nos falta la etiqueta más importante.

Las etiquetas de un formulario suelen llamarse todas INPUT (salvo la SELECT que acabamos de ver y la TEXTAREA). Sólo se distinguen entre ellas por un atributo que es TYPE. TYPE puede tener varios valores:

"hidden" -> Es un valor oculto, no lo muestra el formulario.
"text" -> Es la típica caja de texto para poner tu nombre o lo que sea.
"password"-> Es como una text pero pone * en vez de las letras.
"radio" -> Son estos botones redonditos... se usan para elegir entre distintas opciones... es como el SELECT pero viendo todas las opciones desde el principio.
"checkbox" -> Son las típicas cajitas que se pinchan para decir que recuerde la contraseña.
"file" -> Se utiliza para seleccionar y enviar un archivo
"submit" -> Es la que nos interesa, es la encargada de mandar el formulario. Se puede sustituir por "image" cuando queremos que el botón de enviar el formulario sea una imagen.
"reset" -> Borra todo lo puesto en el formulario.

Todos los INPUT tienen el atributo VALUE que lo que hace es darle un valor inicial que en determinados INPUT se puede cambiar luego. Así si en un "text" ponemos "Hola!" aparecerá la cajita con el "Hola!" ya escrito, pero nada nos impedirá borrarlo y escribir otra cosa. Bueno... esto no es del todo cierto, ya que si se le pone dentro de la etiqueta "READONLY" no se podrá modificar. Con "DISABLED" evitamos que se pueda utilizar un INPUT.

Así el botón de enviar sería:
<INPUT TYPE="submit" NAME="enviar" VALUE="Mandar!">

Si quisieramos que fuera una imagen pondríamos:
<INPUT TYPE="image" NAME="enviar" SRC="imagen.jpg">

Así, el formulario quedaría así:

Código PHP:

  <FORM ACTION="cgi-bin/formMail.pl" NAME="formulario" METHOD="post">
 
<TABLE>
<TR>
<TD>
Real Madrid - FC Barcelona
</TD>
<TD>
 <SELECT NAME="resultado_1">
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="X">X</OPTION>
<OPTION VALUE="2">2</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT TYPE="submit" NAME="enviar" VALUE="Mandar!">
</TD>
</TABLE>
</FORM> 
   

Espero no haberte liado más... si tiemes cualquier duda... pregunta!!

Un saludo