Autor Tema: Ejercicio de formulario de música html con checkbox y optgroup ejemplo CU00723B  (Leído 3688 veces)

Chuckyldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 34
    • Ver Perfil
Hola amigos, escribo esto debido a que he tenido un problema mientras estaba haciendo el ejercicio CU00723B del manual de programación web. Las instrucciones son las siguientes:

Citar
EJERCICIO

Crea una página web que contenga un formulario que cumpla estas condiciones. Como título principal de la página debe figurar con etiquetas h1 el texto “Preferencias musicales”. Debe contener tres checkbox que permitan elegir tipos de música favoritas entre Rock, Pop y Jazz. Seguidamente mediante radio buttons se debe pedir la edad ofreciendo estas opciones: de 12 a 17 años, de 18 a 35 años, de 36 a 65 años y más de 65. Finalmente, se deben poder elegir “grupos y cantantes que te gustan” permitiéndose la selección múltiple y ofreciendo un optgroup denominado Rock con tres nombres de grupos o cantantes, otro optgroup denominado Pop con tres nombres de grupos o cantantes y otro optgroup denominado Jazz con tres nombres de grupos o cantantes. 

El código que yo escribí es este:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<h1>Preferencias musicales.</h1>

<br> </br>

<form method="get" action="http://aprenderaprogramar.com/action.php">

 Tipo de música favorita:
 
 <br> </br>
<input name="musica" type="checkbox" />Rock
<br />
<input name="musica" type="checkbox"  />Pop
<br />
<input name="musica" type="checkbox" />Jazz
 <br> </br>

 Selecciona tu edad:
 
 <br></br>
 <input name="edad" type="radio" />12 a 17 años
 <br />
 <input name="edad" type="radio" />18 a 35 años
 <br />
 <input name="edad" type="radio" />36 a 65 años
 <br />
 <input name="edad" type="radio" />Más de 65 años
 <br> </br>
 
 Cantantes o grupos que te gustan:
 
 <br> </br>
 <select name="grupos de rock" multiple="multiple">
<optgroup label="Grupos o cantantes de Rock">
<option>Lechuga rockera</option>
<option>Pollo rockero</option>
<option>Los tomates boys</option>
</optgroup>
 <br> </br>
 
 <br> </br>
 <select name="grupos de pop" multiple="multiple">
<optgroup label="Grupos o cantantes de Pop">
<option>Pan pop</option>
<option>Chubi pop</option>
<option>Carne pop</option>
</optgroup>
 <br> </br>


 


</form>
</body>
</html>

Según lo que yo creo está todo bien, pero el problema está en que el "optgroup" que viene despúes del de los cantantes de rock no sale como debería, ya lo borré y lo volví a hacer, pero nada, por favor ayudenme, se los agradecería mucho y muchas gracias de antemano.
« Última modificación: 15 de Abril 2017, 19:59 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejercicio de formulario de música html. (CU00723B)
« Respuesta #1 en: 17 de Febrero 2017, 15:13 »
Hola Chuckyldo.

Te aparece en dos listas distintas porque tienes dos "select" distintos.

Código: [Seleccionar]
<select name="grupos de rock" multiple="multiple">
<select name="grupos de rock" multiple="multiple">

Y lo que necesitas, son dos "optgroup" dentro de un select, algo así:

Código: [Seleccionar]
<select name="gruposMusicales" multiple="multiple">
  <optgroup label="Grupos o cantantes de Rock">
    <option>Lechuga rockera</option>
    <option>Pollo rockero</option>
    <option>Los tomates boys</option>
  </optgroup>
  <optgroup label="Grupos o cantantes de Pop">
    <option>Pan pop</option>
    <option>Chubi pop</option>
    <option>Carne pop</option>
  </optgroup>
</select>

Saludos. ;D

Chuckyldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 34
    • Ver Perfil
Re:Ejercicio de formulario de música html. (CU00723B)
« Respuesta #2 en: 18 de Febrero 2017, 04:27 »
Muchas gracias, tienes razón, leeré mejor las instrucciones, si no me equivoco el código correcto sería este:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<h1>Preferencias musicales.</h1>

<br> </br>

<form method="get" action="http://aprenderaprogramar.com/action.php">

 Tipo de música favorita:
 
 <br> </br>
<input name="musica" type="checkbox" />Rock
<br />
<input name="musica" type="checkbox"  />Pop
<br />
<input name="musica" type="checkbox" />Jazz
 <br> </br>

 Selecciona tu edad:
 
 <br></br>
 <input name="edad" type="radio" />12 a 17 años
 <br />
 <input name="edad" type="radio" />18 a 35 años
 <br />
 <input name="edad" type="radio" />36 a 65 años
 <br />
 <input name="edad" type="radio" />Más de 65 años
 <br> </br>
 
 Cantantes o grupos que te gustan:
 
 <br> </br>
 <select name="gruposMusicales" multiple="multiple">
  <optgroup label="Grupos o cantantes de Rock">
    <option>Lechuga rockera</option>
    <option>Pollo rockero</option>
    <option>Los tomates boys</option>
  </optgroup>
  <optgroup label="Grupos o cantantes de Pop">
    <option>Pan pop</option>
    <option>Chubi pop</option>
    <option>Carne pop</option>
  </optgroup>
   <optgroup label="Grupos o cantantes de Jazz">
    <option>Huevo jazz</option>
    <option>Pelusa Jazz</option>
    <option>Pan jazz</option>
  </optgroup>
</select>
 <br> </br>


 


</form>
</body>
</html>

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejercicio de formulario de música html. (CU00723B)
« Respuesta #3 en: 18 de Febrero 2017, 15:58 »
Buenas.

Ahora está bien completado.

Saludos. ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".