---

Virtualnauta

Diseñe un formulario con HTML y CSS

Este artículo es para todos aquellos que buscan una opción distinta al diseño de formularios por medio de tablas.

Aquí tienen una forma dinámica de diseñar un formulario con CSS, decorarlo a su gusto, modificar o agregar textos, agregar otros campos de ingresos de datos o cualquier otra cosa que se les ocurra.

Simplemente realicen los cambios en los códigos HTML o CSS y vean los resultados al instante. Por supuesto, sientanse libres de copiar los códigos para su uso personal.

Espero que este metodo didáctico les sea útil para entender mejor el uso de CSS y su aplicación a los formularios.

Código HTML <div id="formulario"> <form id="form" name="form" method="post" action="pagina-destino.php"> <h1>Formulario</h1> <label>Nombre <span class="detalle">Ingrese su nombre</span> </label> <input type="text" name="name" id="name" /> <label>Email <span class="detalle">Ingrese su email</span> </label> <input type="text" name="email" id="email" /> <label>Password <span class="detalle">Mínimo 6 caracteres</span> </label> <input type="text" name="password" id="password" /> <button type="submit">Enviar</button> </form> </div>	Código CSS <style text/css> /* Aspecto del formulario */ body{ text-align:center; font-family:verdana, arial, helvetica, sans-serif; } #formulario{ border:solid 2px #708090; background:#dcdcdc; margin:0 auto; width:400px; padding:14px; } #formulario h1 { font-size:24px; font-weight:bold; margin-bottom:10px; } #formulario label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #formulario .detalle{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #formulario input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #708090; width:200px; margin:2px 0 20px 10px; } #formulario button{ clear:both; margin:0 auto; width:100px; height:31px; background:#696969; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } </style>

---

<<< Tutorial HTML Tutorial CSS >>>

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...

    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2011 by Martín Solomiak. Todos los derechos reservados.

webmaster@virtualnauta.com

Mapa del sitio