Formulario Dinamico con HTML y JavaScript - By eoma2425

por **eoma2425** Dom 21 Oct 2012, 5:28 pm

les traigo un pequeño aporte que estoy implementando en mi pagina web, se trata de un formulario de ingreso dinamico y muy presentable.

Formulario Dinamico con HTML y JavaScript - By eoma2425 Index.php?ftpserver=209.190.85.46&ftpserverport=21&username=mb260_11345973&language=es&skin=blue&ftpmode=binary&passivemode=yes&sslconnect=no&viewmode=list&sort=&sortorder=&state=view&state2=image&directory=%2Fhtdocs%2Fuploads&entry=2

como pueden observar se trata de un simple formulario con la excepcion que en medio de los campos a llenar tiene predeterminado un texto de color gris el cual nos indica que es lo que tenemos que ingresar y que al momento de dar click en el campo correo, automaticamente se borrara el contenido predeterminado, nos dejara el campo vacio para empezar a escribir y cambiara el color de texto

lo mismo pasa para ingresar el password con la excepcion que aqui al igual que cualquier otra contraseña no mostrara los datos solamente estos puntos

Ahora viene lo que le interesara a muchos, El Codigo:


<form method="post" action="xxx.php">
<table width="250" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" align="center">ACCESO</td></tr>
<tr><td><input type="text" name="correo" value="Correo Electronico" size="30" style="color:#CCC" onClick="if(this.value=='Correo Electronico') this.value=''; this.style.color='red'" onBlur="if(this.value==''){ this.value='Correo Electronico'; this.style.color='#CCC'}else{this.style.color='red'}"/></td></tr>
<tr><td><input type="text" name="password" value="Password" size="30" style="color:#CCC" onFocus="if(this.value=='Password') this.type='password'; this.value=''; this.style.color='red'" onClick="if(this.value=='Password') this.type='password'; this.value=''; this.style.color='red'" onBlur="if(this.value==''){ this.type='text'; this.value='Password'; this.style.color='#CCC'}else{this.type='password'; this.style.color='red'}" />
</td></tr> <tr><td colspan="2" align="center">
<input type="submit" name="enviar" value="Iniciar Sesion" style="color:#FFF; background:#B22222; " /></td></tr> </table>
<a href="xxx.php" style="color:#FFF; font-size:20px; text-decoration:none;" onMouseOver="this.style.color='red'" onMouseOut="this.style.color='white'"><strong>REGISTRARSE</strong></a>
</form>


tratare de explicar solo lo mas importante que son las partes interactivas de este codigo, suponiendo que tienen ya conocimiento basico en html,

onClick = le indicamos que si damos click es esa parte nos deje el campo vacio y nos cambie de color la letra (podemos darle otro formato como negrita, tipo y tamaño de letra).

onBlur = cuando dejamos de escribir y damos click en cualquier otra parte (soltar el foco) esta parte vera si dejamos en blanco la casilla nos volvera a colocar la palabra predeterminada de lo contrario dejara lo que escribimos con el formato que programamos.

de la misma forma actua en las 2 casillas con un cambio mas en la casilla Password en donde creamos un <input type="text"... normal y al darle click en onClick programamos que cambie a type="password".

este formulario lo pueden copiar y pegar en cualquier parte de su codigo <html>, siempre y cuando este dentro del <body>, no quedara exactamente igual ya que utilice una hoja de estilos .CSS para dar efecto de sombra 3D, de esto hare un tutorial muy pronto, no es necesario incluir headers javascript.

NOTA: este tutorial es de mi completa autoria asi como la creacion del codigo, pueden utilizarlo y modificarlo a su gusto (el codigo), pero no el tutorial completo.

eso es todo amigos cualquier duda me pueden enviar un MP. exitos a todos

por jmgthegame Dom 21 Oct 2012, 5:58 pm

a ver una pregunta .

por q usas el colspan="2" ??

<td colspan="2" align="center">ACCESO</td></tr>

esa parte de tu codigo esta de mas.

También deberías de poner el código javascript fuera del form ya q así seria mas fácil leer el código xD

de ahi todo lo veo bien. Cool

por **eoma2425** Mar 23 Oct 2012, 6:25 pm

Se me cayeron las imagenes, creo que por eso no llamo la atencion mi tema, no se si lo pueda editar pero subo las imagenes aqui al quien le interese como se ve