Scribd
Upload
45 views

Formulario de Ingreso

The document contains multiple HTML forms for an employee and company registration system. The first form allows a user to log in with validation for the username and password. Additional forms provide interfaces to register employee details like personal information, company details, and experience history with form validation functions to require filled fields and check data types. The forms utilize CSS for styling and JavaScript for interactivity like date pickers and input restrictions.

Uploaded by

Juan Rua
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views

Formulario de Ingreso

The document contains multiple HTML forms for an employee and company registration system. The first form allows a user to log in with validation for the username and password. Additional forms provide interfaces to register employee details like personal information, company details, and experience history with form validation functions to require filled fields and check data types. The forms utilize CSS for styling and JavaScript for interactivity like date pickers and input restrictions.

Uploaded by

Juan Rua
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

FORMULARIO DE INGRESO

<html> <head> <title>INGRESO</title> <link rel="stylesheet" type="text/css" href="CSS.css"> <style type="text/css"> /*definimos el estilo de la tabla*/ table{ border:outset 5px #666; border-radius: 8px; padding:5px; color:goldenrod; text-align: center; } /*cambiar el stilo de los botones cuando se coloca sobre el*/ input[type="button"]:hover{ background: lightblue; color:#fff; border:groove 1px lightblue; } input[type="text"]/*,input[type="password"]*/:focus{ background: yellow; color:#000; border:solid 1px #ff0000; } input[type="password"]:focus{ background: yellow; color:#000; border:solid 1px #ff0000; } input[type="text"]/*,input[type="password"]*/:hover{ border:solid 1px #ff0000; } input[type="password"]:hover{ border:solid 1px #ff0000; } </style>

<script> function AvisoUsuario(){ var u, c; u=window.document.frmIngreso.txtusu.value; c=window.document.frmIngreso.txtcontra.value; if(u!=="JOLL"){ alert("Usuario Incorrecto"); window.document.frmIngreso.txtusu.value=""; window.document.frmIngreso.txtusu.focus(); } else if (c!=="1234"){ var men="Contrasea Incorrecta"; alert(men); window.document.frmIngreso.txtcontra.value=""; window.document.frmIngreso.txtcontra.focus(); } else alert("Bienvenido al Sistema: " + u); } </script> </head> <center> <body> <form name="frmIngreso"> <table bordercolor="blue"> <tr> <td>Usuario:</td> <td><input type="text" name="txtusu"></td> </tr> <tr> <td>Contrase&ntilde;a:</td> <td><input type="password" name="txtcontra"></td> </tr> </table> <table bordercolor="blue"> <tr> <td><input type="button" name="btnAceptar" value="Aceptar" onclick="AvisoUsuario()"></td> <td><input type="button" name="btnCancelar" value="Cancelar"></td> </tr> </table> </form> </body> </center> </html>

FORMULARIO DE MENU

<html> <head> <title>PANTALLA PRINCIPAL</title> <style> .container { width: 670px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_XavHI/AAAAAAAACw0/qVeZI3gdWQM/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> </head> <body> <div class="container"> <ul id="nav"> <li><a href="#"> <span>Registrar Empleado</span></a></li> <li><a href="#"><!--Menu 1--> <span>Registrar ficha laboral</span></a></li> <li><a href="#"><!--Menu 2--> <span>Registrar Empresa</span></a></li> <li><a href="#"><!--Menu 3-> <span>Expericiencia Laboral</span></a></li> <li><a href="#"><!-Menu 4--> <span>Buscar Empleado</span></a></li> <li><a href="#"><!-Menu 5--> </ul> </div> </body> </html>

FORMULARIO DE REGISTRO DE EMPLEADO

<html> <head> <title>Registrar Empleado</title> <link rel="stylesheet" type="text/css" href="tcal.css" /> <script type="text/javascript" src="tcal.js"></script> <style type="text/css"> fieldset{ border: 1px solid blue; width: 320px; margin: 0 auto; text-align: left; font:17px normal Tahoma; } input[type="text"]:focus{ border:ridge #166cf1; } input[type="select"]:focus{ border:ridge #166cf1; }

input[type="submit"]:hover{ background: lightblue; color:#fff; border:groove 1px lightblue; } input[type="reset"]:hover{ background: lightblue; color:#fff; border:groove 1px lightblue; } table{ font:15px normal courier; } </style> <script> /*evitar ingresar campos vacios*/ function Validar(){ //obtener el formulario para utilizarlo en la validacion var frmRE=document.forms['frmRegistrarEmpleado']; //contar la cantidad de elementos que contiene el formulario var iElementos=frmRE.elements.length; //recorrer todos los elementos del formulario for(var iCont=0;iCont<iElementos;iCont++){ //obtener el elemento actual para utilizarlo var objElemento=frmRE.elements[iCont]; //validar unicamente los elementos del tipo "text" (campos de texto) if(objElemento.type==='text'){ /*estamos utilizando la funcion trim (funcion no propia de JavaScript) para eliminar los espacios en blanco al inicio y final de una cadena*/ if(trim(objElemento.value)===''){ //mostramos un mensaje al usuario alert('Por favor, complete todos los campos del formulario.'); //enfocamos el campo que exta vacio objElemento.focus(); //borramos el contenido del campo (podria contener espacios en blanco) objElemento.value=''; //devolvemos false para que el formulario no sea procesado return false; } } } } /*y este elimina el espacio en blanco dentro de las cajas*/ function trim(strTexto){ //eliminamos los espacios iniciales y finales, con expresiones regulares

return strTexto.replace(/^\s+/g,'').replace(/\s+$/g,''); } /*permite solo numeros*/ function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)){ return false; } return true; } /*permite solo letras*/ function soloLetras(e){ key = e.keyCode || e.which; tecla = String.fromCharCode(key).toLowerCase(); letras = " abcdefghijklmnopqrstuvwxyz"; especiales = [8,37,39,46]; tecla_especial = false; for(var i in especiales){ if(key === especiales[i]){ tecla_especial = true; break; } } if(letras.indexOf(tecla)===-1 && !tecla_especial){ return false; } } </script> </head> <center> <body> <div style="position:absolute; top: 10px; left:10px" <form name="frmRegistrarEmpleado" onsubmit="return Validar();"> <fieldset> <legend>DATOS PERSONALES DEL EMPLEADO</legend> <table> <!--Columnas=td Filas=tr--> <tr> <td>Nombres</td> <td><input type="text" name="txtNombres" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>Apellidos</td> <td><input type="text" name="txtApellidos" onkeypress="return soloLetras(event)"></td>

