Autor Tema: Formularios HTML. Casillas de verificación, Checkbox, Radio. Ejercicio CU00723B.  (Leído 2960 veces)

Charlie-Web

  • Sin experiencia
  • *
  • Mensajes: 4
    • Ver Perfil
Buenas.

Antes de nada quisiera decir que sigo el curso desde el principio pero hasta ahora, gracias a los foros, había resuelto mis dudas viendoa los ejercicios de otros usuarios.

El problema es que en este ejercicio he intentado utilizar la etiqueta label y el atributo id en las checkbox y radio, y no tengo claro si lo he hecho correctamente.

Además, en las listas de opciones no sé si es posible o incluso aconsejable utilizar el atributo id al haber utilizado la etiqueta label de la siguiente manera:

<label>Selecciona todos los grupos que te gustan pulsando la tecla Ctrl</label>

Por último. veo que en algunos ejercicios de otros usuarios se recomienda asignar un value a cada option, aunque en el tema correspondiente del curso dice que no es necesario. ¿Cuál de las dos es la forma más aconsejable?

Aquí os dejo el código para que le echéis un ojo y me digáis qué debo rectificar. Gracias de antemano.

Enunciado del 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 con tres nombres de grupos o cantantes.

Código: [Seleccionar]
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8"/>
  <title>Ejercicio tema CU00723B sobre opciones de formularios</title>

</head>

<body>

  <h1 style="text-align: center; color: blue;">Preferencias musicales</h1>
  <br /> <br />

  <form action="https://www.aprenderaprogramar.com/action.php" method="get">
    <label for="favorita">Tipo de música favorita</label>
    <br />
    <input type="checkbox" name="pop" id="favorita">Pop
    <br />
    <input type="checkbox" name="rock" id="favorita">Rock
    <br />
    <input type="checkbox" name="jazz" id="favorita">Jazz

    <br /> <br />

    <label for="edaduser">Seleccione su edad</label>
    <br />
    <input type="radio" name="edad" id="edaduser" value="de12a17">De 12 a 17 años
    <br />
    <input type="radio" name="edad" id="edaduser" value="de18a35">De 18 a 35 años
    <br />
    <input type="radio" name="edad" id="edaduser" value="de36a65">De 36 a 65 años
    <br />
    <input type="radio" name="edad" id="edaduser" value="mayor65">Mayor de 65 años

    <br /> <br />

    <label>Selecciona todos los grupos que te gustan pulsando la tecla Ctrl</label>
    <br />
    <select multiple="multiple" name="gruposycantantes[]">
      <optgroup label="Pop">
        <option value="grupopopa">Grupo Pop A</option>
        <option value="grupopopb">Grupo Pop B</option>
        <option value="grupopopc">Grupo Pop C</option>
      </optgroup>
      <optgroup label="Rock">
        <option value="gruporocka">Grupo Rock A</option>
        <option value="gruporockb">Grupo Rock B</option>
        <option value="gruporockc">Grupo Rock C</option>
      </optgroup>
      <optgroup label="Jazz">
        <option value="grupojazza">Grupo Jazz A</option>
        <option value="grupojazzb">Grupo Jazz B</option>
        <option value="grupojazzc">Grupo Jazz C</option>
      </optgroup>
    </select>

    <br /> <br />

    <input type="submit" value="Enviar">
    <input type="reset">
  </form>

</body>

</html>

Charlie-Web

  • Sin experiencia
  • *
  • Mensajes: 4
    • Ver Perfil
Bueno, respecto a la duda del value me respondo a mi mismo, ya que repasando el temario he encontrado la respuesta:

El valor inicial de un control no cambia. Así, cuando se carga el formulario, el valor actual de cada control se restablece a su valor inicial. Si el control no tiene un valor inicial, el efecto de una reinicialización o carga del formulario sobre ese control es indefinido. Indefinido significa que no sabemos exactamente lo que va a pasar. Para que no ocurra esto, es preferible establecer siempre un valor inicial.

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola  Charlie-Web.

En cuanto al uso del id, no lo haces correctamente, los id deben ser únicos para cada elemento, no se deben de repetir en un mismo documento.
No obtendrás ningún tipo de error por ello, pero los id son utilizados para referirnos a cada elemento.
Si después de html piensas seguir con CSS, JavaScript...,  entonces descubrirás la importancia que tienen los id, clases, etc.

Saludos. ;D

Charlie-Web

  • Sin experiencia
  • *
  • Mensajes: 4
    • Ver Perfil
Hola, Pedro. Gracias por tu respuesta. ;)

El problema es: ¿cómo asigno id únicos a una única label? Porque en este caso hay varios input asociados a esa label.

Gracias por vuestra paciencia.

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Lo más apropiado sería que cada "input" tuviese una etiqueta "label" asociada y no una para todos los "input".
Si usas esto en tu código:

Código: [Seleccionar]
<input type="radio" name="edad" id="edaduser1" value="de12a17"><label for="edaduser1">De 12 a 17 años</label>
    <br />
    <input type="radio" name="edad" id="edaduser2" value="de18a35"><label for="edaduser2">De 18 a 35 años</label>

Podrás comprobar que el uso de "label", además de lo explicado en el curso, en este caso sirve también para que cuando vayas a seleccionar un botón radio, puedas hacerlo pulsando el texto que está entre las etiquetas "label" y no solo pulsando el botón radio, siempre y cuando la propiedad for de la etiqueta label, esté asociada a la propiedad id del elementos input.

Saludos.
« Última modificación: 31 de Mayo 2016, 11:52 por pedro,, »

Charlie-Web

  • Sin experiencia
  • *
  • Mensajes: 4
    • Ver Perfil
Ok, gracias por la aclaración, Pedro. Tomo nota de tus recomendaciones. ;)

 

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