Autor Tema: Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio  (Leído 2650 veces)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Buenas noches. Este es el enunciado del ejercicio CU00723B del tutorial de programación en HTML desde cero:

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. 

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>CU00723B</title>
        <meta charset="utf-8"/>
    </head>

    <body style="background-color:beige;">

        <h1>Preferencias musicales</h1>

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

           <input type="checkbox" name="rock" id="rock"/>
               <label for="rock">Rock</label>

               <br/>
           
           <input type="checkbox" name="jazz" id="jazz"/>
                <label for="jazz">Jazz</label>

                <br/>

            <input type="checkbox" name="pop" id="pop"/>
                <label for="pop">Pop</label>

            <hr style="color:cadetblue; background-color:cadetblue; height:10px;"/>

            <h3>Seleccione su edad</h3>

            <input name="edad" type="radio" value="menor" id="menor"/>
            <label for="menor">De 12 a 17 años</label>

            <br/>

            <input name="edad" type="radio" value="joven" id="joven"/>
            <label for="joven">De 18 a 35 años</label>

            <br/>

            <input name="edad" type="radio" value="adulto" id="adulto"/>
            <label for="adulto">De 18 a 35 años</label>

            <br/>

            <input name="edad" type="radio" value="mayor" id="mayor"/>
            <label for="mayor">De 36 a 65 años</label>

            <br/>

            <input name="edad" type="radio" value="anciano" id="anciano"/>
            <label for="anciano">Más de 65 años</label>

            <hr style="color:cadetblue; background-color:cadetblue; height:10px;"/>

            <h3>Grupos y cantantes que te gustan</h3>
            <p>Puede seleccionar varios manteniendo presionada la tecla "CTRL"</p>

            <select name="grupos[]" multiple="multiple">

                <optgroup label="Rock">
                    <option>Aerosmith</option>
                    <option>AC/DC</option>
                    <option>Iron Maiden</option>
                </optgroup>

                <optgroup label="Pop">
                    <option>Michael Jackson</option>
                    <option>Bruno Mars</option>
                    <option>Lady Gaga</option>
                </optgroup>

                <optgroup label="Jazz">
                    <option>Ray Charles</option>
                    <option>Amy Winehouse</option>
                    <option>Alicia Keys</option>
                </optgroup>

            </select>
           
            <br/>
            <br/>
           
            <input type="submit" value="Enviar"/>
            <input type="reset"/>

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

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
« Última modificación: 26 de Agosto 2017, 14:36 por Alex Rodríguez »

Jack_F

  • Visitante
Hola EnigmaticNerd. El ejercicio esta bien resuelto. Pero te falta corregir el value, en los input de las edades debes agregar los valores que permite esa opción:
Código: [Seleccionar]
<input name="edad" type="radio" value="1217" id="menor"/> o sea que son las edades que vas a enviar como este caso es 12 y 17, si eliges esa opción, lo mismo para los demas. Tambien si quieres , no es obligatorio, puedes poner primero el label y despues el input algo asi:
Código: [Seleccionar]
<label for="menor">De 12 a 17 años</label>
<input name="edad" type="radio" value="1217" id="menor"/>
como te comento es decición de cada uno como quiere escribir su código.

Un saludo. :D :D
« Última modificación: 08 de Agosto 2017, 05:18 por KFZ_10 »

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Gracias por la corrección. ¿Me darías una explicación desde tu experiencia sobre el uso e importancia de los values en el control radio? Y respecto al label, lo coloqué como me planteas pero el texto se pone a la izquierda y el marcador a la derecha. No lo veo estético.

Jack_F

  • Visitante
Hola de nuevo, si tienes razón se ve un poco raro asi las edades y muy poco práctico, pero como te eh comentado es decición de cada uno como quiera escribir su código, dejalo como lo has hecho tú.
                                                       
                                                 Explicación del value
             Bueno el value especifica el valor que enviará a un servidor cuando se envia un formulario.

Como en el formulario te pide que selecione tu edad que podria ser 12 a 17, o 18 a 36, y por eso se le pone un valor, como puse anteriormente el código, que era asi:
Código: [Seleccionar]
<input name="edad" type="radio" value="1217" id="menor"/>En el value muestra 1217, o sea si tenemos esa edad lo selecionamos y si no selecionamos otro que podria se 18 a 36 y se envia ese valor.

Espero haber aclarado tus dudas.
Un saludo. :D :D :D
« Última modificación: 08 de Agosto 2017, 08:23 por KFZ_10 »

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Gracias por la aclaratoria, ya está un poco más claro. De cualquier forma, se que no es la última vez que lidiaré con el. Comprenderé mejor su funcionamiento con la práctica.

 

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