Formularios en html

[Cacao]

como va gente, mi asignatura pendiente son los formularios me traen loco, a ver si alguien me ayuda o orienta a como hacer uno tipo quiniela, con los nombres en un lado y una lista desplegable al otro con los signos.

[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

[Cacao]

cuando lo subo y envio, me sale que http://www.misitio.com/cgi-bin/formMail.pl " la pagina no existe".

¿????

y otra cosa para añair una casilla para poner el nombre y el e-mail.

[KarlanKas]

Hola de nuevo Cacao!

Sé que mis respuestas muchas veces son pesadas y llegan a exasperar a gente que lo que busca es sólo el código. Te pido perdón si ese es tu caso. Tampoco sé si has leido la respuesta, pero en la misma pone que necesitarás un CGI o una página PHP o ASP o algo del lado del servidor para procesar esa información y mandártela a tu dirección de correo (como supongo que quieres).

Si pones esa dirección y no compruebas antes si tienes el directorio cgi-form en tu servidor, el archivo formMail.pl dentro de dicho directorio, y que el mismo tiene permisos de lectura y ejecución para todo el mundo (creo que es CHMOD 755) es muy probable uqe no funcione.

Si no tienes el CGI lo puedes descargar de aquí. También en esa dirección te explican como instalarlo.

De todas formas sería bueno que preguntaras a tu proveedor de hospedaje web para que te dijera que sistema tiene él para enviar los formularios y si admite que instales tus propios CGI's.

Respecto a la segunda pregunta, creo que si investigas con lo que te he puesto en la anterior respuesta seguro que lo sacas por tí mismo.

Un saludo!!

[Cacao]

no tiene cgi y hay ke pagar una cantidad para ponerlo, !!!. lo akabo de leer en el manual ke te dan cuando compras un dominio.

e cambiado lo de /cgi-bin por (action="mailto:email"). me lo envia, a mi correo pero en archivo adjunto ke no se peude abrir

[Gerald]

Y soporta php tu hosting?

[Cacao]

buenas tardes tardes karlanka ya lo tengo todo resuleto !!1, y como tu dijistes he jugado un poco con los codigos y he echo virgerias jeje, ya puedo decir que soy un "iniciado" en esto de los formularios jajaja que no es broma, pero enserio me ha ayudado mucho un gran abrazo.

despues de muchas broncas con los formularios por fin nos volvemos a caer bien

eternamente agradecido !!! jaja saludos.

[KarlanKas]

No veas cómo me alegra leer eso, Cacao! Lo importante es perderle el miedo. Si quieres ayuda en cualquier otra cosa no tienes más que pedirla. Un saludo, maestro formularil