0

/* ===== 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>
3
  • Duda: No te sale mejor preguntar antes si es menor de edad o no y así manejar los formularios? te ahorrarías mucho...
    – OCHOA
    Commented el 28 feb. 2023 a las 15:24
  • vos decís de tener un formulario para mayores de edad y otro para menores? Porque los menores de edad deben registrarse pero además deben cargar los datos también los responsable a cargo del menor. Tal vez la entendí mal a tú sugerencia, me podrías explicar un poco más a cerca de ella. @OCHOA
    – Lucas
    Commented el 28 feb. 2023 a las 20:39
  • Lo puedes hacer en el mismo formulario, deja que prepare una respuesta de como puedes hacerlo...
    – OCHOA
    Commented el 1 mar. 2023 a las 13:32

1 respuesta 1

1

El primer archivo lo puedes hacer como tu imaginación te lo diga.

  • Dos botones, uno que diga Registro u otro que diga Soy Menor.
  • Un Formulario con un radio
  • Un formulario con un Combo
  • O simples links, no importa. (Para esto usaras GET)

Ya en tu archivo del formulario, primero evalúas una variable si es menor de edad o no y en base a esa variable haces el formulario.

<?php

    $menor = 0;

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parser</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <span class="h2">Registro de socios</span>
        <form action="#">
            <div>
                <input type="text" placeholder="Nombre">
            </div>
            <div>
                <input type="text" placeholder="Email">
            </div>
            <?php if ($menor == 1){ ?>
                <div>
                    <input type="text" placeholder="Nombre Responsable">
                </div>
                <div>
                    DNI <input type="file">
                </div>
            <?php } ?>
            <div>
                <input type="submit" value="Registrar">
            </div>
        </form>
    </div>
</body>
</html>

Toma de base este pequeño código y pruébalo, un formulario básico, pero luego cambia a $menor = 1; y mira como aparecen los campos que necesitas para el registro del responsable del menor.

Y si eres curioso y revisas el código fuente de la pagina, cuando $menor = 0; ni siquiera aparecen ocultos los campos del "responsable", simplemente no se dibujan en el HTML y listo.

Ya luego debes manejar el insert en tu DB como tu ya lo debes tener planteado y listo.

No olvides marcar la respuesta como Aceptada si solventa tu problema. :-)

2
  • ¿Por qué php?... La respuesta está bien, pero no sabemos si el OP usa php... Commented el 1 mar. 2023 a las 14:29
  • claro ahí tendría que adaptar la idea sin php ya qué utilizo flask, html y boostrap. Me gusta tú propuesta @OCHOA y la quiero usar pero desconozco del lenguaje php
    – Lucas
    Commented el 1 mar. 2023 a las 17:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.