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.
<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.
<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."
Tema: Formularios HTML con optgroup y option input type radio checkbox etc CU00723B (Leído 3960 veces)
RSS -
WAP2