</tr> <tr> <td>Fecha de Nacimiento</td> <!----> <td><input type="text" ReadOnly = true name="date" class="tcal" value="" /></td> </tr> <tr> <td>Direccion</td> <td><input type="text" name="txtDireccion"></td> </tr> <tr> <td>Telefono</td> <td><input type="text" name="txtTelefono" onkeypress="return isNumberKey(event)"</td> </tr> <tr> <td>Sexo</td> <td > <select name=select type="text"> <option value=1 selected >Masculino</option> <option value=2 >Femenino</option> </select> </td> </tr> <tr> <td>Dni</td> <td><input type="text" name="txtDni" maxlength="9" onkeypress="return isNumberKey(event)"</td> </tr> <tr> <td>Correo</td> <td><input type="text" name="txtCorreo" onchange="return valDni()"</td> </tr> <tr> <td>Edad</td> <td><input type="text" name="txtEdad" onkeypress="return isNumberKey(event)"></td> </tr> </table> </fieldset> <fieldset> <table align="center"> <!--Fila Final de Botones--> <tr> <td><input type="submit" name="btnAceptar" value="Aceptar"></td>

<td><input type="reset" value="Cancelar"></td> </tr> </table> </fieldset> <!--Listado de Empleados-->

<table align="center" border="0" id='listado'> <caption>Formulario de estudiantes</caption> <thead> <tr> <th>#</th> <th>Nombres</th> <th>Apellidos</th> <th>Fec. Nacimiento</th> <th>Direccion</th> <th>Telefono</th> <th>Sexo</th> </tr> </thead> <tbody> <tr> <td align="center">1</td> <td><input type="text" name="txtNombre1" size="40"></td> <td><input type="text" name="txtNota1" size="4"></td> <td><input type="text" name="txtNota1" size="4"></td> <td><input type="text" name="txtNota1" size="4"></td> <td><input type="text" name="txtNota1" size="4"></td> <td><input type="text" name="txtNota1" size="4"></td> </tr> <tr> <td align="center">2</td> <td><input type="text" name="txtNombre2" size="40"></td> <td><input type="text" name="txtNota2" size="4"></td> </tr> </tbody> </thead> <tfoot> <tr> <td colspan="3" align="right">

<input type="reset" value="Limpiar los campos"> <input type="submit" value="Guardar"> </td> </tr> </tfoot> </table> </form> </body> </div> </center> </html>

FORMULARIO DE REGISTRO DE EMPRESA

<html> <head> <title>Registrar Emmpresa</title> <link rel="stylesheet" type="text/css" href="tcal.css" /> <script type="text/javascript" src="tcal.js"></script> <style type="text/css"> fieldset{ border: 1px solid blue; width: 320px; margin: 0 auto; text-align: left; font:17px normal Tahoma; } input[type="text"]:focus{ border:ridge #166cf1;

} input[type="select"]:focus{ border:ridge #166cf1; } input[type="submit"]:hover{ background: lightblue; color:#fff; border:groove 1px lightblue; } input[type="reset"]:hover{ background: lightblue; color:#fff; border:groove 1px lightblue; } table{ font:15px normal courier; } </style> <script> /*evitar ingresar campos vacios*/ function Validar(){ //obtener el formulario para utilizarlo en la validacion var frmRE=document.forms['frmRegistrarEmpresa']; //contar la cantidad de elementos que contiene el formulario var iElementos=frmRE.elements.length; //recorrer todos los elementos del formulario for(var iCont=0;iCont<iElementos;iCont++){ //obtener el elemento actual para utilizarlo var objElemento=frmRE.elements[iCont]; //validar unicamente los elementos del tipo "text" (campos de texto) if(objElemento.type==='text'){ /*estamos utilizando la funcion trim (funcion no propia de JavaScript) para eliminar los espacios en blanco al inicio y final de una cadena*/ if(trim(objElemento.value)===''){ //mostramos un mensaje al usuario alert('Por favor, complete todos los campos del formulario.'); //enfocamos el campo que exta vacio objElemento.focus(); //borramos el contenido del campo (podria contener espacios en blanco) objElemento.value=''; //devolvemos false para que el formulario no sea procesado return false;

} } } } /*y este elimina el espacio en blanco dentro de las cajas*/ function trim(strTexto){ //eliminamos los espacios iniciales y finales, con expresiones regulares return strTexto.replace(/^\s+/g,'').replace(/\s+$/g,''); } /*permite solo numeros*/ function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)){ return false; } return true; } /*permite solo letras*/ function soloLetras(e){ key = e.keyCode || e.which; tecla = String.fromCharCode(key).toLowerCase(); letras = " abcdefghijklmnopqrstuvwxyz"; especiales = [8,37,39,46]; tecla_especial = false; for(var i in especiales){ if(key === especiales[i]){ tecla_especial = true; break; } } if(letras.indexOf(tecla)===-1 && !tecla_especial){ return false; } } </script> </head> <center> <body> <div style="position:absolute; top: 10px; left:10px" <form name="frmRegistrarEmpresa" onsubmit="return Validar();"> <fieldset> <legend>DATOS DE LA EMPRESA</legend> <table> <!--Columnas=td Filas=tr--> <tr> <td>Razon Social</td>

<td><input type="text" name="txtRsocial" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>RUC</td> <td><input type="text" name="txtRUC" maxlength="11" onkeypress="return isNumberKey(event)"</td> </tr> <tr> <td>Nombre del Contaco</td> <td><input type="text" name="txtNcontacto" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>Direccion</td> <td><input type="text" name="txtDireccion"></td> </tr> <tr> <td>Celular</td> <td><input type="text" name="txtCelular" maxlength="9" onkeypress="return isNumberKey(event)"</td> </tr> <tr> <td>Telefono</td> <td><input type="text" name="txtTelefono" maxlength="7" onkeypress="return isNumberKey(event)"</td> </tr> <tr> <td>Pagina web</td> <td><input type="text" name="txtpagweb" onchange="return valDni()"</td> </tr> <tr> <td>Rubro</td> <td><input type="text" name="txtRubro" onkeypress="return soloLetras(event)"></td> </tr> </table> </fieldset> <fieldset> <table align="center"> <!--Fila Final de Botones--> <tr> <td><input type="submit" name="btnAceptar" value="Aceptar"></td> <td><input type="reset" value="Cancelar"></td> </tr> </table> </fieldset>

<!--Listado de Empleados-->

<table align="center" border="0" id='listado'> <caption>Formulario de estudiantes</caption> <thead> <tr> <th>#</th> <th>Razon Social</th> <th>RUC</th> <th>Nombre de contacto</th> <th>Direccion</th> <th>Celular</th> <th>Telefono</th> <th>Pagina web</th> <th>Rubro</th> </tr> </thead> <tbody> <tr> <td align="center">1</td> <td><input type="text" name="txtNombre1" size="40"></td> <td><input type="text" name="txtNota1" size="6"></td> <td><input type="text" name="txtNota1" size="18"></td> <td><input type="text" name="txtNota1" size="6"></td> <td><input type="text" name="txtNota1" size="6"></td> <td><input type="text" name="txtNota1" size="6"></td> <td><input type="text" name="txtNota1" size="6"></td> <td><input type="text" name="txtNota1" size="6"></td> </tr> <tr> <td align="center">2</td> <td><input type="text" name="txtNombre2" size="40"></td> <td><input type="text" name="txtNota2" size="4"></td> </tr> </tbody> </thead> <tfoot> <tr> <td colspan="3" align="right">

<input type="reset" value="Limpiar los campos"> <input type="submit" value="Guardar"> </td> </tr> </tfoot> </table> </form> </body> </div> </center> </html>

FORMULARIO DE REGISTRO DE ENTREVISTA

<html> <head> <title>Registrar Empleado</title> <link rel="stylesheet" type="text/css" href="tcal.css" /> <script type="text/javascript" src="tcal.js"></script> </TABLE> <style type="text/css"> fieldset{ border: 1px solid blue; width: 320px; margin: 0 auto; text-align: left; font:17px normal Tahoma; } input[type="text"]:focus{ border:ridge #166cf1; }

input[type="select"]:focus{ border:ridge #166cf1; } input[type="submit"]:hover{ background: lightblue; color:#fff; border:groove 1px lightblue; } input[type="reset"]:hover{ background: lightblue; color:#fff; border:groove 1px lightblue; } table{ font:15px normal courier; } </style> <script> /*evitar ingresar campos vacios*/ function Validar(){ //obtener el formulario para utilizarlo en la validacion var frmRE=document.forms['frmRegistrarEntrevista']; //contar la cantidad de elementos que contiene el formulario var iElementos=frmRE.elements.length; //recorrer todos los elementos del formulario for(var iCont=0;iCont<iElementos;iCont++){ //obtener el elemento actual para utilizarlo var objElemento=frmRE.elements[iCont]; //validar unicamente los elementos del tipo "text" (campos de texto) if(objElemento.type==='text'){ /*estamos utilizando la funcion trim (funcion no propia de JavaScript) para eliminar los espacios en blanco al inicio y final de una cadena*/ if(trim(objElemento.value)===''){ //mostramos un mensaje al usuario alert('Por favor, complete todos los campos del formulario.'); //enfocamos el campo que exta vacio objElemento.focus(); //borramos el contenido del campo (podria contener espacios en blanco) objElemento.value=''; //devolvemos false para que el formulario no sea procesado return false; } }

} } /*y este elimina el espacio en blanco dentro de las cajas*/ function trim(strTexto){ //eliminamos los espacios iniciales y finales, con expresiones regulares return strTexto.replace(/^\s+/g,'').replace(/\s+$/g,''); } /*permite solo numeros*/ function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)){ return false; } return true; } /*permite solo letras*/ function soloLetras(e){ key = e.keyCode || e.which; tecla = String.fromCharCode(key).toLowerCase(); letras = " abcdefghijklmnopqrstuvwxyz"; especiales = [8,37,39,46]; tecla_especial = false; for(var i in especiales){ if(key === especiales[i]){ tecla_especial = true; break; } } if(letras.indexOf(tecla)===-1 && !tecla_especial){ return false; } } </script> </head> <center> <body> <div style="position:absolute; top: 10px; left:10px" <form name="frmRegistrarEntrevista" onsubmit="return Validar();"> <fieldset> <legend>DATOS DE ENTREVISTA</legend> <table>

<!--Columnas=td Filas=tr--> <table> <table align="left" border="0" id='listado'> <tr>

<td>Realizada por:</td> <td><input type="text" name="txtRealizada" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>Fecha:</td> <!----> <td><input type="text" ReadOnly = true name="date" class="tcal" value="" /></td> </tr> </table> <table align="center" border="0" id='listado'> <tr> <td>Designacion</td> <td><input type="text" name="txtDesignacion" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>supervisor Inmediato</td> <td><input type="text" name="txtS_inmediado" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>Departamento</td> <td><input type="text" name="txtDepartamento" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>Antiguedad en el puesto</td> <td><input type="text" name="txtA_puesto" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>Titular</td> <td><input type="text" name="txtTitular" onkeypress="return soloLetras(event)"></td> </tr> <tr> <td>Puesto anterior</td> <td><input type="text" name="txtP_anterior" onkeypress="return soloLetras(event)"></td> </tr> </table> <fieldset> <table align="center"> <!--Fila Final de Botones--> <tr> <td><input type="submit" name="btnAceptar" value="Aceptar"></td>

<td><input type="reset" value="Cancelar"></td> </tr> </table> </fieldset>

<!--Listado de Empleados-->

<table align="center" border="0" id='listado'> <caption>Formulario de Entrevistas</caption> <thead> <tr> <th>#</th> <th>Designacion</th> <th>supervisor Inmediato</th> <th>Departamento</th> <th>Antiguedad en el puesto</th> <th>Puesto anterior</th> </tr> </thead> <tbody> <tr> <td align="center">1</td> <td><input type="text" name="txtNombre1" size="40"></td> <td><input type="text" name="txtNota1" size="20"></td> <td><input type="text" name="txtNota1" size="20"></td> <td><input type="text" name="txtNota1" size="20"></td> <td><input type="text" name="txtNota1" size="20"></td> </tr> <tr> <td align="center">2</td> <td><input type="text" name="txtNombre2" size="40"></td> <td><input type="text" name="txtNota2" size="10"></td> </tr> </tbody> </thead> <tfoot> <tr> <td colspan="3" align="right">

<input type="reset" value="Limpiar los campos"> <input type="submit" value="Guardar"> </td> </tr> </tfoot> </table> </form> </body> </div> </center> </html>

You might also like