lunes, febrero 13, 2017

Usando Jquery en mi Sitio Web

Comparto un formulario incorporando el Jquery



formulario.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi Formulario</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<form>
<div id="contenedor" class="datos">
<table border="1" align="center" width="50%">
<tr>
<td colspan="3" align="cente">Datos Personales</td>
</tr>
<tr>
<td width="30%"><p id="lblNombre">Nombre</p></td>
<td width="40%"><input type="text" name="nombre" id="txtNombre">
<td rowspan="5" width="30%"><div id="lblmensaje" class="oculta mensaje"></div></td>
</tr>
<tr>
<td><p id="lblapellido">Nombre</p></td>
<td><input type="text" name="apellido" id="txtApellido">
</tr>
<tr>
<td><p id="lblCI">Cédula de identidad</p></td>
<td><input type="text" name="ci" id="txtci">
</tr>
<tr>
<td><p id="lblDir">Dirección</p></td>
<td><input type="text" name="dir" id="txtDir">
</tr>
<tr>
<td><p id="lblTlf">Teléfono</p></td>
<td><input type="text" name="tlf" id="txtTelefono">
</tr>
</table>
</form>
</body>
</html>

funciones.js

$(document).ready(function(){
$(".datos").css("display","none");
$(".datos").fadeIn(5000);

   $("#txtNombre").mouseenter(function(){
    $(".mensaje").fadeIn(1000);
    document.getElementById('lblmensaje').innerHTML="Ingrese el nombre";
   })
});


No hay comentarios:

Publicar un comentario