Juan Manuel 10 de Junio de 2008 a las 08.40
   Imprimir artículo
elWebmaster.com

Formularios hechos sólo con CSS (sin usar tablas HTML)


Formularios hechos s√≥lo con CSS (sin usar tablas HTML)Algunos dise√Īadores odian las tablas en HTML y se preguntan cu√°l ser√° la mejor forma de dise√Īar formularios con CSS pura y exclusivamente, emulando la disposici√≥n de los elementos que anteriormente pertenec√≠an a celdas dentro de filas y columnas.

Sinceramente, las tablas son el modo más simple de hacer un formulario (¡no son tan malas después de todo! ^_^) pero para todos los fanáticos de los estilos les voy a dejar el código que necesitan para hacer un formulario sólo con CSS.

Cómo hacer un formulario sólo con CSS

Copia el siguiente código HTML dentro del tag <body> de tu página web:

<div id=”stylized” class=”myform”>
<form id=”form” name=”form” method=”post” action=”index.html”>
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class=”small”>Add your name</span>
</label>
<input type=”text” name=”name” id=”name” />

<label>Email
<span class=”small”>Add a valid address</span>
</label>
<input type=”text” name=”email” id=”email” />

<label>Password
<span class=”small”>Min. size 6 chars</span>
</label>
<input type=”text” name=”password” id=”password” />

<button type=”submit”>Sign-up</button>
<div class=”spacer”></div>

</form>
</div>

Para que se entienda a qué responde cada elemento, veamos la siguiente imagen:

Formularios hechos sólo con CSS, sin usar tablas HTML

Ahora copia el código CSS que ves a continuación, dentro del <head> de la página:

