Sử dụng Flask-WTForms, làm cách nào để tạo kiểu cho phần biểu mẫu của tôi trong html?

Question

Tôi đọc qua wiki Flask-WTF cực kỳ đơn giản và không thể hiểu nhiều về những gì tôi có thể làm với nó. Tôi có ấn tượng rằng phần <form> của html bây giờ chỉ có thể trông giống như

<form method="post"> 
    {{ form.hidden_tag() }} 
    {{ form.name }} 
    <input type="submit"> 
</form> 

Nhưng tôi thực sự muốn phong cách của tôi bằng cách sử dụng cụ thể hóa như:

 <div class="row"> 
      <div class="input-field col s6"> 
       <i class="material-icons prefix">account_circle</i> 
       <input value="FN" id="first_name" type="text" class="validate"> 
       <label class="active" for="first_name">First Name</label> 
      </div> 
      <div class="input-field col s6"> 
       <input value="LN" id="last_name" type="text" class="validate"> 
       <label class="active" for="last_name">Last Name</label> 
      </div> 
     </div> 

Tôi có thể phù hợp ở đâu {{ form.first_name }} và {{ form.last_name }} vào?

EDIT: Hãy để tôi giải thích về câu trả lời của tôi hơn một chút: Ví dụ, tôi muốn một cái gì đó giống như Materialized datepicker (một cửa sổ pop tốt lên lịch cho phép người dùng chọn ngày), điều này phải ở trong <input class='datepicker' length="50">, nhưng bây giờ rằng tôi đang thay thế toàn bộ đường dây <input> bằng {{ form.date }} ... Tôi đã mất đặc quyền đó để chỉnh sửa lớp học và những gì không.

Answer 1

Trường WTForms có thể là called với các thuộc tính sẽ được đặt trên đầu vào mà chúng hiển thị. Chuyển các thuộc tính bạn cần để tạo kiểu, chức năng JavaScript, v.v. cho các trường, thay vì chỉ tham chiếu đến các trường. Các nhãn hoạt động theo cùng một cách và có thể được truy cập với field.label.

for, value, type, id, và name không cần phải được thông qua, khi chúng được xử lý tự động. Có một số rules để xử lý các trường hợp đặc biệt của thuộc tính. Nếu tên thuộc tính là từ khóa Python chẳng hạn như class, hãy thêm dấu gạch dưới: class_. Dấu gạch ngang không phải là tên Python hợp lệ, vì vậy gạch dưới giữa các từ được chuyển thành dấu gạch ngang; data_toggle trở thành data-toggle.

{{ form.first_name(class_='validate') }} 
{{ form.first_name.label(class_='active') }} 

{{ form.begins(class_='datepicker', length=50) }} 

Lưu ý rằng không phải phương pháp liên kết nào được gọi trực tiếp, những tài liệu này chỉ mô tả hành vi khi gọi các trường.