Frontend Forms

Frontend implementation of Django forms using HTMX, AlpineJS, and django-cotton components.

Definition: Cotton Form Component

A reusable template partial that encapsulates label rendering, error handling, and Tailwind styling for a single Django form field.

Workflow: Rendering a form with Cotton

1. Pass the form instance from the Django view to the template context.

2. Iterate through fields or call them individually:

   {% for field in form %}
       <c-fancy.form.field :field="field" label="{{ field.label }}" />
   {% endfor %}
   

Workflow: Implementing a Popup Form

1. Wrap the form in a popup component using an AlpineJS variable for visibility:

   <div x-data="{ formShown: false }">
       <button @click="formShown = true">Open Form</button>
       
       <c-fancy.form.popup x-show="formShown">
           <form hx-post="{% url 'app:create' %}"
                 hx-target="#item-list"
                 hx-swap="afterbegin"
                 @submit="formShown = false"
                 @htmx:after-request="$event.target.reset()">
               
               <c-fancy.form.field :field="form.name" label="Item Name" />
               <c-fancy.form.submit-button />
           </form>
       </c-fancy.form.popup>
   </div>