From 2d67c970dcfc8e1b5ff62c2013742756fd12a37a Mon Sep 17 00:00:00 2001
From: Joaquin Elias Baranda Ayala <joaquinbaranda1999@gmail.com>
Date: Mon, 22 Nov 2021 13:02:50 -0300
Subject: [PATCH] Se agrego placeholder e iconos a los campos del formulario

---
 curriculumsearch/src/main/webapp/css/formPostulanteStyle.css         | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 curriculumsearch/src/main/webapp/img/placeholder/adress_ph.png       | Bin 0 -> 142826 bytes
 curriculumsearch/src/main/webapp/img/placeholder/email_ph.png        | Bin 0 -> 128442 bytes
 curriculumsearch/src/main/webapp/img/placeholder/lastname_ph.png     | Bin 0 -> 81409 bytes
 curriculumsearch/src/main/webapp/img/placeholder/name_ph.png         | Bin 0 -> 256703 bytes
 curriculumsearch/src/main/webapp/img/placeholder/nroDocumento_ph.png | Bin 0 -> 170046 bytes
 curriculumsearch/src/main/webapp/img/placeholder/telephone_ph.png    | Bin 0 -> 109196 bytes
 curriculumsearch/src/main/webapp/jsp/postulante-form.jsp             | 77 +++++++++++++++++++++++++++++++++++++++--------------------------------------
 8 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 curriculumsearch/src/main/webapp/img/placeholder/adress_ph.png
 create mode 100644 curriculumsearch/src/main/webapp/img/placeholder/email_ph.png
 create mode 100644 curriculumsearch/src/main/webapp/img/placeholder/lastname_ph.png
 create mode 100644 curriculumsearch/src/main/webapp/img/placeholder/name_ph.png
 create mode 100644 curriculumsearch/src/main/webapp/img/placeholder/nroDocumento_ph.png
 create mode 100644 curriculumsearch/src/main/webapp/img/placeholder/telephone_ph.png

diff --git a/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css b/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
index 105dde9..352d6bd 100644
--- a/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
+++ b/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
@@ -213,4 +213,61 @@ h4{
 }
 form[name="postulante"]{
     color: #ffffff;
-}
\ No newline at end of file
+}
+label:hover {
+    color: #bfbfbf;
+}
+
+.size-placeholder::placeholder{
+    background-size: 18px 18px;
+    background-repeat: no-repeat;
+    background-position: right center;
+    
+ 
+}
+/*Nombre*/
+.name-placeholder::placeholder{
+    background-image: url(../img/placeholder/name_ph.png);
+}
+/*Apellido*/
+.lastname-placeholder::placeholder{
+    background-image: url(../img/placeholder/lastname_ph.png);
+}
+/*Email*/
+.email-placeholder::placeholder{
+    background-image: url(../img/placeholder/email_ph.png);
+}
+/*Numero de documento*/
+#nroDocument::-webkit-outer-spin-button,
+#nroDocument::-webkit-inner-spin-button
+{
+    -webkit-appearance: none;
+    margin: 0;
+}
+#nroDocument[type=number] {
+    -moz-appearance: textfield;
+}
+.nroDocument-ph::placeholder{
+    background-image: url(../img/placeholder/nroDocumento_ph.png);
+    margin-left: 5px;
+}
+/*Direccion*/
+.direccion-ph::placeholder{
+    background-image: url(../img/placeholder/adress_ph.png);
+    background-size: 14px 14px;
+}
+/*Telefono*/
+#telefono::-webkit-outer-spin-button,
+#telefono::-webkit-inner-spin-button
+{
+    -webkit-appearance: none;
+    margin: 0;
+}
+#telefono[type=number] {
+    -moz-appearance: textfield;
+}
+.telefono-ph::placeholder{
+    background-image: url(../img/placeholder/telephone_ph.png);
+    
+    
+} 
diff --git a/curriculumsearch/src/main/webapp/img/placeholder/adress_ph.png b/curriculumsearch/src/main/webapp/img/placeholder/adress_ph.png
new file mode 100644
index 0000000..67955ba
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/placeholder/adress_ph.png differ
diff --git a/curriculumsearch/src/main/webapp/img/placeholder/email_ph.png b/curriculumsearch/src/main/webapp/img/placeholder/email_ph.png
new file mode 100644
index 0000000..8c9ed67
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/placeholder/email_ph.png differ
diff --git a/curriculumsearch/src/main/webapp/img/placeholder/lastname_ph.png b/curriculumsearch/src/main/webapp/img/placeholder/lastname_ph.png
new file mode 100644
index 0000000..f4e8f54
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/placeholder/lastname_ph.png differ
diff --git a/curriculumsearch/src/main/webapp/img/placeholder/name_ph.png b/curriculumsearch/src/main/webapp/img/placeholder/name_ph.png
new file mode 100644
index 0000000..16f3113
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/placeholder/name_ph.png differ
diff --git a/curriculumsearch/src/main/webapp/img/placeholder/nroDocumento_ph.png b/curriculumsearch/src/main/webapp/img/placeholder/nroDocumento_ph.png
new file mode 100644
index 0000000..12f8f27
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/placeholder/nroDocumento_ph.png differ
diff --git a/curriculumsearch/src/main/webapp/img/placeholder/telephone_ph.png b/curriculumsearch/src/main/webapp/img/placeholder/telephone_ph.png
new file mode 100644
index 0000000..ca29092
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/placeholder/telephone_ph.png differ
diff --git a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
index 5785b03..c696873 100644
--- a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
@@ -30,25 +30,26 @@
                                 
                               </div>
                               <h4 class="text-start">Datos Personales</h4>
