/* ===== Google Font Import - Poformsins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 140vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
}
.container {
position: relative;
max-width: 430px;
width: 100%;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 0 20px;
}
.container .forms {
display: flex;
align-items: center;
height: 750px;
width: 200%;
transition: height 0.2s ease;
}
.container .form {
width: 50%;
padding: 30px;
background-color: #fff;
transition: margin-left 0.18s ease;
}
.container .form .title {
position: relative;
font-size: 27px;
font-weight: 600;
}
.form .title::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
background-color: #4070f4;
border-radius: 25px;
}
.form .input-field {
position: relative;
height: 50px;
width: 100%;
margin-top: 30px;
}
.input-field input {
position: absolute;
height: 100%;
width: 100%;
padding: 0 35px;
border: none;
outline: none;
font-size: 16px;
border-bottom: 2px solid #ccc;
border-top: 2px solid transparent;
transition: all 0.2s ease;
}
.input-field input:is(:focus,
:valid) {
border-bottom-color: #4070f4;
}
.input-field i {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 23px;
transition: all 0.2s ease;
}
.input-field input:is(:focus,
:valid)~i {
color: #4070f4;
}
.input-field i.icon {
left: 0;
}
.input-field i.showHidePw {
right: 0;
cursor: pointer;
padding: 10px;
}
.form .checkbox-text {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.checkbox-text .checkbox-content {
display: flex;
align-items: center;
}
.checkbox-content input {
margin-right: 10px;
accent-color: #4070f4;
}
.form .text {
color: #333;
font-size: 14px;
}
.form a.text {
color: #4070f4;
text-decoration: none;
}
.form a:hover {
text-decoration: underline;
}
.form .button {
margin-top: 35px;
}
.form .button input {
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
border-radius: 6px;
background-color: #4070f4;
cursor: pointer;
transition: all 0.3s ease;
}
.button input:hover {
background-color: #265df2;
}
.form .login-signup {
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== Iconscout CSS ===== -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="forms">
<div class="form login">
<span class="title">Registro de socios</span>
<form action="#">
<div class="input-field">
<input type="text" placeholder="Ingresa tú nombre" required>
<i class="uil uil-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú apellido" required>
<i class="uil uil-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú email" required>
<i class="uil uil-envelope icon"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú celular" required>
<i class="uil uil-mobile-android"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú número de casa" required>
<i class="uil uil-house-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Coloca tú dirección" required>
<i class="uil uil-house-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú localidad" required>
<i class="uil uil-location-pin-alt"></i>
</div>
<p>Selecciona tú edad!</p>
<input type="radio" id="child" name="age" value="child" checked>
<label for="child">menor de 18 años</label><br>
<input type="radio" id="adult" name="age" value="adult">
<label for="adult">mayor de 18 años</label><br>
<div class="input-field button">
<input type="button" value="Registrarse">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Estoy utilizando un formulario html en el cuál registro socios para una bibliboteca pero me encuentro con un problema en el cuál tambíen se deben registrar menores de edad. Estos socios menores de edad deben tener un responsable a cargo (alguien que sea mayor de edad). Tengo un formulario de registro y al último coloqué un radio en donde se debe elegir si eres mayor de 18 años o menor de edad. Si eres un adulto podrás registrarte pero si pulsaste el radio que eres menor quisiera desplegar abajo el mismo formulario para que rellene los campos el adulto a cargo.
¿Cómo podría desplegar otro formulario mediante la opción radio (menor de edad)?
Coloqué el código ejecutable para que lo puedan testear
<span class="title">Registro de socios</span>
<form action="#">
<div class="input-field">
<input type="text" placeholder="Ingresa tú nombre" required>
<i class="uil uil-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú apellido" required>
<i class="uil uil-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú email" required>
<i class="uil uil-envelope icon"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú celular" required>
<i class="uil uil-mobile-android"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú número de casa" required>
<i class="uil uil-house-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Coloca tú dirección" required>
<i class="uil uil-house-user"></i>
</div>
<div class="input-field">
<input type="text" placeholder="Ingresa tú localidad" required>
<i class="uil uil-location-pin-alt"></i>
</div>
<p>Selecciona tú edad!</p>
<input type="radio" id="child" name="age" value="child" checked>
<label for="child">menor de 18 años</label><br>
<input type="radio" id="adult" name="age" value="adult">
<label for="adult">mayor de 18 años</label><br>
<div class="input-field button">
<input type="button" value="Registrarse">
</div>
</form>
</div>