Sea protagonista de la Web

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"><input type="hidden" name="PHPSESSID" value="f0790ba552db92783beae9ae051f37cf" /> <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>

¿No encuentras lo que buscas?

<<< Tutorial HTML Tutorial CSS >>>

Búsqueda

Otros tutoriales

HTML
CSS
Herramientas Utiles
Diseño de formularios

Diseño Web

Sitios amigos

LaWebdelProgramador
Desarrolloweb
Frogx.three

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.

webmaster@virtualnauta.com

Mapa del sitio

Tutoriales

Ejemplos

Guias de referencia