+                              <h6 class="text-start">Todos los campos con (*) deben estar rellenados</h6>
                               <div class="row">
                                   
 
                                   <div class="inputs mb-3 col-md-6">
-                                    <label for="nombre" class="form-label">Nombre</label>
-                                    <input type="text" name="nombre" class="form-control  " id="nombre" required>
+                                    <label for="nombre" class="form-label">Nombre *</label>
+                                    <input placeholder="Ingrese su nombre" type="text" name="nombre" class="form-control name-placeholder size-placeholder" id="nombre" required>
                                     
                                   </div>
                                   
                                   <div class="inputs mb-3 col-md-6">
-                                    <label for="apellido" class="form-label">Apellido</label>
-                                    <input type="text" name="apellido" class="form-control  " id="apellido" required>
+                                    <label for="apellido" class="form-label ">Apellido *</label>
+                                    <input placeholder="Ingrese su apellido" type="text" name="apellido" class="form-control lastname-placeholder size-placeholder " id="apellido" required>
                                     
                                   </div>
           
 
                                   <div class="inputs mb-3 col-md-6">
-                                    <label for="correo" class="form-label">Email</label>
-                                    <input type="email" name="correo" class="form-control  " id="correo" required>
+                                    <label for="correo" class="form-label">Email *</label>
+                                    <input type="email" placeholder="Ingrese su Email" name="correo" class="form-control email-placeholder size-placeholder  " id="correo" required>
                                     
                                   </div>
 
@@ -65,14 +66,14 @@
                                     <label for="tipoDocumento" class="form-label"> Tipo de documento</label> 
                                     <select name="tipoDocumento" id="tipoDocumento" class="bg-light" required>
                                         <option value='CI' selected>C.I</option>
-                                        <option value='PAS'>Pasport</option>
+                                        <option value='PAS'>Passport</option>
                                         <option value='Otro'>Otro</option>
                                     </select> 
                                   </div>
                               
                                   <div class="inputs  mb-3 col-md-6">
                                     <label for="nroDocument" class="form-label">Numero de Documento</label>
-                                    <input type="number" name="nroDocument" class="form-control  " id="nroDocument" required>
+                                    <input placeholder="Ingrese su numero de documento" type="number" name="nroDocument" class="form-control  nroDocument-ph size-placeholder" id="nroDocument" required>
                                     
                                   </div>
                                   
@@ -95,19 +96,19 @@
                                   </div>
                                   
                                   <div class="inputs mb-3 col-md-6">
