correciones de estilo formularios

This commit is contained in:
VictorMongeM 2025-05-13 19:18:33 -06:00
parent cf78a42a81
commit 57a76bbfcd
2 changed files with 34 additions and 35 deletions

View File

@ -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>

View File

@ -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">&#128577 Muy insatisfecho</option>
<option value="2">&#128533 Insatisfecho</option>
@ -89,13 +89,13 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])){
<option value="4">&#128578 Satisfecho</option>
<option value="5">&#128528 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>