Distribución del formulario de entrada de datos en HTML: ¿tabla o sin tabla?

Question

Quiero crear un formulario de entrada de datos como el siguiente:

Name: [ Name textbox ] 
Age:  [ Age textbox ] 
label n: [ textbox n ] 

Cuando las etiquetas dejaron-align, y los cuadros de texto Alinear a la izquierda. Sé que puedo hacer esto en un elemento table, pero también sé que "las tablas solo deben ser para datos tabulares". Si bien estoy parcialmente de acuerdo o en desacuerdo con esa afirmación, me gustaría saber si mi diseño deseado podría/debería considerarse como "datos tabulares", y qué disposición alternativa sería producir los mismos resultados sin docenas de líneas de cruces complicados. navegador CSS.

No desarrollo mucho la web en este momento (estrictamente WinForms desde hace un tiempo cuando trabajo en UI), por lo que agradezco que pueda haber una solución elegante. ¿Posiblemente involucrar una lista desordenada con los puntos de viñetas desactivados y un poco fuera de la etiqueta-> campo y la posición de compensación, tal vez?

Answer 1

Las listas desordenadas con label elementos deben ser el camino a seguir aquí. El marcado Me gustaría utilizar debe ser algo como:

<form id="person" method="post" action="process.php"> 
    <ul> 
     <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li> 
     <li><label for="age">Age: </label><input id="age" name="age" type="text" /></li> 
     <li><label for="n">N: </label><input id="n" name="n" type="text" /></li> 
    </ul> 
</form> 

Y esto CSS si para conseguir algo similar a querer que solicitó:

#person ul { 
    list-style: none; 
} 

#person li { 
    padding: 5px 10px; 
} 

#person li label { 
    float: left; 
    width: 50px; 
    margin-top: 3px; 
} 

#person li input[type="text"] { 
    border: 1px solid #999; 
    padding: 3px; 
    width: 180px; 
} 

Ver: http://jsfiddle.net/tZhUQ/1, que contiene algunas cosas más interesantes que se pueden tratar.

Answer 2

Webcredible have an example, simplemente elimine el text-align: right para obtener lo que parece estar buscando.

Smashing Magazine y Design Shack han citado algunos ejemplos.