-                                    <label for="direccion" class="form-label">direccion</label>
-                                    <input type="text" name="direccion" class="form-control  " id="direccion" required> </textarea>
+                                    <label for="direccion" class="form-label">Direccion *</label>
+                                    <input placeholder="Ingrese su direccion" type="text" name="direccion" class="form-control direccion-ph size-placeholder " id="direccion" required> </textarea>
                                   </div>
                                   
                                   
                                   <div class="inputs mb-3 col-md-6">
-                                    <label for="telefono" class="form-label">Telefono</label>
-                                    <input type="number" name="telefono" class="form-control  " id="telefono" required>
+                                    <label for="telefono" class="form-label">Telefono *</label>
+                                    <input placeholder="Ingrese su numero de telefono" type="number" name="telefono" class="form-control telefono-ph size-placeholder" id="telefono" required>
                                     
                                   </div>
                                   
                                   <div class="inputs mb-3 col-md-6">
-                                    <label for="fechaNacimiento" class="form-label">Fecha de nacimiento</label>
+                                    <label for="fechaNacimiento" class="form-label">Fecha de nacimiento *</label>
                                     <input type="date" name="fechaNacimiento" class="form-control  " id="fechaNacimiento" required>
                                     
                                   </div>
@@ -121,11 +122,11 @@
                         
                                   <div class="inputs mb-3 col-md-4"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
                                     <select name="nivelIngles" id="nivelIngles" class="content-select">
-                                    <option value="1" selected>Ingles muy basico</option>
+                                    <option value="1" selected>Conocimiento de ingles muy basico</option>
                                     <option value="2" >Comprendo algunas cosas y puedo leer con la ayuda del traductor</option>
-                                    <option value="3" >Puedo leer tranquilamente</option>
-                                    <option value="4" >Puedo escribir documentacion</option>
-                                    <option value="5" >Puedo escribir y hablar tranquilamente</option>
+                                    <option value="3" >Puedo entender todo lo que leo</option>
+                                    <option value="4" >Puedo escribir documentacion en ingles</option>
+                                    <option value="5" >Puedo escribir y hablar fluidamente</option>
                                     </select> 
                                   </div>
                                 
@@ -295,11 +296,11 @@
                 <form name="experiencia-form" class="needs-validation" novalidate>
 
                         <div class="inputs">
-                            <label for="institucionExperiencia" class="inputs form-label">Institucion</label>
-                            <input type="text" class="inputs form-control  " name="institucion" id="institucionExperiencia" required>
+                            <label for="institucionExperiencia" class="inputs form-label">Institucion *</label>
+                            <input placeholder="Ingrese su institucion" type="text" class="inputs form-control  " name="institucion" id="institucionExperiencia" required>
                         </div>
                         <div class="inputs">
-                            <label for="fechaDesdeExperiencia" class="form-label">Fecha Desde</label>
+                            <label for="fechaDesdeExperiencia" class="form-label">Fecha Desde *</label>
                             <input type="date" class="form-control" name="fechaDesde" id="fechaDesdeExperiencia" required>
                             <div class="invalid-feedback errorFechaDesde">
                               
@@ -313,27 +314,27 @@
                           </div>
                         
                         <div class="inputs">
-                            <label for="cargo" class="form-label">Cargo</label>
-                            <input type="text" class="form-control " name="cargo" id="cargo" required>
+                            <label for="cargo" class="form-label">Cargo *</label>
+                            <input placeholder="Ingrese su cargo" type="text" class="form-control " name="cargo" id="cargo" required>
                         </div>
 
                         <div class="inputs">
-                          <label for="descripcion" class="form-label">Descripcion</label>
-                          <textarea  class="form-control" name="descripcion" id="descripcion" required></textarea>
+                          <label for="descripcion" class="form-label">Descripcion *</label>
+                          <textarea placeholder="Ingrese una descripcion de su trabajo"  class="form-control" name="descripcion" id="descripcion" required></textarea>
 
                         </div>
                         <div class="inputs">
                           <label for="refNombre" class="form-label">Nombre de la Referencia</label>
