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
-
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?
-
Buen Manual!!!
Necesitaba eso gracias!!! ehh
no sabras como hacer bordes redondeados de los input text¿? -
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