Ejercicio 210
Crea una página web que tenga el mismo aspecto que la siguiente imagen:
El formulario debe contener los siguientes campos:
- El nombre: con un control de tipo texto.
- Los apellidos: con un control de tipo texto.
- El género: con tres opciones excluyentes (masculino, femenino, no binario).
- La fecha de nacimiento: tres campos desplegables. Para el desplegable de los años, indica 10 opciones cualquiera.
- Los módulos de ASIR: se pueden seleccionar varios.
- Los estudios previos: área de texto.
- Un botón de envío.
- Un botón de reinicio de todo el formulario.
Además, tienes que tener en cuenta los siguientes requisitos:
- El título de la página debe ser
Matrícula ASIR. - El texto
Matrícula ASIRcomo encabezado de nivel 1. - El método de envío del formulario debe ser
POST. - El destino del envío del formulario debe ser
registro.php. - Cada campo debe tener una etiqueta (label) asociada para mejorar la usabilidad y accesibilidad.
Solución
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Matrícula ASIR</title>
</head>
<body>
<h1>Matrícula ASIR</h1>
<form action="matricula.php" method="POST">
<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" />
</div>
<br />
<div>
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" name="apellidos" />
</div>
<br />
<fieldset>
<legend>Género</legend>
<input type="radio" name="genero" id="masculino" value="masculino" />
<label for="masculino">Masculino</label>
<input type="radio" name="genero" id="femenino" value="femenino" />
<label for="femenino">Femenino</label>
<input type="radio" name="genero" id="no-binario" value="no-binario" />
<label for="no-binario">No binario</label>
</fieldset>
<br />
<fieldset>
<legend>Fecha de nacimiento</legend>
<label for="dia">Día</label>
<select id="dia" name="dia">
<option disabled selected>Día</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<label for="mes">Mes</label>
<select id="mes" name="mes">
<option disabled selected>Mes</option>
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
<label for="ano">Año</label>
<select id="ano" name="ano">
<option disabled selected>Año</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
</select>
</fieldset>
<br />
<fieldset>
<legend>Escoge los módulos en los que te matriculas</legend>
<input type="checkbox" name="modulos[]" value="fh" id="m_fh" />
<label for="m_fh">Fundamentos de hardware</label><br />
<input type="checkbox" name="modulos[]" value="sri" id="m_sri" />
<label for="m_sri">Servicios de red e internet</label><br />
<input type="checkbox" name="modulos[]" value="gbd" id="m_gbd" />
<label for="m_gbd">Gestión de bases de datos</label><br />
<input type="checkbox" name="modulos[]" value="aso" id="m_aso" />
<label for="m_aso">Administración de sistemas operativos</label><br />
<input type="checkbox" name="modulos[]" value="iso" id="m_iso" />
<label for="m_iso">Implantación de sistemas operativos</label><br />
<input type="checkbox" name="modulos[]" value="iaw" id="m_iaw" />
<label for="m_iaw">Implantación de aplicaciones web</label><br />
<input type="checkbox" name="modulos[]" value="par" id="m_par" />
<label for="m_par">Planificación y administración de redes</label><br />
<input type="checkbox" name="modulos[]" value="asgbd" id="m_asgbd" />
<label for="m_asgbd">Administración de sistemas gestores de bases de datos</label><br />
<input type="checkbox" name="modulos[]" value="lmsgi" id="m_lmsgi" />
<label for="m_lmsgi">Lenguajes de marcas y sistemas de gestión de información</label><br />
<input type="checkbox" name="modulos[]" value="sad" id="m_sad" />
<label for="m_sad">Seguridad y alta disponibilidad</label><br />
<input type="checkbox" name="modulos[]" value="fol" id="m_fol" />
<label for="m_fol">Formación y orientación laboral</label><br />
<input type="checkbox" name="modulos[]" value="eie" id="m_eie" />
<label for="m_eie">Empresa e iniciativa emprendedora</label><br />
<input type="checkbox" name="modulos[]" value="proy" id="m_proy" />
<label for="m_proy">Proyecto de Administración de Sistemas Informáticos en Red</label><br />
<input type="checkbox" name="modulos[]" value="fct" id="m_fct" />
<label for="m_fct">Formación en centros de trabajo</label>
</fieldset>
<br />
<label for="estudios">Estudios previos:</label><br />
<textarea rows="5" cols="50" id="estudios" name="estudios"></textarea>
<br /><br />
<input type="submit" value="Enviar" />
<input type="reset" name="Reset" />
</form>
<p>
<b>Pulsa el botón de "enviar" para formalizar la matrícula o el boton de
"restablecer" para limpiar el formulario.</b>
</p>
</body>
</html>
Probar en el navegador