« anterior próximo »
Páginas: [1]

Autor Tema: HTML. Listas desplegables: select, optgroup, option, checkbox y radio(CU00723B)  (Leído 3099 veces)

KOFFERO

  • Principiante
  • **
  • Mensajes: 78
    • Ver Perfil
HTML. Listas desplegables: select, optgroup, option, checkbox y radio(CU00723B)
« en: 21 de Septiembre 2017, 07:55 »
Citar
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 HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
       <head>
          <title>Ejercicio CU00723B - aprenderaprogramar.com</title>
  <meta charset="UTF-8" />
   </head>
   <body>
          <h1>Preferencias musicales</h1>
  <form method="get" action="jorge.php">
         <span>Seleciona tu música favorita:</span><br/>
         <input type="checkbox" name="musica1" value="Rock" id="musica1" />
         <label for="musica1">Rock</label>
         <br/>
         <input type="checkbox" name="musica2" value="Jazz" id="musica2" checked="checked" />
         <label for="musica2">Jazz</label>
         <br/>
         <input type="checkbox" name="musica3" value="Pop" id="musica3" />
         <label for="musica3">Pop</label>
<br/><br/>
<span>Seleciona tu edad:</span>
<br/>
<input type="radio" name="edad1" value="12a17" id="edad1" />
<label for="edad1">De 12 a 17 años</label>
<br/>
<input type="radio" name="edad2" value="18a35" id="edad2" />
<label for="edad2">De 18 a 35 años</label>
<br/>
<input type="radio" name="edad3" value="36a65" id="edad3" />
<label for="edad3">De 36 a 65 años</label>
<br/>
<input type="radio" name="edad4" value="madde65" id="edad4" />
<label for="edad4">Mas de 65 años</label>
<br/><br/>
<span>Elije tre grupos de cantante que te gustan:</span>
<br/><br/>
<select name="grupo[]" multiple="multiple">
           <optgroup label="Rock">
              <option>Manal</option>
  <option>Massacre</option>
  <option>Fun Peoplw</option>
   </optgroup>
   <optgroup label="Jazz">
              <option>Return to Forever</option>
  <option>Weather Report</option>
  <option>Jazz Messengers</option>
   </optgroup>
   <optgroup label="Pop">
              <option>Green Day</option>
  <option>Los Beatles</option>
  <option>RBD</option>
   </optgroup>
</select>
<br/><br/>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
  </form>
   </body>
</html>Dejo el ejercicio resuelto.

Un saludo. :)
En línea
¡Me encanta aprender!

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:HTML. Listas desplegables: select, optgroup, option, checkbox y radio(CU00723B)
« Respuesta #1 en: 26 de Octubre 2017, 19:09 »
Hola Jorge,,, ejercicio correcto. Aparece como música favorita Jazz (en el código tienes checked="checked"), esto supongo que lo harías a modo de prueba porque en principio ninguna opción debiera estar marcada

Saludos
En línea
Páginas: [1]
« anterior próximo »
 

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