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:
#form fieldset { position: relative; margin: 1em 0; } #form label { display: inline-block; left: 6px; min-width: 60px; padding: 4px 10px; position: relative; top: 28px; z-index: 1; } #form input[type="text"], #form textarea { background: #fff; position: relative; padding: 10px; text-indent: 80px; width: 478px; border: 1px solid #000; } #form input[type="text"]:focus, #form textarea:focus { text-indent: 0; z-index: 1; }
2 comentarios
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.
Hola Miguel,
para ayudarte necesitaría algún dato más: un enlace a la página donde se produce el error… algo.