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

EnigmaticNerd · « **en:** 08 de Agosto 2017, 02:24 »

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.

Jack_F · « **Respuesta #1 en:** 08 de Agosto 2017, 05:02 »

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.

EnigmaticNerd · « **Respuesta #2 en:** 08 de Agosto 2017, 06:13 »

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 · « **Respuesta #3 en:** 08 de Agosto 2017, 08:21 »

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.

EnigmaticNerd · « **Respuesta #4 en:** 08 de Agosto 2017, 16:54 »

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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

EnigmaticNerd

Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio

Jack_F

Re:Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio

EnigmaticNerd

Re:Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio

Jack_F

Re:Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio

EnigmaticNerd

Re:Ejercicio CU00723B de Aprender a programar: HTML desde cero. checkbox y radio

Preguntas y respuestas