này đánh dấu và CSS khoảng đạt được các mục tiêu đã nêu của bạn dưới sự hạn chế đối với câu hỏi này ...
The Proposal
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Form</title>
<style type="text/css">
#frm1 div {float: left;}
#frm1 div.go {clear: both; }
#frm1 label, #frm1 input { float: left; clear: left; }
</style>
</head>
<body>
<form id="frm1" action="#" method="post">
<fieldset>
<legend>Section One</legend>
<div>
<label for="field1">Name</label>
<label for="field2">Address, City, State, Zip</label>
<label for="field3">Country</label>
</div>
<div>
<input type="text" id="field1" size="15" />
<input type="text" id="field2" size="20" />
<input type="text" id="field3" size="10" />
</div>
<div class="go">
<input type="submit" value="Go" />
</div>
</fieldset>
</form>
</body>
</html>
Công đức
... nhưng tôi sẽ không khuyên bạn nên sử dụng nó. Những vấn đề với giải pháp này là
- bọc toàn bộ cột rất khó chịu ở trình duyệt gầy độ rộng
- nó tách các nhãn từ lĩnh vực đầu vào liên quan trong đánh dấu
các giải pháp trên nên (Tôi chưa xác minh điều này) có thể truy cập thân thiện vì trình đọc màn hình, tôi đã đọc, thực hiện tốt công việc sử dụng thuộc tính for="" khi liên kết nhãn với các trường nhập. Vì vậy, trực quan và có thể truy cập-khôn ngoan này hoạt động, nhưng bạn có thể không thích liệt kê tất cả các nhãn của bạn một cách riêng biệt từ các lĩnh vực đầu vào của bạn.
Kết luận
Câu hỏi vì nó được soạn ra - đặc biệt là yêu cầu để tự động kích thước chiều rộng của toàn bộ cột của nhãn khác nhau có độ dài đến độ dài lớn nhất nhãn - những thành kiến giải pháp đánh dấu về phía bảng. Không có yêu cầu đó, có một số giải pháp ngữ nghĩa tuyệt vời để trình bày các biểu mẫu, như đã được đề cập và đề xuất bởi những người khác trong chủ đề này.
Điểm của tôi là: Có một số cách để trình bày biểu mẫu và thu thập dữ liệu người dùng một cách dễ chịu, dễ tiếp cận và trực quan. Nếu bạn không thể tìm thấy bố cục CSS nào có thể đáp ứng các yêu cầu tối thiểu của bạn nhưng các bảng có thể, sau đó sử dụng các bảng.
Nguồn
2008-10-03 14:53:18
Hãy thử giải pháp của tôi cho người bạn đời. – roosteronacid
Umh, tại sao mọi người ghét bàn, bạn đời? Có vẻ như cái búa thích hợp cho móng tay này? –
có thể trùng lặp của [Có thể chấp nhận sử dụng các bảng biểu mẫu không? Hoặc là nó vẫn còn chính xác hơn để sử dụng divs?] (Http://stackoverflow.com/questions/1395514/is-it-acceptable-to-use-tables-for-forms-or-is-it-still-more- đúng-to-use-divs) – Eric