Bảng biểu mẫu phức tạp vs div

Question

Tôi đã xem trực tuyến các ví dụ về việc triển khai biểu mẫu bằng cách sử dụng DIV và tất cả những gì tôi thấy là một biểu mẫu cột đơn giản. Tôi có một số hình thức khá phức tạp, đây là một hình ảnh của một:

http://img835.imageshack.us/img835/8292/formn.jpg

Nó rất dễ dàng để làm cho nó làm việc với bảng (mà tôi làm), vấn đề duy nhất tôi có là đôi khi tôi cần phải không hiển thị một số lựa chọn và di chuyển các giá trị lên một hàng để tránh khoảng trống.

Tôi bắt đầu tạo một số biểu mẫu bằng cách sử dụng div, nhưng chúng bị phân tách khi tôi thay đổi kích thước cửa sổ trình duyệt và không dễ dàng căn chỉnh mọi thứ.

Chủ đề này hữu ích: Is it bad design to use table tags when displaying forms in html? nhưng không giải quyết được một số mối quan tâm mà tôi có.

Bạn sẽ đề xuất giải pháp gì? Tôi có thể tự động xóa/chèn các giá trị trong bảng hoặc cố gắng thực hiện các DIV.

Answer 1

Tôi sẽ đi tuyến đường div. Miễn là bạn cẩn thận về độ rộng của bạn khi bạn áp dụng phao, nó thực sự khá đơn giản để có được bố trí để làm việc đúng trong độ phân giải màn hình khác nhau.

Dưới đây là một vài quy tắc:

1. Đặt chiều rộng tối đa trên biểu mẫu hoặc yếu tố wrapper của mẫu của bạn. Nếu bạn muốn float các phần tử trên một hàng, hãy chắc chắn rằng chiều rộng của chúng được cộng lại không vượt quá chiều rộng này.
2. Nếu bạn đang thêm phần đệm/lề ngang vào các phần tử nổi của bạn, hãy nhớ rằng các phần tử này thêm vào tổng chiều rộng của phần tử.
3. Tránh trộn chiều rộng phần trăm với pixel và lề. Áp dụng chiều rộng phần trăm cho phần tử cha và pixel/lề pixel cho phần tử con.
4. Sử dụng các yếu tố xóa giữa các hàng của các yếu tố để giữ mọi thứ trong hàng.

Như để đánh dấu, bạn có thể sử dụng các yếu tố hình thức cùng với CSS để tạo ra một cấu trúc ngữ nghĩa:

<fieldset> 
    <legend>Fieldset Title</legend> 

    <label for="input1">Input 1:</label> 
    <span><input type="text" id="input1" name="input1"/></span> 
    <label for="input2">Input 2:</label> 
    <span><input type="text" id="input2" name="input2"/></span> 

    <br/> 

    <label for="input3">Input 3:</label> 
    <span><input type="text" id="input3" name="input3"/></span> 
    <label for="input4">Input 4:</label> 
    <span><input type="text" id="input4" name="input4"/></span> 
</fieldset> 

Và CSS:

fieldset { 
    padding: 20px 0; 
    width: 600px; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    background: black; 
    color: white; 
} 

label, span{ 
    float: left; 
    width: 150px; 
} 

input { 
    width: 120px; 
} 

br { 
    clear: both; 
} 

Bạn có thể see the result here.

Answer 2

Nếu nó là một bảng có chiều rộng cố định, nó tầm thường để đặt ra với các div và phao. Chỉ cần đặt từng chiều rộng thành chính xác những gì bạn muốn.

Đối với bảng bố cục lỏng và bố cục lỏng nói chung rất hấp dẫn — khó sắp xếp biểu mẫu mà không có kiểu bảng, vì float và position không sẵn sàng cho phép tính toán như “ô này một nửa chiều rộng còn lại của phụ huynh, sau khi các nhãn chiều rộng cố định đã được phân bổ ”.

Vì vậy, trong các trường hợp như thế này, chắc chắn bao gồm loại biểu mẫu hai cột bạn đã đăng, các giá trị table-* CSS display là khả năng duy nhất của bạn. Nếu bạn chỉ nhắm vào IE8 và các trình duyệt hiện đại khác, bạn có thể sử dụng các div và đặt display: table-row et al trong biểu định kiểu.Tuy nhiên, để tương thích với trình duyệt IE6-7 và các trình duyệt cũ/di động/thích hợp khác, bạn sẽ phải sử dụng các phần tử thực tế <table>/<tr>/<td> vì chỉ các trình duyệt hiện đại hỗ trợ bảng-CSS độc lập với các phần tử bảng.

Không có gì đáng xấu hổ trong điều này. Một hình thức là loại-bán bảng anyway và không có bất lợi khả năng tiếp cận thực tế bởi vì nội dung trang vẫn được đặt hàng một cách thích hợp.

Lưu ý: đối với biểu mẫu bố cục lỏng, bạn cũng có vấn đề định kích thước trường nhập để khớp với phần tử gốc. input { width: 100%; } hầu như không, nhưng không hoàn toàn, bởi vì width không bao gồm đường viền hoặc đệm mà đầu vào nhận được theo mặc định. Bạn có thể sử dụng CSS3 box-sizing và các phiên bản dành riêng cho trình duyệt để tìm kiếm các trình duyệt hiện đại, nhưng nếu bạn muốn nó xếp chính xác đến pixel trên IE6-7, bạn sẽ phải sử dụng phần đệm trên các phần tử cha bằng border/padding trên trường nhập con.

Answer 3

• General information là một số loại danh sách, danh sách chính> giá trị để được chính xác - <dl /> sẽ có lẽ là cấu trúc tốt nhất cho nó
• Issues values là một bảng,
• Ratings là một bảng,
• Cả Redemption và Indicators là các danh sách - danh sách không có thứ tự <ul />