Ver Mensaje Individual
  #2 (permalink)  
Antiguo 19/08/2012, 16:22
danneg
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema con la maquetacion de mi formulario

Sinceramente no quise ver tu código y obviamente no se solucionar tu problema especifico, pero vengo a enseñarte a usar os div's y obviamente a solucionar miles de problemas que se te presenten en un futuro

El uso de los div's es aconsejable por muchas cosa, como comente en un post hace unos minutos, html es un lenguaje semántico, dado que si quieres declarar una tabla usas una tabla, pero si quieres poner un formulario usas un form (lógico, no?)

El uso de los div's es incluso mas sencillo que las tablas, te comento

Código HTML:
Ver original
  1. <div>Contenido</div>

Y listo, tienes tu capa, tal vez diras "y ahora como rayos le pongo el diseño?" (espero que tengas conocimientos de css).

Pues facil, solo le pones un id, o una class o lo que que quieras para identificarlo (yo prefiero usar la tecnica de anidado).

Código HTML:
Ver original
  1. <div id="micaja">Contenido</div>

Código CSS:
Ver original
  1. #micaja {
  2.     width: 300px;
  3.     height: 100px;
  4.     background: #F00;
  5.     color: #FFF;
  6. }

Ahora, para poner tu formulario igualmente es muy sencillo y solo es cuestion de imaginación a la hora de escribir tu CSS.

Código HTML:
Ver original
  1.     <label>Nombre</label>
  2.     <input type="text" name="nombre" placeholder="Escribe tu nombre" />
  3.  
  4.     <label>Email</label>
  5.     <input type="email" name="email" placeholder="Escribe tu email" />
  6.  
  7.     <label>Contraseña</label>
  8.     <input type="password" name="contrasenia" placeholder="Escribe una nueva contraseña" />
  9.  
  10.     <button>Enviar</button>
  11. </form>

En base a eso podrías diseñar tu formulario; la complejidad del diseño depende mucho de tu CSS y si necesitas capas de apoyo, recuerda que estas usando un formulario y dentro de estos no deben ir div's sino fieldset (son como los divs pero para formularios)

Código HTML:
Ver original
  1.     <fieldset>
  2.         <label>Nombre</label>
  3.         <input type="text" name="nombre" placeholder="Escribe tu nombre" />
  4.  
  5.         <label>Email</label>
  6.         <input type="email" name="email" placeholder="Escribe tu email" />
  7.     </fieldset>
  8.     <fieldset>
  9.         <label>Contraseña</label>
  10.         <input type="password" name="contrasenia" placeholder="Escribe una nueva contraseña" />
  11.  
  12.         <button>Enviar</button>
  13.     </fieldset>
  14. </form>

Todo resulta muy facil de usar, te recomiendo estudiar mas sobre el tema y olvidarte de las tablas para maquetar.