Esto es un simple formulario de contacto,lo que tienes que hacer es rellenar donde pone nombre y donde pone apellidos,le das a enviar y te salta el programa o el internet explorer directamente para mandar un mensaje a tu correo electrónico.
------------------------------------------------
- Código:
- <FORM NAME="Enviar" Enctype="text/plain" action="mailto:[color=red]email@email.com[/color]?Subject=Cualquier comentario" method="post">
- [color=red]Cuentanos tus comentarios[/color]<br><br>
- <b>
- Nombre: <input type="text" name="Nombre"><br>
- Apellido: <input type="text" name="Apellido"><br>
- <input type="submit" value="enviar"></b>
- </FORM>
--------------------------------------------------
se edita:
email@email.com --->ahí pon tu e-mail
Cuentanos tus comentarios ---> ahí si quieres puedes poner otra cosa como,enviame un correo electrónico.
Este código ha sido probado en:
Internet Explorer
Salu2¡¡
Fuente: http://html.hazunaweb.com/123.php
Como ejercicio final hemos hecho un formulario intentando reunir en él todo lo que hemos dado y, sobre todo, todas las opciones que tenemos a la hora de confeccionar un formulario.
El formulario lo tienes en el siguiente enlace: ejemplo de formulario.
Lo idóneo es que lo observes y trates de hacerlo tú, sin tener que mirar el código que nosotros hemos utilizado. Por si necesitarás hacerlo, aquí te dejamos el código:
| <form action="mailto:emaildelaempresaquehaceelformulario@email.com" method="post" enctype="text/plain"> Nombre: <input type="text" name="nombre" size="25" maxlength="50"><br><br> Apellidos: <input type="text" name="apellidos" size="35" maxlength="100"> <br><br> Correo electrónico: <input type="text" value="@" name="correo" size="40" maxlength="100"> <br><br> Población: <input type="text" name="poblacion" size="15" maxlength="50"> <br><br> Provincia: <input type="text" name="provincia" size="15" maxlength="50"> <table width="100%" border="0" cellspacing="0" cellpadding="10"> <tr> <td>Edad: <br> <input type="radio" name="edad" value="020"> 0-20 <br> <input type="radio" name="edad" value="2040" checked> 20-40 <br> <input type="radio" name="edad" value="4060"> 40-60 <br> <input type="radio" name="edad" value="60100"> 60-100</td> <td>¿Cómo nos conociste?<br> <input type="checkbox" name="conocer"> A través de un amigo.<br> <input type="checkbox" name="conocer"> A través de un buscador.<br> <input type="checkbox" name="conocer"> Navegando por la red.<br> <input type="checkbox" name="conocer"> Otros</td> </tr> </table> Opinión sobre nuestra página web<br> <textarea cols="40" rows="5" name="opinion">Escriba aquí su opinión...</textarea> <br><br> Tiene alguna sugerencia... <br> <textarea cols="40" rows="5" name="sugerencias">Escriba aquí sus sugerencias...</textarea> <br><br> ¿Cúanto navegas por intenet? (Señala la opción que más se acerque)<br> <select name="frecuencia" size="2"> <option value="1">2 horas al día. <option value="2">4 horas al día. <option value="3">10 horas a la semana. <option value="4">20 horas al mes. </select> <br> <br> <table width="50%" border="0" align="center" cellpadding="10" cellspacing="0"> <tr> <td><div align="center"> <input type="submit" value="Enviar formulario"> </div></td> <td><div align="center"> <input type="Reset" value="Borrar formulario"> </div></td> </tr> </table> </form> |
RESUMEN DE LA CLASE (OPCIONES COMENTADAS CON EJEMPLO)
Formularios III: listas de opciones.
| Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de selección u opciones se escriben gracias a la etiqueta <selection> y a su cierre.
Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos preguntar, por ejemplo, cuál es el medio de transporte favorito de nuestro usuarios, el código de la lista de selección podría ser el siguiente:
Y el resultado quedaría de la siguiente manera.
Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea más de una opción a la vez en la lista. Para ello utilizaremos “size”, indicando el número de opciones que queremos que se muestren.
En la lista anterior si quisieramos que se vieran dos opciones, deberíamos cambiar el código anterior por el siguiente:
Para obtener el siguiente resultado:
También podemos definir si queremos que se pueda elegir más de una opción a la vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira primero cómo quedaría nuestro código.
Y aquí comprobarás lo que nos permite hacer este atributo.
Otra cosa que podemos predefinir es que la opción que aparezca seleccionada al principio no sea la primera que está en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opción que queramos que aparezca como seleccionada. En el código siguiente, queríamos que apareciera seleccionada la opción del tren.
Y aquí puedes ver cual ha sido el resultado.
Por último esta el atributo value. Este atributo es muy útil para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un número o una letra a cada opción.
El atributo se escribe dentro de cada opción y se define el valor del mismo. Por ejemplo, en la primera lista que te hemos presentado podríamos valorar nuestras opciones de la siguiente manera:
Y en el supuesto de seleccionar por ejemplo la opción del avión, al programa (o al correo electrónico) le llegaría el siguiente dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones.
Listas de botones: radio
A continuación vamos a ver otro tipo de listas de opciones o de selección. Son listas con botones de tipo radio. Estos botones se escriben mediente la etiqueta type=”radio”.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El código nuevo quedaría de la siguiente manera:
Y el cambio de aspecto es evidente. Aquí lo tenéis:
Coche Avión Tren
Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la lista de opciones tiene activada la opción avión:
Y observa el resultado que obtenemos…
Coche Avión Tren
Listas de cajas: checkbox.
Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuación.
El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=“checkbox”.
Otra diferencia es que así como las listas de botones tipo “radio” sólo permitiían elegir una opción (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones.
Aquí tienes el código de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:
Y observa a continuación el resultado:
Coche Avión Tren |
No hay comentarios:
Publicar un comentario