From 57a76bbfcd5ff9fed4b96cf0377e37abd77041b3 Mon Sep 17 00:00:00 2001 From: VictorMongeM <victor.monge.morales@gmail.com> Date: Tue, 13 May 2025 19:18:33 -0600 Subject: [PATCH] correciones de estilo formularios --- views/formulario-candidato.html | 39 ++++++++++++++-------------- views/formulario-datos-candidato.php | 30 ++++++++++----------- 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/views/formulario-candidato.html b/views/formulario-candidato.html index d2b6175..b62931a 100644 --- a/views/formulario-candidato.html +++ b/views/formulario-candidato.html @@ -14,48 +14,47 @@ <div class="card-body" style="margin: 0px 30px;"> <!-- ==================== Formulario ==================== --> - <form style="margin: 0px 50px;" id="formulario-datos-basicos" action="" method="POST"> + <form style="margin: 0px 10%;" id="formulario-datos-basicos" action="" method="POST"> <h3>Registro</h3> <label class="form-label" for="nombres" style="margin: 10px 0px 5px;">Nombre</label> - <input class="border rounded-pill shadow-sm form-control" type="text" id="nombres" placeholder="Nombre/s" required=""> - + <input class="border rounded border-dark-subtle form-control" type="text" id="nombres" placeholder="Nombre/s" required=""> + <label class="form-label" for="primer_apellido" style="margin: 10px 0px 5px;">Primer apellido</label> - <input class="border rounded-pill shadow-sm form-control" type="text" id="primer_apellido" placeholder="Primer apellido" required=""> - + <input class="border rounded border-dark-subtle form-control" type="text" id="primer_apellido" placeholder="Primer apellido" required=""> + <label class="form-label" for="segundo_apellido" style="margin: 10px 0px 5px;">Segundo apellido</label> - <input class="border rounded-pill shadow-sm form-control" type="text" id="segundo_apellido" placeholder="Segundo apellido"> - + <input class="border rounded border-dark-subtle form-control" type="text" id="segundo_apellido" placeholder="Segundo apellido"> + <label class="form-label" for="correo" style="margin: 10px 0px 5px;">Correo electrónico</label> - <input class="border rounded-pill shadow-sm form-control" type="email" id="correo" required="" placeholder="usuario@ejemplo.com"> - + <input class="border rounded border-dark-subtle form-control" type="email" id="correo" required="" placeholder="usuario@ejemplo.com"> + <label class="form-label" for="telefono" style="margin: 10px 0px 5px;">Teléfono</label> - <input class="border rounded-pill shadow-sm form-control" type="tel" id="telefono" placeholder="10 digitos de su número de teléfono" minlength="9" maxlength="10" required=""> - + <input class="border rounded border-dark-subtle form-control" type="tel" id="telefono" placeholder="10 digitos de su número de teléfono" minlength="9" maxlength="10" required=""> + <label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label> - <select class="border rounded-pill shadow-sm form-select" id="id_examen" required=""> + <select class="border rounded border-dark-subtle form-select" id="id_examen" required=""> <option value="NULL">Seleccione una opción</option> </select> - + <label class="form-label" for="id_tipo_id" style="margin: 10px 0px 5px;">Tipo de identificación</label> - <select class="border rounded-pill shadow-sm form-select" id="id_tipo_id" required=""> + <select class="border rounded border-dark-subtle form-select" id="id_tipo_id" required=""> <option value="NULL">Seleccione una opción</option> </select> - + <label class="form-label" for="id_rango_edad" style="margin: 10px 0px 5px;">Rango de edad</label> - <select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required=""> + <select class="border rounded border-dark-subtle form-select" id="id_rango_edad" required=""> <option value="NULL">Seleccione una opción</option> </select> - + <label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label> - <select class="border rounded-pill shadow-sm form-select" id="id_genero" required=""> + <select class="border rounded border-dark-subtle form-select" id="id_genero" required=""> <option value="NULL">Seleccione una opción</option> <option value="1">Masculino</option> <option value="2">Femenino</option> <option value="3">Prefiero no decir</option> </select> - <input class="btn border rounded-pill border-3 border-primary-subtle shadow btn-lg btn-primary" type="submit" value="Enviar" style="margin: 15px 0px;" name="btnEnviar"> - </form> + <input class="btn border rounded-3 border-3 border-primary-subtle btn-primary w-100" type="submit" value="Enviar" style="margin: 15px 0px;" name="btnEnviar"> </form> <!-- ==================== Fin del formulario ==================== --> <div id="mensaje-error"></div> </div> diff --git a/views/formulario-datos-candidato.php b/views/formulario-datos-candidato.php index 64ba1e0..163e4b5 100644 --- a/views/formulario-datos-candidato.php +++ b/views/formulario-datos-candidato.php @@ -25,55 +25,55 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])){ <div class="card"> <div class="card-body" style="margin: 0px 30px;"> <!-- ==================== Formulario ==================== --> - <form style="margin: 0px 50px;" id="formulario-datos-extendido" method="post" action="#"> - <input class="border rounded-pill shadow-sm form-control" type="number" id="id_candidato" value="<?php echo $id_candidato; ?>"> + <form style="margin: 0px 10%;" id="formulario-datos-extendido" method="post" action="#"> + <input class="border rounded-3 border-dark-subtle form-control" type="number" id="id_candidato" value="<?php echo $id_candidato; ?>"> <h4>Información geográfica</h4> <label class="form-label" for="id_pais" style="margin: 10px 0px 5px;">País</label> - <select class="border rounded-pill shadow-sm form-select" id="id_pais" value="NULL" required=""> + <select class="border rounded-3 border-dark-subtle form-select" id="id_pais" value="NULL" required=""> <option value="NULL">Seleccione un país</option> <option value="1">México</option> <option value="2">Otro</option> </select> <label class="form-label" for="codigo_postal" style="margin: 10px 0px 5px;">Código postal</label> - <input class="border rounded-pill shadow-sm form-control" type="number" id="codigo_postal" placeholder="Introduzca su código postal" style="margin: 0px 0px;" maxlength="5" disabled=""> + <input class="border rounded-3 border-dark-subtle form-control" type="number" id="codigo_postal" placeholder="Introduzca su código postal" style="margin: 0px 0px;" maxlength="5" disabled=""> - <button class="btn btn-sm bg-white border rounded-pill border-3 border-dark-subtle shadow-sm" type="button" id="buscarBtn" style="margin: 5px 0px;" disabled="">Buscar</button> + <button class="btn bg-primary-subtle border rounded-3 border-dark-subtle btn-primary w-100" type="button" id="buscarBtn" style="margin: 15px 0px;color: rgb(0,0,0);" disabled="">Buscar</button> <label class="form-label" for="id_estado" style="margin: 10px 0px 5px;display: grid;">Estado</label> - <select class="border rounded-pill shadow-sm form-select" id="id_estado" disabled=""> + <select class="border rounded-3 border-dark-subtle form-select" id="id_estado" disabled=""> <option value="NULL">Seleccione su estado</option> </select> <label class="form-label" for="id_municipio" style="margin: 10px 0px 5px;">Municipio</label> - <select class="border rounded-pill shadow-sm form-select" id="id_municipio" disabled=""> + <select class="border rounded-3 border-dark-subtle form-select" id="id_municipio" disabled=""> <option value="NULL">Seleccione su municipio</option> </select> <label class="form-label" for="id_colonia" style="margin: 10px 0px 5px;">Colonia</label> - <select class="border rounded-pill shadow-sm form-select" id="id_colonia" disabled=""> + <select class="border rounded-3 border-dark-subtle form-select" id="id_colonia" disabled=""> <option value="NULL">Seleccione su colonia</option> </select> <h4 style="margin: 20px 0px 0px;">Información académica/laboral</h4> <label class="form-label" for="id_nivel" style="margin: 10px 0px 5px;">Nivel de estudios</label> - <select class="border rounded-pill shadow-sm form-select" id="id_nivel" required=""> + <select class="border rounded-3 border-dark-subtle form-select" id="id_nivel" required=""> <option value="NULL">Seleccione su nivel de estudios</option> </select> <label class="form-label" for="nombre_empresa" style="margin: 10px 0px 5px;">Nombre de su empresa o institución</label> - <input class="border rounded-pill form-control" type="text" id="nombre_empresa" list="sugerencias_ei" placeholder="Introduzca el nombre de su empresa o institución" required=""> + <input class="border rounded-3 border-dark-subtle form-control" type="text" id="nombre_empresa" list="sugerencias_ei" placeholder="Introduzca el nombre de su empresa o institución" required=""> <datalist id="sugerencias_ei"></datalist> <label class="form-label" for="id_giro" style="margin: 10px 0px 5px;">Giro de su empresa o institución</label> - <select class="border rounded-pill shadow-sm form-select" id="id_giro" required=""> + <select class="border rounded-3 border-dark-subtle form-select" id="id_giro" required=""> <option value="NULL">Seleccione una opción</option> </select> <label class="form-label" for="motivo_examen" style="margin: 10px 0px 5px;">Motivo de examen</label> - <select class="border rounded-pill shadow-sm form-select" id="motivo_examen" required=""> + <select class="border rounded-3 border-dark-subtle form-select" id="motivo_examen" required=""> <option value="NULL">Seleccione una opción</option> <option value="Lorem Ipsum">Lorem Ipsum</option> <option value="Adcnjcafgrf">Adcnjcafgrf</option> @@ -81,7 +81,7 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])){ <h4 style="margin: 20px 0px 0px;">Calificación del servicio</h4> <label class="form-label" for="calificacion_servicio" style="margin: 10px 0px 5px;">¿Qué tan satisfecho está con nuestra institución, considerando la calidad de las instalaciones, la atención del personal y el proceso de aplicación del examen?</label> - <select class="border rounded-pill shadow-sm form-select" id="calificacion_servicio" required=""> + <select class="border rounded-3 border-dark-subtle form-select" id="calificacion_servicio" required=""> <option value="NULL">Seleccione una opción</option> <option value="1">🙁 Muy insatisfecho</option> <option value="2">😕 Insatisfecho</option> @@ -89,13 +89,13 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])){ <option value="4">🙂 Satisfecho</option> <option value="5">😐 Muy satisfecho</option> </select> - + <br> <div class="form-check"> <input class="form-check-input" type="checkbox" id="consentimiento_pub" value="1" checked> <label class="form-check-label" for="consentimiento_pub">Consiento que mis datos personales sean tratados de conformidad con los términos y condiciones informados en el presente <a href="#">aviso de privacidad</a>.</label> </div> - <input class="btn border rounded-pill border-3 border-primary-subtle shadow btn-lg btn-primary" type="submit" style="margin: 15px 0px;" value="Enviar" name="btnEnviar"> + <input class="btn border rounded-3 border border-primary-subtle btn-primary w-100" type="submit" style="margin: 15px 0px;" value="Enviar" name="btnEnviar"> </form> <!-- ==================== Fin del formulario ==================== --> </div>