Efectos sobre elementos INPUT
Escrito por Mauro Rondinelli el Martes 27 de Setiembre de 2005 a las 00:00hs
En este articulo veremos como por medio de CSS y JavaScript podemos darle algo mas de interactividad a nuestros formularios cambiando el color del borde sobre el campo (input) que tiene el foco, ósea sobre el campo que se escribe.
Veamos el ejemplo...
Como ven al situar el foco sobre un campo este cambia su color de borde haciendo mas visible el campo sobre el cual vamos a escribir, el escenario ideal para aplicar este efecto son aquellos formularios grandes donde el usuario debe ingresar gran cantidad de datos y puede que entre tantos inputs pierda la vista de donde esta escribiendo, al resaltar el borde con este efecto estamos ayudando a que eso no suceda.
Empecemos armando el formulario...
<form name="form1" method="post" action="">
Nombre <input type="text" name="nombre" onFocus="foco(this);" onBlur="no_foco(this);" style="border:1px solid #CCCCCC">
<br>
Apellido <input type="text" name="apellido" onFocus="foco(this);" onBlur="no_foco(this);" style="border:1px solid #CCCCCC"><br><br>
<input type="submit" name="Submit" value="Enviar">
</form>
Como vemos es un formulario normal, solo hay que destacar unos parámetros adicionales en las etiquetas inputs...
<input type="text" name="nombre" onFocus="foco(this);" onBlur="no_foco(this);" style="border:1px solid #CCCCCC">
Los primeros dos parámetros adicionales son onFocus y OnBlur estos parámetros son eventos que se producirán cuando el input tenga el foco (onFocus) y cuando lo pierda (onBlur) al producirse esos efectos se llama a la función JavaScript asociada...
onFocus="foco(this);"
En el caso de onFocus llamamos a la función "foco" y le pasamos como parámetro el input, esto lo hacemos utilizando la palabra clave "this". En el caso de onBlur llamamos a la función"no_foco" y también le pasamos "this" como parámetro.
Ahora tenemos que crear la funciones JavaScript que nombramos anteriormente y que son las encargadas de generar el efecto que queremos lograr, para ello pongamos el siguiente código entre las etiquetas <head> </head> de nuestro documento...
<script><!--
function foco(elemento) {
elemento.style.border = "1px solid #000000";
}
function no_foco(elemento) {
elemento.style.border = "1px solid #CCCCCC";
} -->
</script>
En este código podemos ver las funciones antes nombradas ("foco" y "no_foco") que lo que hacen es cambiarle el estilo del borde al elemento input pasado como parámetro (this)...
elemento.style.border = "1px solid #000000";
Solo cabe aclarar que podemos modificar los colores a nuestro antojo.
comentarios
-
gabriela:
Gracias por compartir!
-
HOLA...
OYE ESTOY HACIENDO UNA PAGINA WEB, PERO QUIERO PONER Efectos sobre elementos INPUT, COMO LE HAGO, MI PAGINA LA ESTOY HACIENDO EN DREAMWEAVER CS3.
Necesito Ayuda por favor!!! -
Pues no sabría como hacerlo. Saludos
-
Hola, como se haria si esta escrito el input y al hacer onFocus se borra el contenido?
Gracias -
Hola, tengo este script para enviar por mail , el problema es que si me pongo en lugar de usuario al enviar este voy a elementos enviados y veo las opciones seleccionadas , alguien sabe como hacer para que no le muestre al usu las opciones que eligio ?
gcias.
Ingrese comentarios del pedido de franquicias
Ingrese
su nombre: Ingrese su dirección de mail : Informe del Problema: -
Muy bueno!!
-
Este lo aprendí en un tutorial de lynda.com sobre CSS y es mucho más rápido.
Dentro de la etiqueta pones:
input:focus, textarea:focus {
border: 2px solid #630;
}
Y listo! -
Rafael Orozco:
Disculpen me podrian ayudar con los siguiente: en drean waber diseñe un formulario pero ahora no se com hacer para que los datos que la visita introduzca los envie a mi correo electronico. pues no se nada de programacion y me urge un poco eso
-
Buen Manual!!!
Necesitaba eso gracias!!! ehh
no sabras como hacer bordes redondeados de los input text¿? -
jesu gabriel:
muy bueno necesitaba algo oye pero y si por ejemplo le quiero poner un tipo de desenfoque es que vi una pagina que asi le pone a su input un desenfoque de color y esta muy padre me podrias decir como?
