Thực hành các mẫu tạo kiểu tốt nhất

Question

Tôi đã tạo một bộ các phần tử biểu mẫu đẹp trong Photoshop và đang tìm cách chuyển đổi chúng thành HTML và CSS. Biểu mẫu văn bản nhập liệu đơn giản sẽ có hình nền vì trường không thay đổi về kích thước. Tuy nhiên, biểu mẫu vùng văn bản sẽ tự động thay đổi kích thước khi người dùng nhập.

Thông thường, để xây dựng ra loại này của phong cách, tôi muốn quấn lĩnh vực hình thức trong divs, như vậy:

<div class = "textarea-top"> 
    <div class = "textarea-bottom"> 
    <textarea></textarea> 
    </div> 
</div> 

Hoặc bằng cách sử dụng nhiều background-hình ảnh trong một gói div:

<div class = "textarea"> 
    <textarea></textarea> 
</div> 

Có cách nào tốt hơn để tiếp cận vấn đề này không? Để đặt lại, kiểu trường là hình ảnh nâng cao có thể được lặp lại (đối với phần thân của trường) và có kiểu dáng cho phần trên cùng và dưới cùng. Câu hỏi đặt ra là, thực hành tốt nhất trong việc xử lý kiểu dáng nâng cao này là gì?

Answer 1

Tôi không hoàn toàn chắc chắn ý bạn là "thực hành tốt nhất", nhưng một điều tôi muốn cải thiện là ngữ nghĩa. Bạn có thể (nên?) Sử dụng <fieldset> thay vì một, thay vì vô nghĩa, <div>.

Và bạn không cần sử dụng hai ảnh <div> xung quanh textarea hoặc thậm chí nhiều hình nền trên một đơn <div> (thuộc tính CSS3 và không được hỗ trợ rộng rãi).

Thay vào đó, bạn nên quấn <textarea> trong một phần tử <label> và tổ background-hình ảnh của bạn như tôi đã mô tả dưới đây:

Hãy thử điều này:

<fieldset class="expandableInput"> 
    <label> 
    Semantic text: 
    <textarea></textarea> 
    </label> 
</fieldset> 

Bonus: các yếu tố hình thức gói trong <label> 's như thế này, dành một khu vực bấm lớn hơn, cho người dùng để đạt được tập trung vào các yếu tố hình thức trong tầm tay. Chỉ cần cảnh giác với <select> 's, mà không chơi đẹp (mặc dù nó HTML hợp lệ)

CSS sẽ là một cái gì đó như:

.expandableInput {background: url(/path/to/first/img);} 
    .expandableInput label {display: block; background: url(/path/to/second/img);} 
    .expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);} 

Cũng; Đối với giao diện nhất quán trên các phần tử biểu mẫu, trong mọi nền tảng & của trình duyệt, tôi có thể khuyên bạn nên dùng số Formalize CSS của Nathan Smith (yêu cầu hỗ trợ JS cho HTML5 trong các trình duyệt cũ).