Autor Tema: Formularios HTML con optgroup y option input type radio checkbox etc CU00723B  (Leído 4067 veces)

3skai

  • Sin experiencia
  • *
  • Mensajes: 16
    • Ver Perfil
Hola! Buenas noches. Escribo para postear la solución del ejercicio propuesta en la clase. Pero al mismo tiempo sigo teniendo dudas en cuanto a las estructuras de los formularios. Para ello realice dos códigos los cuales logran la misma salida. Cabe destacar que también comprobé la URL de ambos códigos, verificando que no haya ningún cambio y no lo encontré. La URL en los dos códigos es la misma, lo que cambiaría seria la manera de realizar/estructurar el formulario. Sin más preámbulo, aquí el primer código.

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

Código #1.

Código: [Seleccionar]
<h3>Preferencias Musicales</h3>

  <form method="get" action="http://aprenderaprogramar.com/action.php">
    Selecciona tus intereses:
    <br />
    <input name="rock" type="checkbox" />Rock
    <br />
    <input name="pop" type="checkbox"  />Pop
    <br />
    <input name="jazz" type="checkbox" />Jazz
    <br /><br/><br/>
   
 
    Selecciona tu edad:
    <br />
    <input name="edad" type="radio" value="de12a17" />Si tienes entre 12 y 17 años.
    <br />
    <input name="edad" type="radio" value="de18a35" />Si tienes entre 18 y 35 años.
    <br />
    <input name="edad" type="radio" value"de36a65" />Si tienes entre 36 y 65 años
    <br />
    <input name="edad" type="radio" value="mas65" />Si tienes más de 65 años.
    <br />
    <br />

    Grupos Y Cantantes Que Te Gustan (Puedes Seleccionar Varios):
    <br />
    <select name="home[]" multiple="multiple">
      <optgroup label="Rock">
        <option>Guns And Roses</option>
        <option>The Verbe</option>
        <option>Metalica</option>
      </optgroup>
      <optgroup label="Pop">
        <option>Britney Spears</option>
        <option>Justin Bieber</option>
        <option>Coldplay</option>
      </optgroup>
      <optgroup label="Jazz">
        <option>50 Cent's</option>
        <option>Pastor Lopez</option>
        <option>Lolo</option>
      </optgroup>
    </select>
      <br/><br/><br/>
    <input type="submit" value="Enviar!">
    <input type="reset">
  </form>

Código #2.

Código: [Seleccionar]
<h3>Preferencias Musicales</h3>

  <form action="http://aprenderaprogramar.com/action.php" method="get">
  <p>
    <label>Selecciona tus intereses:</label>
    <br />
    <input type="checkbox" name="rock" id="preferenciasmusicales">
    <label for="rock">Rock. </label>
    <br />
    <input type="checkbox" name="pop" id="preferenciasmusicales">
    <label for="pop">Pop. </label>   
    <br />
    <input type="checkbox" name="jazz" id="preferenciasmusicales">
    <label for="jazz">Jazz. </label>
    <br /><br/><br/>
   
 
    <label>Selecciona tu edad:</label>
    <br />
    <input type="radio" name="edad" id="seleccionedad" value="de12a17">
    <label for="de12a17">Si tienes entre 12 y 17 años.</label> 
  <br />
  <input type="radio" name="edad" id="seleccionedad" value="de18a35">
  <label for="de18a35">Si tienes entre 18 y 35 años.</label>
  <br />
  <input type="radio" name="edad" id="seleccionedad" value="de36a65">   
    <label for="de36a65">Si tienes entre 36 y 65 años</label>
    <br />
  <input type="radio" name="edad" id="seleccionedad" value="mas65"> 
    <label for="mas65">Si tienes más de 65 años.</label>
    <br />  <br />  <br />


    <label>Grupos Y Cantantes Que Te Gustan (Puedes Seleccionar Varios Teclas Ctrl):</label>
    <br />
    <select name="home[]" multiple="multiple">
      <optgroup label="Rock">
        <option>Guns And Roses</option>
        <option>The Verbe</option>
        <option>Metalica</option>
      </optgroup>
      <optgroup label="Pop">
        <option>Britney Spears</option>
        <option>Justin Bieber</option>
        <option>Coldplay</option>
      </optgroup>
      <optgroup label="Jazz">
        <option>50 Cent's</option>
        <option>Pastor Lopez</option>
        <option>Lolo</option>
      </optgroup>
    </select>
      <br /> <br /> <br />
    <input type="submit" value="Enviar!">
    <input type="reset">
    </p>
  </form>

Adjuntaré las salidas de los códigos en dos .jpg para que vean que no hay ningún cambio a nivel de pantalla (aparentemente), solamente que en el código #2 se pone mas negrita la letra (creo que eso es porque yo uso la plantilla de html de bootstrap porque me gusta la fuente que le colocan :p, y pues en ocaciones pasadas he experimentado con tal framework).

Bueno me despido, esperando una respuesta para ver si logro aclarar mis dudas. Muchas Gracias!

Nota="La segunda manera de realizar el código la saque de la clase (Entrega nº20 del Tutorial básico del programador web: HTML desde cero. CU00720B[https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=520:formularios-html-form-label-name-value-id-ejemplos-checkbox-option-button-combobox-cu00720b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192]) en la cual observe que en el ejemplo de los formularios en html colocaron así el formulario, pero unas clases mas adelante empezaron a realizarlo de la primera manera como logre estructurar el código."
« Última modificación: 24 de Marzo 2016, 14:58 por Alex Rodríguez »
'Tener las mejores herramientas, no te hace el mejor.
Tener la voluntad y ahínco de aprender, tarde que temprano te hará el mejor.'

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola 3skai, para poder revisar el código pedimos que se incluya el código completo empezando con la etiqueta <!DOCTYPE html>, incluyendo todas las etiquetas tal y como se hace en el curso, de esa manera podemos comprobar si la persona que sigue el curso es capaz de generar un documento html completo según las explicaciones del curso

Saludos

3skai

  • Sin experiencia
  • *
  • Mensajes: 16
    • Ver Perfil
Alex! gracias por resolverme la duda, por cierto sigo siempre de cerca tus articulos para no dormir jeje! estoy que me leo 1984! Gracias por ser miembro activo de la comunidad y de ser fuente de información para nosotros!
'Tener las mejores herramientas, no te hace el mejor.
Tener la voluntad y ahínco de aprender, tarde que temprano te hará el mejor.'

 

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