body{
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

Descarga el código completo de la página de Woork (clic aquí).


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (26)

  1. alex dice:

    el “#stylized button” no funciona en ie chao!.

  2. kar dice:

    pongan mas informacion sobre este tema. Me interesa

  3. juancho dice:

    Aun existe gente ignorante que usa IE, no se como no usan firefox u otros browsers que son mil veces mas compatibles, Microsoft hace todo lo posible para que nada de lo que ellos hagan sea compatible con cualquier cosa que no sea Microsoft utilizando la ignorancia de la gente, dejate de IE y cambiate a Firefox.

  4. Webmaster2310 dice:

    Dos comentarios para Juancho:
    1.- Si eres webmaster ver√°s en tus estad√≠sticas que el 90% de los usuarios en internet usan Explorer en varias de sus versiones. El resto Safari, FireFox, Opera y otros… ¬Ņtu para qui√©n dise√Īas?

    2. Si eres un usuario, creo que llamar ignorantes a otros usuarios es por demas atrevido… el 90% de ignorantes quiza no comparten tu √≠dea, quiza para ellos el ignorante es otro… no?

  5. tres dice:

    Me parece a m√≠ que los ignorantes son el 90%, los que usan el IE, que se dejan llevar por la inercia, y aceptan borreguilmente lo que les quieren colar, utilizando el juego sucio y las malas artes comerciales, y no la superioridad t√©cnica, aprovech√°ndose precisamente de esa inercia. Y para que te enteres, webmastercillo, en Europa ya se usa m√°s Firefox que el explorercillo de los babys mocosetes (de mocosoft). En Europa excluyendo a Espa√Īa, claro. Como siempre, somos el culo del mundo y nos enteramos los √ļltimos de las cosas. Spain is diferent. Vosotros seguid detr√°s de Big Brother, cuando le teng√°is que pedir permiso incluso hasta para ir al ba√Īo, os querr√©is librar de √©l, pero ser√° tarde pq ya incluso ser√° windows el que os baje la bragueta pq incluso hasta eso querr√©is que os lo de hecho. Ppppffff…

    Y poni√©ndonos totalmente rigurosos no se deber√≠a dise√Īar ni para uno ni para otro, se deber√≠a dise√Īar enfoc√°ndonos en los est√°ndares.

    Saludos

  6. MasterOfP dice:

    Hola,

    c√≥mo puede haber gente tan fan√°tica que se permita insultar por usar un programa u otro? que tenga tanta mania persecutoria hacia Microsoft? bueno… yo tambi√©n pas√© esa etapa, jeje. Pero tios, hay que finalmente centrarse y madurar, no queda otra. Cada uno que use lo que quiera, Microsoft no es nada malo, al contrario, es una referencia importante en el mundo inform√°tico, hoy en d√≠a la m√°s. Y lo que m√°s nos conviene a nosotros es que haya est√°ndares bien definidos, y debemos usarlos, porque sino nuestr sitio web no ser√° compatible.

    Saludos desde Espa√Īa.
    Long Liveeee Rock… digooo…. Microsofttttt ;-P

  7. Mauro dice:

    Me re sirvio como modelo, yo despues lo modifique un poco.
    Muchas gracias.
    Saludos.

  8. Oscar dice:

    El dise√Īador se tiene que adaptar a la tecnolog√≠a, si una banda de rock te pide un efecto parecido a tal otra que vio, el dise√Īador pone “Este sitio funciona mejor en firefox” y hace lo que le pide el cliente, que microsoft no soporte correctamente CSS3 no es culpa ni del trabajador ni del cliente.

  9. juan alberto patal dice:

    muy buena guia y lo mejor funciona en Firefox , Chrome e Internet Explores. Gracias!

    Dios te Bendiga!

  10. anticssdependiente dice:

    hola, hay algo en lo cual estoy en contra es en los dise√Īadores css dependiente, la web no solo debe ser estandar sino que tambien tiene que ser semantica, si hay un tag para las tablas usemoslas, xq si en algun momento se da√Īa el archivo de css de nuestra web recordemos que el usuario va a ver todo fondo blanco y letras negras, pero si es una web bien dise√Īada en lo semantico va a poder entender igual que es un titulo, que es un formulario, sin necesidad del css, es decir para mi lo mejor es dise√Īar primero la web desde el html semanticamente y despues hacerle todo lo visual en css, no pensar el html visualmente sino como un documento de word blanco y negro que cualquiera lo pueda entender si algun dia desaparece mi css del sitio

  11. WebDevolper dice:

    Anticssdependiente. hoy en dia que un archivo se desaperzca no es IMPOSIBLE pero si es IMPOSIBLE que un WebMaster o Programador no tenga respaldo en un sitio aparte o disco duro de todos los archivos de su Site… por si tu css desaparece para eso deberias tener tu respaldo y subirlo al instante… :S

  12. edgar dice:

    wola oie una preguntha kmo hicisthe este formulario
    de:

    Deja thu opinio
    nombre real
    email
    sitio web

    esq eee echo una pagina
    pero me pide un maestro k haga esto
    el problema quiere k llege al e-mail
    y no encuentro de komo hacerlo
    me puedes ayudar

  13. bismely dice:

    esta fino aun tengo ciertas dudas pero est√° fino de veras

  14. Luis dice:

    NO es culpa de los usuarios, falta enterarles que hay opciones y que microsoft no respeta los estandares, ahora mismo no estariamos usando tanto Flash para cosas que se pueden hacer con archivos SVG .

    A microsoft se le puso dificil con este y otros formatos (google FLV youtube , adobe swf flash)y ahora quiere segun ellos corregir el camino y adaptar los estandares.

    Muy bueno Opera y Chrome tambien firefox es bueno, y son gratis…y para XP no solo para vista o win 7.

    Los Gobiernos de las Naciones son los que deberian de meter en orden a las empresas informaticas Vale la Pena.Y no someternos a sus caprichos comerciales, si que pongan todos sus plug-ins pero tambien que pongan la alternativa Estandar.

    Saludos.

  15. gaby dice:

    no me gusta me han dejado una tarea, y a esto no le entiendo nada es muy conplicado
    pero gracias

  16. Gabo dice:

    El post original esta ac√° :

    http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

    Al menos no se robe el crédito

  17. decoracion con globos dice:

    Gracias por el peque√Īo tutorial. Saludos

  18. Shirley dice:

    Esta super productivo y entendible este explicacion de css =)

  19. Marc dice:

    Excelente dise√Īo. Muchas gracias. Sigo sin comprender a los usuarios que critican a otros usuarios por sus preferencias para usar navegadores, aplicaciones √≥ plataformas (Pc √≥ Mac). Personalmente creo que cada uno es libre de elegir y no tiene por qu√© sentirse forzado a usar otro, como en el caso de webs que directamente te impiden el acceso si tu navegador es el Internet Explorer. Para ser el m√°s criticado, a dia de hoy es el navegador m√°s usado de todos los tiempos ;)

  20. Antonio Expósito dice:

    El IE es el mas usado de todos los tiempos, porque fue el primero que apareci√≥, y los espa√Īoles somos muy vagos como para una vez hemos aprendido algo, dejarlo para investigar nuevas opciones. El IE se opone a todo lo que no sea pensado por MS, y por eso es tan incompatible con todos los otros navegadores.

  21. Enlazador dice:

    no funciona el codigo en ningun explorador 0 aporte

  22. Lio Nani 7 dice:

    Gracias bro..está genial el css, yo uso firefox y tambien lo probé en IE y pincha genial..

    lo que pasa es que tienen que cambiar las comillas es decir, cuando copias el código te queda así:

    y deberia quedarte así ..fijense bien.

    Salu2 Lio..y no peleen..

  23. anthony dice:

    ejemplos como este valen la pena aprenderlos y evitar el uso d tablas graxias

  24. kirous dice:

    Amigon donde esta la imagen de la capa del boton?…. por que en la parte de “url(img/button.png) no-re`peat” no esta en tu post, NI EL ORIGINAL!!, donde puedo conseguir?…. Gracias

  25. andhypebu dice:

    Amigo por que cuando quiero agregar mas campos en el formulario me los desconfigura y no me los muestra correctamente. Disculpen soy nueva en esto de los formularios con css

  26. lautaro dice:

    he visto como la gente se pone a discutir por microsoft e ie… no entiendo
    a mi que me importa que usen, como desarrollador tengo que desarrollar sistemas que funcionen en cualquier porqueria, llamese ie o ff o chr, opera, safary, cualquiera, entonces, de que me sirve llamar de ignorante a la gente si al final es el que paga, el que elije el servicio, el que compro su pc y listo
    yo no voy a remar contra la corriente, tampoco voy a perder mi identidad porque la gente elija eso, y no voy a ser tan estupido de pensar que la gente es ignorante por usar un producto de ms.. ya quisiera ser yo el que tuviera en poder de esa empresa…
    asi que se√Īores, programen para todos los navegadores, usen la cabeza y menos la boca agrediendo gente

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión