Este ejercicio se basa en un caso real de un centro de estudios.
El centro en cuestión tenía el típico formulario de contacto con el plugin contact form 7 de wordpress.
Tenía un asunto desplegable para que los padres pudieran seleccionar el motivo de la consulta.
- Pedir información
- Apuntar el hijo a un curso
- Otros
También había un textarea para que los padres indicaran informaciones relacionadas. Por ejemplo el nombre del curso de interés.
Sin embargo, a menudo los padres que seleccionaban el curso se olvidaban de indicar cuál.
En este ejercicio se crea un formulario con un campo oculto que se muestra cuando el visitante a la web seleccione la opción del formulario que nos interese.
Vamos a repasar los siguientes conceptos:
- Creación de un formulario con html
- Asignación de eventos javascript con addEventListener()
- Modificar estilos con javascript.
Vamos a repasarlo mediante un ejercicio.
Enunciado
Crea un formulario web que pida el nombre, email y un asunto.
El asunto debe ser seleccionable entre las opciones pedir información, apuntarse a un curso, otros.
Cuando se seleccione la opción apuntase a un curso automáticamente se mostrará un cajetín de texto que pedirá explícitamente al usuario que indique a que curso se quiere apuntar.
Este cajetín llevará un label con el texto curso y tendrá un borde de color rojo.
Solución del ejercicio
El formulario es un formulario normal y corriente pero con la salvedad de tener un input inicialmente oculto.
Mediante javascript controlaremos que cuando se seleccione la opción de apuntarse a un curso su display pase a block y que cuando sea cualquier otra opción pase a display:none;
Para ello asignaremos un evento especial al campo <select>.[vc_custom_heading text=»¿Como queda el documento html?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Francesc Ricart">
<title>Formulario con campos ocultos</title>
<link rel="stylesheet" href="formulario.css">
</head>
<body>
<div class="container">
<form action="#" class="formulario">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" placeholder="Escribe tu nombre" id="nombre">
<label for="email">Email:</label>
<input type="text" name="email" placeholder="Escribe tu email" id="email">
<label for="asunto" id="test">Asunto:</label>
<select name="asunto" id="asunto">
<option value="info">Solicitar información</option>
<option value="curso">Apuntarse a un curso</option>
<option value="otro">Otro motivo</option>
</select>
<label for="cursoInput" id="cursoLabel">Curso:</label>
<input type="text" name="curso" placeholder="Escribe el nombre del curso" id="cursoInput">
<label for="mensaje">Escribe un mensaje:</label>
<textarea name="mensaje" id="mensaje"></textarea>
</form>
</div>
<script src="functions.js"></script>
</body>
</html>[vc_custom_heading text=»¿Como queda el documento formulario.css?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
body{padding:100px;}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.container{
width:100%;
max-width:300px;
padding:10px;
border:1px solid #000;
border-radius:10px;
margin:auto;
background-color:#A9CEF4;
}
.formulario label{
display:block;
font-weight:bold;
}
.formulario input,.formulario select,.formulario textarea{
padding:5px;
width:100%;
margin:16px 0;
}
.formulario textarea{
resize:none;
height:120px;
}
#cursoInput{
border:2px solid #ff0000;
display:none;
}
#cursoLabel{
display:none;s
}[vc_custom_heading text=»¿Como queda el documento functions.js?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
window.addEventListener("load",init);
function init(){
document.getElementById("asunto").addEventListener("change",revisar);
}
function revisar(){
if(document.getElementById("asunto").value=="curso"){
document.getElementById("cursoInput").style.display="block";
document.getElementById("cursoLabel").style.display="block";
}else{
document.getElementById("cursoInput").style.display="none";
document.getElementById("cursoLabel").style.display="none";
}
}¡Hola!
Querido lector,
Puedes descargar la solución de este ejercicio en este enlace.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta