Controles

<html lang="es">
<head>
<meta charset="utf-8" />
<title>EL MEJOR PROFE CHARLES</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="ecuador, uae, alumnos, egresados"/>
<meta name="description" content="SISTEMA DE PRUEBA DE EGRESADOS-
COMPLEXIVO" />
<link rel="icon" type="image/png" sizes="16x16" href="icono2.png" />
<link href='bootstrap/css/bootstrap.css' rel='stylesheet'>
<link href='dataTables.bootstrap4.min.css' rel='stylesheet'>
<script src="jquery-3.6.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div id="container" class="container">
<div class="row offset-1">

<div class="col-md-8 ">
<div class="card">
<div class="card-header bg-info bg-opacity-25">
<h2>Formulario de empleado</h2>
</div>
<div class="card-body">
<form id="form1" method="post"
action="guardarform.php">
<div id="cajat" >
<div class="row">
<div class="col-md-3">
<b>Nombre: </b>
</div>
<input type="text"
class="form-control" id="nombre" name="nombre" onchange="revisarletras()"
maxlength="10" minlength="3" />
<p id="alerta"
class="text-danger" hidden>Alerta!: El nombre debe ser mas de 3 caracteres</p>
</div>
</div>
<div class="row">
<b>Apellido: </b>
</div>
<input type="text"
class="form-control" id="apellido" name="apellido" onkeypress="mostrar2('Estoy en
el apellido');" required/>
</div>
</div>
<div class="row">
<b>Edad: </b>
</div>
<input type="number"
class="form-control" min="2" max="4" id="edad" name="edad" step="0.01"
onchange="mostrar3('Esta es mi edad')" required />
</div>
</div>
<div class="row">
<b>Fecha: </b>
</div>
<input type="date"
class="form-control" id="fecha" name="fecha" value="1984-10-26" disabled/>
</div>
<b>Hora: </b>
</div>
<input type="time"
class="form-control" id="hora" name="hora" value="12:50" readonly />
</div>
</div>
<b hidden>Fecha y Hora: </b><input

type="datetime-local" id="fechahora" name="fechahora" hidden/> <br />
<div class="row">
<b>Contraseña: </b>
</div>
<input type="password"
class="form-control" onchange="mostrar4('Este es la clave')" id="clave"
name="clave" required/>
</div>
</div>
<div class="row">
<b>Correo: </b>
</div>
<input type="email"
id="correo" class="form-control" onchange="ponercorreo();" name="correo" required/>
</div>
</div>
<br/><hr/>
<input type="checkbox" class="form-
check-input" id="terminos" name="terminos"><b> Términos y Condiciones </b> <br />
<input type="checkbox" class="form-
check-input" id="terminos2" name="terminos2" checked ><b> Términos y Condiciones
escogido </b> <br />
<input type="radio" class="form-
check-input" id="r01" onchange="cambiarvalores()" value="1" name="radb" checked>
<b> Opción 01 </b> <br />
check-input" id="r02" onchange="cambiarvalores()" value="2" name="radb"> <b> Opción
02 </b> <br />
check-input" id="r03" onchange="cambiarvalores()" value="3" name="radb"> <b> Opción
03 </b> <br />
<br/><hr/>
<div class="row">
<b>Provincia: </b>
</div>
<select id="provincia"
name="provincia" class="form-select">
<option value="1">
Guayas </option>
<option value="2">
Los rios </option>
<option value="3">
Pichincha </option>
<option value="4">
Esmeraldas </option>
</select>
</div>
</div>
<div class="row" id="opcion1">

<b>Sexo: </b>
</div>
<select id="sexo"
name="sexo" class="form-select">
<option value="1">
MASCULINO </option>
<option value="2">
FEMENINO </option>
<option value="3">
NO DEFINIDO </option>
</select>
</div>
</div>
<br />
<input type="button" class="btn
btn-info btn-sm" id="boton" onclick="funDOM();" value="Esto es botón">
<input type="submit" class="btn
btn-warning btn-lg" id="enviar" value="Esto es enviar">
<input type="reset" class="btn btn-
outline-success" id="resetear" value="Esto es resetear">
<br/>
<button id="btn" class="btn btn-
outline-danger" onclick="mostrar_mensaje()">Botoncito</button>
<a href="http://www.youtube.com"
class="btn btn-primary">Otro botón</a>
<br />
<input type="button" class="btn
btn-dark btn-sm" id="boton2" onclick="funJquery();" value="Esto es otro botón">
</div>
<br /><hr>
</form>
</div>
<div class="card-footer">
<div id="hipervinculos">
<a href="https://www.google.com"
id="hexterno">Ir a google</a> |
<a href="https://www.youtube.com"
id="hexterno2" target="_blank">Ir a youtube</a> |
<a href="index.html" id="hinterno">Ir a
Inicio</a> <br />
</div>
</div>
</div>
</div>
<div class="col-md-12" style="margin-top: 50px">

<div class="card">
<div class="card-header bg-warning bg-opacity-25">
<h2>Tabla de empleado</h2>
</div>
<div class="card-body">
<div id="tablita" class="">
<table id="tablaloca" class="table table-
striped table-bordered">
<thead>
<tr style="background-color:
#00d180">
<th>Nombre</th>
<th>Apellido</th>
<th>Cédula</th>
<th>Correo</th>
<th>Provincia</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Charles</td>
<td>Pérez</td>
<td>0914851160</td>
<td>cperez@uagraria.edu.ec</td>
<td>Guayas</td>
<td>
<button class="btn
btn-warning" type="button" onclick="abrirModal()" >Editar</button>
<button class="btn
btn-danger" type="button">Eliminar</button>
</td>
</tr>
<tr>
<td>Miguel</td>
<td>Espinoza</td>
<td>0915853120</td>
<td>mespinoza@uagraria.edu.ec</td>
<td>Los Rios</td>
<td>
<button class="btn
<button class="btn
</td>
</tr>
<tr>
<td>Isaac</td>
<td>Rodriguez</td>
<td>0960259525</td>
<td>irodriguez@uagraria.edu.ec</td>
<td>Pichincha</td>
<td>
<button class="btn
<button class="btn
</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color:
#00d180">
<th>Nombre</th>
<th>Apellido</th>
<th>Cédula</th>
<th>Correo</th>
<th>Provincia</th>
<th>Acciones</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card-footer">
<div id="hipervinculos2">
<a href="https://www.google.com"
id="hexternoE">Ir a google</a> |
<a href="https://www.youtube.com"
id="hexternoE2" target="_blank">Ir a youtube</a> |
<a href="index.html" id="hinternoE">Ir a
Inicio</a> <br />
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function revisarletras(){
var texto = $("#nombre").val();
var cantidadletras = texto.length;
if (cantidadletras<4){
$("#alerta").removeAttr("hidden");
$("#nombre").addClass("border-danger");
}else{
$("#alerta").prop("hidden","true");
$("#nombre").removeClass("border-danger");
}
}
function mostrar_mensaje(){
alert("Holas todos");
}
function mostrar2(mensaje){
alert(mensaje);
}
function funDOM(){
var txt = '';
txt = document.getElementById("provincia").value;
alert(txt);
}
function funJquery(){
var txt = '';
txt = $("#provincia").val();
alert(txt);
$('#correo').val("alguncorreo@hotmail.com");
}
function cambiarvalores(){
if ($("#r01").prop("checked")){
//alert("La opción uno esta habilitada");
$("#provincia").val(2);
$("#opcion1").prop("hidden","true");
}else if($("#r02").prop("checked")){
//alert("La opción dos esta habilitada");
$("#opcion1").removeAttr("hidden");
}else{
//alert("La opción tres esta habilitada");
$("#opcion1").prop("hidden","true");
}
}
function ponercorreo(){
var cant = 0;
var correo = $("#correo").val();
var num2 = correo.indexOf(".");
var cantletras = correo.length;
for(var i =0; i<cantletras; i++){
if (correo[i]=="@") cant = cant +1;
}
if ((num2 < 0) || (cant != 1)){
alert("El correo no es correcto");
}
}
var men = mensaje;
alert(men);
}
let men = mensaje;
alert(men);
}
</script>
</body>
<script src="dataTables.bootstrap4.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#tablaloca').DataTable({
language: {
lengthMenu: 'Mostrar _MENU_ datos por página',
zeroRecords: 'No se encontró nada',
info: 'Mostrando pág _PAGE_ de _PAGES_',
infoEmpty: 'No hay datos',
infoFiltered: '(filtrando de _MAX_ datos totales)',
search: "Buscar:",
loadingRecords: "Cargando...",
paginate: {
first: "Primero",
last: "Último",
next: "Siguiente",
previous: "Anterior"
},
},
});
});
</script>
<div class="modal fade" id="ventanaEmergente" tabindex="-1" role="dialog" aria-

labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
onclick="cerrarModal()">×</button>
<h4>Datos para editar empleado </h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="form2" name="form2"
action="editarFormulario.php" enctype="multipart/form-data">
<label>Nombre:</label>
<input type="text" class="form-control" id="nom2"
name="nom2" />
<td class="center">
<a class="btn btn-info" onclick="algo();">
<i class="glyphicon glyphicon-edit icon-
white"></i>
Guardar Datos
</a>
</td>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal"
onclick="cerrarModal()">Cerrar</a>
</div>
</div>
</div>
</div>
<script>
function abrirModal() {
$('#ventanaEmergente').modal('show');
function cerrarModal(){
$('#ventanaEmergente').modal('hide');
}
</script>
</html>

Controles

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Controles

Uploaded by

Copyright:

Available Formats

<html lang="es">

<div class="row offset-1">

<b hidden>Fecha y Hora: </b><input

<div class="row" id="opcion1">

<div class="col-md-12" style="margin-top: 50px">

<div class="modal fade" id="ventanaEmergente" tabindex="-1" role="dialog" aria-

You might also like