Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Formularios con efectos onclick y onfocus de JavaScript pero que utilizan solo HTML y CSS

Imago voragine.net

Examinando el tema Twentyeleven de WordPress he encontrado una solución bien elegante para hacer formularios sin javascript pero con efectos equivalentes, que funcionan utilizando únicamente HTML y CSS. Con este código obtendrás un formulario del estilo del que puedes usar para comentar en esta página.

Construimos el DOM utilizando las etiquetas fieldset, label, input y textarea:

<form id="form" action="http://url.de/la-accion.php" method="post">

 <fieldset>
  <label for="nombre">Nombre</label>
  <input id="nombre" tabindex="1" type="text" name="nombre" value="" size="22" />
 </fieldset>

 <fieldset>
  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" tabindex="2" name="mensaje" rows="10" cols="100%"></textarea>
 </fieldset>

 <fieldset>
  <input id="enviar" tabindex="3" type="submit" name="enviar" value="Enviar mensaje" />
 </fieldset>

</form>

Y le aplicamos los siguientes estilos CSS:

 fieldset {
        position: relative;
        margin: 1em 0;
}
 label {
        display: inline-block;
        left: 6px;
        min-width: 60px;
        padding: 4px 10px;
        position: relative;
        top: 28px;
        z-index: 1;
}
 input[type="text"],
 textarea {
        background: #fff;
        position: relative;
        padding: 10px;
        text-indent: 80px;
        width: 478px;
        border: 1px solid #000;
}
 input[type="text"]:focus,
 textarea:focus {
        text-indent: 0;
        z-index: 1;
}

2 comentarios

    • Por MIGUEL •

    Muy buenas, este tutorial es el que quiero, pero veo que hay un problema, en los campos de nombre, email y sitio web, cuando escribo y se va el foco las palabras se amontonan.

    En el caso del texarea no. El texto que escribo se pone acontinuacion de comentario.

    ¿por que? me puedes ayudar? Gracias.

  1. Hola Miguel,

    para ayudarte necesitaría algún dato más: un enlace a la página donde se produce el error… algo.

Dejar un comentario

*
*

 

No hay trackbacks