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: 33

Visitas el mes pasado: 44

logo

Donativos

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




10. Formularios (II)

10.2 Contenido: Botones

Paso 25

logo miweb

Botones radio

En esta página continuamos con el contenido del formulario que hemos empezado a hacer en la página anterior. En la página anterior hemos puesto dentro del formulario unas etiquetas de formulario o "campos" que permiten al usuario escribir texto para ser enviado.

En esta página veremos otros campos de formulario, en los que el usuario puede elegir entre varias opciones. Empezamos por los botones radio.

Los botones radio permiten al usuario elegir una opción, y sólo una, entre varias disponibles. Vamos a añadir unos botones tipo radio a nuestra página, y después veremos cual es la estructura que empleamos.

Abrimos el archivo formulario.html con el editor de textos. Vemos que dentro de la etiqueta form del formulario, hay otra etiqueta div class="seccion". Dentro de esta última etiqueta, y después de lo que ya hay escrito añadiremos lo siguiente:

      <h4>Sexo</h4>
      <p><input type="radio" name="sexo" value="hombre" /> Hombre</p>
      <p><input type="radio" name="sexo" value="mujer" /> Mujer</p>
      <p><input type="radio" name="sexo" value="indefinido" /> Sin definir</p>

En primer lugar hemos puesto una etiqueta de título (h4) que indica que estamos ante un nuevo apartado del formulario. Después hemos puesto tres párrafos que contienen cada uno una etiqueta input type="radio".

En cada una de estas etiquetas hay dos atributos más. El atributo name, que debe tener el mismo valor para todas ellas. Esto es lo que indica que forman un grupo, y que sólo se puede elegir una de ellas; y el atributo value que es el que distingue unas de otras, y el que indicará cuál es la opción que hemos elegido.

Estas etiquetas crean en la página un boton redondo que el usuario puede marcar. Es por eso que despues de la etiqueta "radio", y dentro de la etiqueta de párrafo que la incluye debemos escribir la opción, para que el usuario sepa lo que está eligiendo.

Después de incluir este código en el sitio indicado, cerramos y guardamos el archivo formulario.html, y lo abrimos con el navegador para ver los cambios que hemos hecho. La página quedará como en el siguiente enlace:


Vemos que se ha añadido un nuevo campo al formulario. Éste consiste en tres botones entre los que podemos elegir una opción. Uns vez elegida una opción, al pulsar sobre otro botón, se quita la opción seleccionada, quedando elegida la última que hemos pulsado.


botones checkbox

Este tipo de botones son independientes unos de otros. Aquí lo que se trata es saber si el usuario ha elegido o no la opción indicada. Para ello se utiliza la etiqueta input type="checkbox".

Por lo demás pondremos también un atributo name y otro atributo value. Con name identificamos el botón. Su valor es independiente en cada botón. Con value escribimos el texto que indica que está seleccionado. De no poner este atributo el texto que aparece es "on".

Visto esto vamos a seguir con nuestro formulario. Dentro del formulario pondremos ahora una segunda sección con otra etiqueta <div class="seccion"> ... </div>. Abrimos el archivo formulario.html, y dentro del formulario ponemos la segunda etiqueta de clase:

  <form action="mailto:aprendeweb@aprende-web.net" enctype="text/plain" method="post" 
     name="foro" id="foro">
    <div class="seccion">
      .......
    </div>
    <div class="seccion">
		
    </div>
    <div class="vacio"></div>
  </form>

Debajo de la etiqueta div que ya teníamos (por no repetir todo el código hemos puesto puntos suspensivos), ponemos otra etiqueta div de la misma clase. De esta manera el formulario queda dividido en dos etiquetas div class="seccion" o dos secciones.

Debajo de estas dos etiquetas de clase hemos puesto otra etiqueta <div class="vacio"></div> . Ya hemos usado esta misma etiqueta en otras secciones de la página. Es la que nos permite posicionar los elementos flotantes dentro de su contenedor.

A partir de ahora, el resto del formulario irá dentro de la segunda etiqueta de clase que acabamos de crear. Por lo tanto dentro de esta segunda etiqueta escribiremos lo siguiente:

    <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>

Ahora miraremos cómo queda esto en nuestra página, para lo cual cerramos y guardamos el archivo formulario.html, y lo abrimos con el navegador. Éste debe quedar como el del siguiente enlace:


Puedes comprobar que cada botón "checkbox" puede seleccionarse independientemente de los demas.


Código del formulario.

Vemos a continuación el codigo que hemos escrito hasta ahora en este tema, y que hemos incluido dentro de la etiqueta div id="principal":

  <h2>Formulario de prueba</h2>
  <p>La forma principal de interactuar con el usuario, y que pueda mandarnos algunos 
     datos es mediante formularios. Un formulario es una serie de preguntas que se 
     hacen al usuario para que este responda.</p>
  <p>El siguiente formulario es un formulario de prueba. Suponemos que hemos creado 
    un foro o un chat, y pedimos al usuario que rellene el formulario para 
    hacerse usuario del mismo.</p>
  <h3>Formulario de ingreso</h3>
  <form action="mailto:aprendeweb@aprende-web.net" enctype="text/plain" method="post" 
     name="foro" id="foro">
    <div class="seccion">
      <h4>Datos personales</h4>
      <p>Nombre: <input type="text" name="nombre" /></p>
      <p>Contraseña: <input type="password" name="Contraseña" /></p>
      <h4>Mi perfil</h4>
      <p>Escribe cómo quieres presentarte ante los demás usuarios del foro</p>
      <p><textarea  name="descripcion">Mi perfil: </textarea>
      <h4>Sexo</h4>
      <p><input type="radio" name="sexo" value="hombre" /> Hombre</p>
      <p><input type="radio" name="sexo" value="mujer" /> Mujer</p>
      <p><input type="radio" name="sexo" value="indefinido" /> Sin definir</p>
    </div>
    <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>

    </div>
    <div class="vacio"></div>
  </form>

Este es el código que hemos puesto hasta ahora en la página de formulario, revísalo si tu página no está igual que la nuestra.




Seguiremos en el siguiente paso construyendo el formulario. Veremos otro tipo de campos, entre ellos los necesarios para el control y envío del formulario.

Formularios: Más campos




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