Hacer un formulario muy correcto

Reciclado

La costumbre que ciertos webmasters tienen de maquetar los formularios en tablas es mala. Lo es porque las tablas no se tienen que usar para eso. No me cansaré decir que las tablas sirven para presentar datos, cifras, no para maquetar.
Los formularios no entran en la familia de los datos tabulares, con lo cual hay que presentarlos usando otra cosa que no sea una tabla. Gracias a las CSS, es muy fácil.
El código de un formulario muy simple sería este:

<form method="post" action="loQueQuieras.html">  <p>   <label for="Nombre">Nombre:</label>   <input name="nombre" type="text" class="texto" id="nombre" value="tu nombre" />  </p>  <p>   <label for="apellidos">Apellidos:</label>   <input name="apellidos" type="text" class="texto" id="apellidos" value="tus apellidos" />  </p>  <p>   <label for="password1">Teléfono:</label>   <input name="telefono" type="text" class="texto" id="telefono" value="tu teléfono" />  </p>  <p>   <label for="fax">Fax:</label>   <input name="fax" type="text" class="texto" id="fax" value="tu fax" />  </p>  <p>   <input type="submit" name="botonEnviar" id="botonEnviar" value="Enviar el formulario" />  </p> </form> 

Y las hoja de estilo asociada esta:

 input.texto {  color: #333333;  background-color: #E9E9E9;  border: 1px inset #00008B;  width: 250px; } form p {  clear: left;  margin: 0;  padding: 0;  padding-top: 5px; } form p label {  float: left;  width: 100px;  font: bold 0.9em Arial, Helvetica, sans-serif; } 

Así de fácil 😉