Làm cách nào để định dạng biểu mẫu HTML mà không sử dụng bảng

Tôi biết việc sử dụng Bảng HTML cho mọi thứ là xấu và bảng đó chỉ nên sử dụng để trình bày dữ liệu dạng bảng chứ không phải để đạt được mục tiêu kiểu.Làm cách nào để định dạng biểu mẫu HTML mà không sử dụng bảng

Câu hỏi của tôi là, làm cách nào để bạn tạo biểu mẫu HTML bằng CSS để trông chúng đẹp và được căn chỉnh giống như khi sử dụng bảng?

Nguồn

2008-10-07 Pablo Fernandez

Tôi sẽ tra cứu bằng cách sử dụng thẻ div để dữ liệu bố cục trên một trang.

Bảng vẫn còn rất hữu ích cho dữ liệu dạng bảng, nhưng nó không phù hợp để đặt ra một trang.

Xem nguồn ở đây trên stackoverflow.com, có thể có một số ví dụ hay.

Nguồn

2008-10-07 18:55:42

hmm .... nguồn trang trên SO có vẻ có nhiều bảng. :) –

Thẻ '

' được sử dụng 24 lần trên trang này. –

Hãy suy nghĩ về việc đặt tên trường trên trường, thay vì bên cạnh. Tôi thấy điều này hoạt động tốt nhất.

Nguồn

2008-10-07 18:55:44

Khi thực hiện đúng, điều này làm cho các biểu mẫu trở nên dễ đọc hơn vì mắt của bạn chỉ phải di chuyển theo một hướng thay vì quét qua lại. –

Nó không hoạt động rất tốt mặc dù cho các hình thức phức tạp.Đối với tôi, nó buộc tôi phải đơn giản hóa các hình thức, điều đó không bao giờ là một điều xấu. –

Chúng tôi không luôn luôn có sự sang trọng của việc xác định thiết kế, thật không may. –

Hãy xem mã được sử dụng trong các biểu mẫu wufoo, chúng sử dụng định dạng của ul để định dạng các biểu mẫu và chúng trông rất đẹp.

http://wufoo.com/gallery/templates/

Nguồn

2008-10-07 18:59:30 Todd

Nick Rigby đã viết một bài báo tuyệt vời cho A List Apart mang tên Prettier Accessible Forms

Sử dụng fieldset, truyền thuyết, nhãn. Rất ngữ nghĩa.

Nguồn

2008-10-07 19:04:30

Bạn có thể thử và loại bỏ biểu mẫu càng xa càng tốt và thực hiện với <label> và các yếu tố đầu vào biểu mẫu khác nhau khi cần thiết với một phụ thuộc vào thuộc tính clear:left; trong CSS.

Điều này sẽ đảm bảo mỗi dòng bắt đầu một lần nữa mà không cần phải quấn từng dòng của biểu mẫu trong một <div> hoặc <p> hoặc thậm chí tạo danh sách trong số đó.

.formlabel{ 
    clear:left; 
    display:block; 
    float:left; 
    margin:0 0 1em 0; 
    padding:0 0.5em 0 0; 
    text-align:right; 
    width:8em; 
} 

.forminput{ 
    float:left; 
    margin:0 0.5em 0.5em 0; 
} 

.formwarning{ 
    clear:left; 
    float:left; 
    margin:0 0.5em 1em 0; 
}

Dưới đây là một hình thức HTML mẫu cho thấy ví dụ về loại đầu vào khác nhau và một thông báo xác nhận bổ sung mà bạn có thể ẩn hay phong cách khi cần thiết:

<fieldset><legend>Details</legend> 
    <label for="name" class="formlabel">Name</label> 
     <input id="name" name="name" type="text" class="forminput" /> 
     <div class="formwarning">Validation error message</div> 

    <label for="dob_year" class="formlabel">DOB</label> 
     <div class="forminput"> 
     <input id="dob_year" name="dob_year" type="text" size="4" />/
     <input id="dob_month" name="dob_month" type="text" size="2" />/
     <input id="dob_day" name="dob_day" type="text" size="2" /> 
     </div> 

    <label class="formlabel">Sex</label> 
     <label for="female" class="forminput">Female</label> 
     <input id="female" name="sex" type="radio" class="forminput" /> 
     <label for="male" class="forminput">Male</label> 
     <input id="male" name="sex" type="radio" class="forminput" /> 

    <label for="state" class="formlabel">State</label> 
     <select id="state" name="state" class="forminput"> 
     <option>ACT</option> 
     <option>New South Wales</option> 
     <option>Northern Territory</option> 
     <option>Queensland</option> 
     <option>South Australia</option> 
     <option>Tasmania</option> 
     <option>Victoria</option> 
     <option>Western Australia</option> 
     </select> 

    <label for="deadseal" class="formlabel">Death certificate</label> 
     <input id="deadseal" name="deadseal" type="file" class="forminput" /> 
</fieldset>

Trong ví dụ trên, DOB không có thêm một <div> làm xáo trộn mọi thứ. Bạn có thể loại bỏ nó nếu bạn tạo kiểu cho ngày tháng bị chém như một phần của phần tử giả :after khi cần.

Hóa ra sao trong Opera 11.60, Firefox 11, Google Chrome 18 và Internet Explorer 8.

Nguồn

2012-04-16 18:46:38 random

HTML

<form> 
<div id="personal_name"> 
<label>Name</label> 
<input name="name" /> 
</div> 
</form>

CSS

form 
{display: table} 
#personal_name 
{display: table-row} 
#personal_name input, #personal_name label 
{display: table-cell}

Tôi nghĩ rằng đây là đủ.

Nguồn

2016-03-06 08:22:18 Walkinraven

Các vấn đề liên quan

Làm cách nào để định dạng biểu mẫu HTML mà không sử dụng bảng

Trả lời

Các vấn đề liên quan