Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 50

Visitas el mes pasado: 29

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. Formularios (III)

10.3 Contenido: Más campos

Paso 26

logo miweb

Listas desplegables.

Esta página es continuación de las dos anteriores en las que estamos construyendo un formulario para nuestra web. Aquí incluiremos otros campos del formulario. Veremos primero las listas desplegables, y después veremos el control y envio del formulario.

Empezamos por las listas desplegables. Ésta es una lista de opciones que podemos ver al pulsar sobre la flecha de la derecha que aparece en un recuadro donde vemos la primera opción de la lista. Al pulsar en la flecha se despliega la lista y podemos elegir la opción.

Vamos a poner una lista desplegable en nuestro formulario. Se utiliza para ello la etiqueta select y dentro de esta etiqueta se incluyen otras etiquetas option con cada una de las opciones.

Abrimos el archivo formulario.html con el editor de textos. Dentro del formulario (etiqueta form) habíamos puesto dos etiquetas div de clase.

Ampliamos el código de la segunda etiqueta, y escribimos, después de lo que ya hay escrito, lo siguiente (texto en azul) :

  <div class="seccion">
    <h4>Aficiones</h4>
    <p><input type="checkbox" name="Deportes" value="Si" /> Deportes</p>
    <p><input type="checkbox" name="Cine" value="Si" /> Cine </p>
    <p><input type="checkbox" name="Música" value="Si" /> Música </p>
    <p><input type="checkbox" name="Noticias" value="Si" /> Noticias y Actualidad</p>
    <h4>Edad</h4>
    <p>Elige cual es tu franja de edad.</p>
    <p><select name="edad">
      <option value="menos de 20">Menos de 21 años</option>
      <option value="de 21 a 30">Entre 21 y 30 años</option>
      <option value="de 31 a 40">Entre 31 y 40 años</option>
      <option value="de 41 a 60">Entre 41 y 60 años</option>
      <option value="más de 61">Más de 61 años</option>
    </select></p>
  	
  </div>

La etiqueta select indica que tenemos un lista desplegable. Ésta lleva el atributo name donde incluimos el tipo de dato que queremos recoger.

Dentro de la etiqueta select incluimos varias etiquetas option. Cada una de estas etiquetas es un opción. El atributo value diferencia los datos que contiene cada opción, e indicará cuál es la opción seleccionada.

Una vez que hemos escrito el código anterior, cerramos y guardamos el archivo formulario.html, y lo abrimos después con el navegador para ver el resultado. El archivo debe quedar como el del siguiente enlace:


En el formulario aparece ahora en último lugar una lista desplegable. Si pulsas en la flecha de la derecha verás que aparecen el resto de opciones.


Botones de control

Todo formulario debe tener un botón de envío para poder ser enviado. También podemos poner un botón de reinicio o "reset", que borra todos los datos que se han puesto y reinicia el formulario.

Estos botones se ponen mediante etiquetas input. Para el envio del formulario usaremos la etiqueta:

<input type="submit" value="enviar" />

El tipo "submit" indica que éste es el botón que envia el formulario, y en el atributo value pondremos como valor el texto que aparece dentro del botón.

El botón de reinicio es similar al botón de envio, sólo que aquí pondremos type="reset" :

<input type="reset" value="reiniciar" />

Vamos ahora a añadir estos botones a nuestro formulario. Abrimos el archivo formulario.html con el editor de textos, y dentro de la segunda etiqueta de clase del formulario, (segunda etiqueta div class=seccion") y después de lo que hemos puesto en el apartado anterior, escribimos lo siguiente:

    <h4>Borrar o enviar</h4>
    <p><input type="reset" value="Borrar Todo" />
      : Borra todo y reinicia el formulario.</p>
    <p><input type="submit" value="Enviar" /> 
      : Abre el programa de correo para enviar el formulario.</p>

Completamos con esto la segunda sección del formulario, y también el contenido de la página. Cerramos y guardamos el archivo formulario.html y comprobamos el resultado. Pra ello abrimos después el archivo con el navegador, el cual debe quedar como el del siguiente enlace:


El formulario ya esta completo, pero no está presentable de cara al usuario. Falta por lo tanto aplicar el estilo CSS. Veremos esto en el siguiente paso.

Podemos comprobar que el formulario funciona rellenando algunos datos (campos) y pulsando luego en el botón enviar. Al pulsar en el botón enviar se nos abrirá el programa de correo que tengamos instalado en nuestro ordenador. Se supone por tanto que el usuario tiene instalado un programa de correo o "cliente de correo". Esta es una aplicación o programa que organiza el correo y puede tanto mandar como recibir correos una vez configuarado.

La mayoría de usuarios suelen tener algún programa "cliente de correo", ya que algunos paquetes como el "Microsoft Office" de Windows lo llevan incorporado.

Al pulsar en enviar, tal como hemos dicho, se nos abre el programa de correo, con un correo ya listo para enviar, es decir la "bandeja de entrada" en modo "redactar". Aparecen los datos que se han seleccionado listos para enviar, y aparece también la dirección de envio que hemos puesto en el atributo action="mailto:dirección@correo.com de la etiqueta form. Por lo tanto el usuario no tiene mas que pulsar en el botón de "enviar" para enviar sus datos.

Esta forma de enviar formularios es muy rudimentaria, ya que la mayoría de páginas emplean otros sistemas que requieren saber algún lenguaje más de programación como PHP o Ajax. Sin embargo a nosotros, para hacer nuestras pruebas nos vale.

Si hemos puesto en el atributo action nuestro propio correo, y si tenemos instaldo un cliente de correo, podemos comprobar el envio del formulario al pulsar el botón de envio.


Código completo del archivo

Por último, antes de hacer un nuevo archivo para el código CSS y completar la página, dejaremos el código completo del archivo formulario.html.

Como el código es demasiado largo, y puede que sólo te interese si hay algo que te falla en la ´ página, para no alargar demasiado esta página lo pondremos en un archivo aparte que puedes ver en el siguiente enlace:




En el siguiente paso acabamos esta página al incorporar un nuevo archivo CSS que nos maquetará y dará estilo al formulario.

Formulario: Estilo




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com