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...
Como vemos es un formulario normal, solo hay que destacar unos par?metros adicionales en las etiquetas inputs...
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
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
-
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! -
Muy bueno!!
-
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: -
compro oro:
Hola, como se haria si esta escrito el input y al hacer onFocus se borra el contenido?
Gracias
