Bố trí biểu mẫu nhập dữ liệu trong HTML: bảng hoặc không có bảng?

Question

Tôi muốn tạo ra một hình thức nhập dữ liệu như sau:

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

Trường hợp nhãn trái-align, và textbox trái-align. Tôi biết tôi có thể làm điều này trong một yếu tố table, nhưng tôi cũng biết rằng "bảng chỉ nên cho dữ liệu dạng bảng". Trong khi tôi đồng ý/không đồng ý với tuyên bố đó - tôi muốn biết liệu bố cục mong muốn của tôi có thể/được coi là "dữ liệu dạng bảng" hay không, và bố cục thay thế sẽ tạo ra kết quả tương tự như thế nào mà không có hàng tá đường chéo phức tạp CSS của trình duyệt.

Tôi không làm phát triển web nhiều vào lúc này (nghiêm túc WinForms một thời gian bây giờ khi tôi làm công việc giao diện người dùng), vì vậy tôi đánh giá cao có thể có một giải pháp thanh lịch. Có thể liên quan đến một danh sách không có thứ tự với các điểm đạn bị tắt và một chút tắt vị trí của nhãn -> vị trí y, có lẽ?

Answer 1

Danh sách không có thứ tự với các yếu tố label sẽ là cách để đi đến đây. Đánh dấu Tôi sẽ sử dụng nên tìm một cái gì đó như:

<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> 

Và CSS này nếu để có được một cái gì đó tương tự như muốn bạn yêu cầu:

#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; 
} 

Xem: http://jsfiddle.net/tZhUQ/1, trong đó có một số công cụ thú vị hơn bạn có thể thử.

Answer 2

Webcredible have an example, chỉ cần xóa text-align: right để hiển thị nội dung bạn đang tìm kiếm.

Smashing Magazine và Design Shack đã đối chiếu một số ví dụ.