Django Custom forms

We always require various forms, and typically, we handle them using generic views. However, in cases where we need custom templates and extensive control over the positioning of fields on the page, you can approach it in the following manner.  First, we create URLs and define how many and which fields we need from our Model Form.

 

The URL would look like this.

path('upload_image/<int:offerid>/<int:makeid>/<int:modelid>/', upload_image, name='upload_image'),

{% url 'upload_image' offerid=offer.id makeid=offer.vehicle_merk__id modelid=offer.vehicle_model__id %}

 

form 

# vim vehicles/forms.py

class OfferForm(ModelForm):
class Meta:
model = Offer
fields = ['owner_laste_price', 'owner_description', 'vehicle_model', 

'vehicle_merk', 'mileage', 'first_registration', 'fuel_type', 'power_kw', 'power_hp',

 'gearbox', 'carrosserietype', 'seats', 'doors', 'engine_size', 'emission_class', 'colour',

 'paint']

 

You can achieve finer control over field rendering as well. Typically, this is done within a custom field template, enabling you to write the template once and reuse it for each field. However, you can also directly access it through the field attribute on the form. For instance: 

 

{{ form.non_field_errors }}

<div class="fieldWrapper">

{{ form.subject.errors }}

<label for="{{ form.subject.id_for_label }}">Email subject:</label>

{{ form.subject }}

</div>

<div class="fieldWrapper">

{{ form.message.errors }}

<label for="{{ form.message.id_for_label }}">Your message:</label>

{{ form.message }}

</div>

<div class="fieldWrapper">

{{ form.sender.errors }}

<label for="{{ form.sender.id_for_label }}">Your email address:</label>

{{ form.sender }}

</div>

<div class="fieldWrapper">

{{ form.cc_myself.errors }}

<label for="{{ form.cc_myself.id_for_label }}">CC yourself?</label>

{{ form.cc_myself }}

</div>

Complete <label> elements can also be generated using the label_tag(). For example:

<div class="fieldWrapper">

{{ form.subject.errors }}

{{ form.subject.label_tag }}

{{ form.subject }}

</div>

  

Rendering form error messages comes with the cost of requiring a bit more effort. Until now, we didn't have to concern ourselves with how to display form errors since that was handled automatically. In this example, we need to ensure that we handle errors for each field individually and errors for the form as a whole. Take note of {{ form.non_field_errors }} at the top of the form and the template lookup for errors on each field.

Using {{ form.name_of_field.errors }} will display a list of form errors, presented as an unordered list. It might appear as follows:

 

<ul class="errorlist">

<li>Sender is required.</li>

</ul>

The list is assigned a CSS class called 'errorlist,'

which enables you to apply custom styles to its appearance.

If you want to make additional customizations to how errors are displayed,

you can achieve this by iterating through them:"

{% if form.subject.errors %}

<ol>

{% for error in form.subject.errors %}

<li><strong>{{ error|escape }}</strong></li>

{% endfor %}

</ol>

{% endif %}

Non-field errors (and/or hidden field errors that are

rendered at the top of the form when using helpers like form.as_p())

will be rendered with an additional class of nonfield to help

distinguish them from field-specific errors. For example,

{{ form.non_field_errors }} would look like:

<ul class="errorlist nonfield">

<li>Generic validation error</li>

</ul>

{% for field in form %}

<div class="fieldWrapper">

{{ field.errors }}

{{ field.label_tag }} {{ field }}

{% if field.help_text %}

<p class="help" id="{{ field.id_for_label }}_helptext">

{{ field.help_text|safe }}

</p>

{% endif %}

</div>

{% endfor %}

<div class="sm:col-span-4">

<label for="{{ form.owner_laste_price.id_for_label }}"

class="block text-sm font-medium leading-6 text-gray-900">Uw Gunstigste Prijs</label>

<div class="mt-2">

<div

class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300

focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">

<span class="flex select-none items-center pl-3 text-gray-500 sm:text-sm"></span>

{{ form.owner_laste_price.errors }}

<input type="text" name="{{ form.owner_laste_price.name }}"

id="{{ form.owner_laste_price.id_for_label }}"

class="block flex-1 border-0 bg-transparent py-1.5 pl-1

text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"

placeholder="0"

value="{{ form.owner_laste_price.value }}">

</div>

</div>

</div>