Autor Tema: HTML ejemplo checkbox, radio buttons y optgroup formulario Ejercicio CU00723B  (Leído 4821 veces)

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Buenas noches!

Vengo a resolver el ejercicio del capitulo °23 del curso "html desde 0" cuyo enunciado dice asi:

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. 

Aqui el codigo!
Código: [Seleccionar]
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>Preferencias Musicales</title></head>
<body>
<h1 style = "text-align: center; color: blue;">Preferencias Musicales</h1>
<form>
Elige el tipo de musica que te gusta:
</br>
<input name="rock" type="checkbox"/>Rock
</br>
<input name="pop" type="checkbox"/>Pop
</br>
<input name="jazz" type="checkbox"/>Jazz
</br></br>
Elige tu edad:
<input name="12_17" type="radio"/>12 a 17 años
</br></br>
<input name="18_35" type="radio"/>18 a 35 años
</br></br>
<input name="36_65" type="radio"/>36 a 65 años
</br></br>
<input name="65" type="radio"/>Mas de 65 años
</br></br></br>
Grupos y cantantes que te gustan:
</br>
<select name="entrada" multiple>
<optgroup label="Rock">
<option>Van Hallen</option>
<option>Metallica</option>
<option>Limpbizkit</option>
</optgroup>
<optgroup label="Pop">
<option>Lady Gaga</option>
<option>Britney Spears</option>
<option>Madonna</option>
</optgroup>
<optgroup label="Jazz">
<option>Alo Brazil</option>
<option>Hijas del Sol</option>
<option>Irakere</option>
</optgroup>
</select>
</form>
</body>
</html>

Y asi es como se ve:


Esperare sus comentarios y correcciones!
« Última modificación: 21 de Mayo 2015, 08:21 por Alex Rodríguez »
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola Dan Aquí los comentarios ;)

Al igual que un formulario debe contener un botón para poder ser enviado, debe indicarse a dónde se envía y cómo se envía (por lo menos). Esto se hace dentro de la etiqueta form mediante los atributos method y action. Esto deberías corregirlo ya que tener un formulario sin esto es como enviar una carta sin indicar a quién se la envías, nunca llegará a ningún lado. Te falta el botón de envío, el method y el action, sin esto el código está imcompleto.

Creo que con estos atributos name="12_17" no haya problema, pero en muchos lenguajes solo se permite que los nombres empiecen por una letra. Para mantener este criterio me parecería mejor name="de12a17"

Lo demás en el código lo veo bien.

Saludos

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Ay, pero que torpe, ya van 2 veces que repito eso de no meterle botones  :o

Gracias!
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
No se me ocurrio que ponerle al action, le escribi esto de un ejercicio pasado xD

Código: [Seleccionar]
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>Preferencias Musicales</title></head>
<body>
<h1 style = "text-align: center; color: blue;">Preferencias Musicales</h1>
<form method="get" action="http://aprenderaprogramar.com">
Elige el tipo de musica que te gusta:
</br>
<input name="rock" type="checkbox"/>Rock
</br>
<input name="pop" type="checkbox"/>Pop
</br>
<input name="jazz" type="checkbox"/>Jazz
</br></br>
Elige tu edad:
<input name="de12a17" type="radio"/>12 a 17 años
</br></br>
<input name="de18a35" type="radio"/>18 a 35 años
</br></br>
<input name="de36a65" type="radio"/>36 a 65 años
</br></br>
<input name="65" type="radio"/>Mas de 65 años
</br></br></br>
Grupos y cantantes que te gustan:
</br>
<select name="entrada" multiple>
<optgroup label="Rock">
<option>Van Hallen</option>
<option>Metallica</option>
<option>Limpbizkit</option>
</optgroup>
<optgroup label="Pop">
<option>Lady Gaga</option>
<option>Britney Spears</option>
<option>Madonna</option>
</optgroup>
<optgroup label="Jazz">
<option>Alo Brazil</option>
<option>Hijas del Sol</option>
<option>Irakere</option>
</optgroup>
</select>
<br></br>
<input type="submit" value="Enviar"/> <input type="reset"/>
</form>
</body>
</html>

Ya ahora si tiene sus botones el formulario ... !
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Mucho mejor   :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".