Formulario de página única
Permiten a las personas interactuar con el sistema, ingresando, editando o confirmando información. Se usan para registrarse en un servicio, programa o beneficio, para solicitar turnos o iniciar sesión en una cuenta.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Trabajá con nosotros</title>
<!-- Obelisco -->
<!-- OBELISCO CDN's -->
<!-- Obelisco -->
</head>
<body>
<main id="main">
<article class="pb-5 mb-4">
<header class="bg-light pt-3 pb-5 mb-5">
<div class="container pt-3 px-3 px-lg-0">
<nav aria-label="Navegación secundaria" class="py-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item"><a href="#">Formulario de postulación</a></li>
</ol>
</nav>
<div class="row">
<div class="col-12 col-xl-8">
<div class="mt-2 pt-1">
<h1 class="mb-3">Postulación a búsquedas activas</h1>
<p class="lead">
Este formulario está destinado a personas interesadas en postularse a las búsquedas laborales abiertas
en el Gobierno de la Ciudad de Buenos Aires. Completarlo lleva entre 5 y 10 minutos.
</p>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="col-12 col-xl-8">
<div class="mb-5">
<h6 class="mb-3">Antes de empezar</h6>
<ul class="list-informative-check mb-4">
<li>Contá con el archivo de tu currículum vitae. </li>
<li>Contá con el enlace a tu perfil en LinkedIn o portafolio web. </li>
</ul>
<div class="d-flex gap-2 mb-4">
<span class="material-symbols-rounded text-info">info</span>
<p>Todos los campos son obligatorios, salvo que estén marcados como opcionales.</p>
</div>
</div>
<form id="formData">
<!-- Datos personales -->
<div class="mb-5">
<h3 class="mb-1">Datos personales</h3>
<hr class="mb-2 mt-0">
<p class="text-md mb-4 pb-2">
Información básica para poder identificarte y establecer contacto. Solo se utilizará con fines
vinculados
a
las búsquedas laborales del GCBA.
</p>
<div class="d-flex flex-column gap-3">
<!-- nombre y apellido -->
<div class="row">
<div class="col-12 col-xl-8">
<div class="form-label-container">
<label for="fullname" class="form-label">Nombre y apellido</label>
</div>
<input type="text" class="form-control" id="fullname" name="fullname" />
</div>
</div>
<!-- nombre y apellido -->
<!-- fecha de nacimiento -->
<div class="row">
<div class="col-12 col-xl-4">
<div class="form-label-container">
<label for="date" class="form-label">Fecha de nacimiento</label>
</div>
<input type="date" class="form-control" id="date" name="date" aria-describedby="date-help" />
</div>
</div>
<!-- fecha de nacimiento -->
<!-- documento -->
<div class="row ">
<div class="col-12 col-xl-4">
<div class="form-label-container">
<label for="type_doc" class="form-label">Tipo de documento</label>
</div>
<select class="form-control form-select" id="type_doc" name="type_doc"
aria-label="Default select example">
<option selected disabled>Seleccionar…</option>
<option value="dni">DNI</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col-12 mt-3 mt-lg-0 col-xl-6">
<div class="form-label-container">
<label for="nro_dni" class="form-label">Número de documento</label>
</div>
<input type="text" class="form-control " id="nro_dni" name="nro_dni" aria-describedby="Text"
placeholder="Texto" />
<p class="form-label-description">
Ingresá solo números, sin puntos ni guiones.
</p>
</div>
</div>
<!-- documento -->
<!-- nro de telefono -->
<div class="row">
<div class="col-12 col-xl-6">
<div class="form-label-container ">
<label for="nro_tel" class="form-label">
Número de teléfono
</label>
</div>
<input type="number" class="form-control " name="nro_tel" aria-describedby="Number"
placeholder="11 0000 0000" />
<!-- <div class="invalid-feedback">
<p>Los datos introducidos son inválidos.</p>
</div> -->
<p class="form-label-description">
Podés ingresar un número de línea o celular, con característica sin el 0 ni el 15.
</p>
</div>
</div>
<!-- nro de telefono -->
</div>
</div>
<!-- Datos personales -->
<!-- Información laboral y académica -->
<div class="mb-5">
<h3 class="mb-1">Información laboral y académica</h3>
<hr class="mb-2 mt-0">
<p class="text-md mb-4 pb-2">
Contanos sobre tu formación y experiencia para poder conocer mejor tu perfil profesional.
</p>
<!-- Situación laboral actual -->
<div class="row">
<!-- Situación laboral actual -->
<div class="col-12 col-xl-6">
<p class="headline-md mb-4">Situación laboral actual</p>
<!-- input radios -->
<div class="form-radio">
<input class="form-radio-input" type="radio" name="profession" id="profession-radio-designer"
value="diseñador" checked />
<label class="form-radio-label" for="profession-radio-designer">
Trabajo en relación de dependencia
</label>
</div>
<div class="form-radio">
<input class="form-radio-input" type="radio" name="profession" id="profession-radio-freelance"
value="independiente" />
<label class="form-radio-label" for="profession-radio-freelance">
Trabajo de forma independiente
</label>
</div>
<div class="form-radio">
<input class="form-radio-input" type="radio" name="profession" id="profession-radio-none"
value="no_trabajo" />
<label class="form-radio-label" for="profession-radio-none">
No trabajo
</label>
</div>
<!-- input radios -->
</div>
<!-- Años de antigüedad -->
<div class="col-12 mt-3">
<div class="row">
<div class="col-7 col-xl-4">
<div class="form-label-container">
<label for="anios_antiguedad" class="form-label">
Años de antigüedad
</label>
</div>
<input type="number" class="form-control" id="anios_antiguedad" name="anios_antiguedad"
placeholder="0" />
</div>
</div>
</div>
</div>
<div class="row mt-4 pt-2">
<div class="col-12">
<p class="headline-md mb-4">Situación académica actual</p>
<!-- selects -->
<div class="row mb-4 pb-2 flex-column">
<div class="col-12 col-xl-5">
<div class="form-label-container">
<label for="nivel_estudios" class="form-label">Nivel de estudios alcanzado</label>
</div>
<select class="form-control form-select mb-3" id="nivel_estudios" name="nivel_estudios">
<option value="Seleccionar">Seleccionar</option>
<option value="1">Opción</option>
<option value="2">Opción</option>
<option value="3">Opción</option>
</select>
</div>
<div class="col-12 col-xl-5">
<div class="form-label-container mt-3">
<label for="estado_actual" class="form-label">Estado actual</label>
</div>
<select class="form-control form-select mb-3" id="estado_actual" name="estado_actual">
<option value="Seleccionar">Seleccionar</option>
<option value="1">Opción</option>
<option value="2">Opción</option>
<option value="3">Opción</option>
</select>
</div>
<div class="col-12 col-xl-5">
<div class="form-label-container mt-3">
<label for="area_estudio" class="form-label">Área de estudio</label>
<span class="badge-forms badge-optional-forms">Opcional</span>
</div>
<select class="form-control form-select" id="area_estudio" name="area_estudio">
<option value="0">Seleccionar</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
</div>
</div>
</div>
<!-- selects -->
<!-- input file -->
<div class="mt-4 pt-2">
<div class="col-12 col-xl-8">
<div class="form-label-container">
<label for="curriculum_file" class="form-label">Cargá tu curriculum vitae</label>
</div>
<p class="form-label-description">
Subí un archivo de máximo 2MB en formato DOC o PDF.
</p>
<input type="file" class="form-control" id="curriculum_file" name="curriculum_file"
accept=".pdf,.doc,.docx" />
</div>
</div>
<!-- input file -->
</div>
</div>
</div>
<!-- Información laboral y académica -->
<!-- Información adicional -->
<div class="mb-5">
<div class="col-12 col-xl-8 mt-3">
<h3 class="mb-1">Información adicional</h3>
<hr class="mt-0 mb-4 pb-2">
<div class="row">
<!-- Situación académica actual -->
<div class="col-12 col-xl-10">
<div class="form-label-container">
<label for="comentario" class="form-label">¿Querés contarnos algo más?</label>
<span class="badge-forms badge-optional-forms">Opcional</span>
</div>
<textarea class="form-control" id="comentario" name="comentario"
placeholder="¿Querés contarnos algo más?" maxlength="100" rows="5"
aria-describedby="TextArea"></textarea>
</div>
<!-- Situación académica actual -->
</div>
</div>
</div>
<!-- Información adicional -->
<!-- condiciones legales -->
<div class="col-12">
<p class="text-md mb-4 pb-2">
Al enviar el formulario, tu perfil se sumará a nuestra base de datos de búsquedas activas. <br>
Recibirás un
correo si tu perfil coincide con alguna convocatoria.
</p>
<div class="form-checkbox">
<input class="form-checkbox-input" type="checkbox" name="ofertas" id="ofertas"
value="Me interesa recibir nuevas ofertas laborales a mi casilla de correo electrónico." />
<label class="form-checkbox-label" for="ofertas">
Me interesa recibir nuevas ofertas laborales a mi casilla de correo electrónico.
</label>
</div>
<div class="form-checkbox">
<input class="form-checkbox-input" type="checkbox" name="terminos" id="terminos"
value="Leí y estoy de acuerdo con las Políticas de privacidad." />
<label class="form-checkbox-label" for="terminos">
Leí y estoy de acuerdo con las <a href="">Políticas de privacidad</a>.
</label>
</div>
</div>
<!-- condiciones legales -->
<button type="submit" class="btn btn-primary mt-4">Enviar postulación</button>
</form>
</div>
</div>
</article>
</main>
</body>
</html>