-                          <input type="text" class="form-control  " name="nombreReferencia" id="refNombre" >
+                          <input placeholder="Ingrese el nombre de su referencia" type="text" class="form-control  " name="nombreReferencia" id="refNombre" >
                         </div>
                         <div class="inputs">
                           <label for="refTel" class="form-label">Telefono de la Referencia</label>
-                          <input type="text" class="form-control  " name="telefonoReferencia" id="refTel" >
+                          <input placeholder="Ingrese el telefono de su referencia" type="text" class="form-control  " name="telefonoReferencia" id="refTel" >
                         </div>
                         
                         <div class="inputs">
                           <label for="motivoSalida" class="form-label">Motivo de Salida</label>
-                          <textarea class="form-control  " name="motivoSalida" id="motivoSalida" ></textarea>
+                          <textarea placeholder="Ingrese el motivo de su salida" class="form-control  " name="motivoSalida" id="motivoSalida" ></textarea>
                         </div>
                         <div class="inputs">
                           <label for="tipoExperiencia" class="form-label"> Tipo de Experiencia</label> 
@@ -420,12 +421,12 @@
 <%--                <label for="tipoDeEstudio" class="form-label">Tipo De Estudio</label>--%>
 <%--                <input type="text" class="form-control  " name="tipoDeEstudio" id="tipoDeEstudio">--%>
                 <div class="form-group">
-                    <label for="institucionEstudio" class="form-label">Institucion</label>
-                    <input type="text" class="form-control" name="institucion" id="institucionEstudio" required>
+                    <label for="institucionEstudio" class="form-label">Institucion *</label>
+                    <input placeholder="Ingrese su institucion" type="text" class="form-control" name="institucion" id="institucionEstudio" required>
                 </div>
                 <div class="form-group">
-                    <label for="temaDeEstudio" class="form-label">Carrera/Bachiller/Tema de Curso</label>
-                    <input type="text" class="form-control" name="temaDeEstudio" id="temaDeEstudio" required>
+                    <label for="temaDeEstudio" class="form-label">Carrera/Bachiller/Tema de Curso *</label>
+                    <input placeholder="Ingrese su carrera/bachiller/tema de curso " type="text" class="form-control" name="temaDeEstudio" id="temaDeEstudio" required>
                 </div>
                   <div class="form-group">
                       <label for="estado">Estado</label>
@@ -437,7 +438,7 @@
                       </select>
                   </div>
                 <div class="form-group">
-                    <label for="fechaDesdeEstudio" class="form-label">Fecha Desde</label>
+                    <label for="fechaDesdeEstudio" class="form-label">Fecha Desde *</label>
                     <input type="date" class="form-control  " name="fechaDesde" id="fechaDesdeEstudio" required>
                     <div class="invalid-feedback errorFechaDesde">
                               
@@ -476,17 +477,17 @@
             <div class="modal-body">
               <form name="referencia-form" class="needs-validation" novalidate>
                 <div class="form-group">
-                    <label for="nombre" class="form-label">Nombre</label>
-                    <input type="text" class="form-control" name="nombre" id="nombre" required>
+                    <label for="nombre" class="form-label">Nombre *</label>
+                    <input placeholder="Ingrese el nombre de su referencia" type="text" class="form-control" name="nombre" id="nombre" required>
                 </div>
                 <div class="form-group">
-                    <label for="relacion" class="form-label">Relacion</label>
-                    <input type="text" class="form-control" name="relacion" id="relacion" required>
+                    <label for="relacion" class="form-label">Relacion *</label>
+                    <input placeholder="Ingrese la relacion con su referencia" type="text" class="form-control" name="relacion" id="relacion" required>
                 </div>
 
                 <div class="form-group">
-                  <label for="telefono" class="form-label">Telefono</label>
-                  <input type="number" class="form-control" name="telefono" id="telefono" required>
+                  <label for="telefono" class="form-label">Telefono *</label>
+                  <input placeholder="Ingrese el numero de su referncia" type="number" class="form-control" name="telefono" id="telefono" required>
               </div>
                  
                 
--
libgit2 0.26.0