Building a form - HTML Vs Django

By: Priya Philip 1 year, 4 months ago

While creating a simple form in HTML we needs more works to be done in our templates like this:

username.html

<form action="/user_name/" method="post">
    <label for="user_name">User name: </label>
    <input id="user_name" type="text" name="user_name" value="{{ current_user_name }}">
    <input type="submit" value="OK">
</form>

As well as its <input> elements, a form must specify two things:

where: the URL to which the data corresponding to the user’s input should be returned
how: the HTTP method the data should be returned by

By writing the code like this will display a text field, labeled “User name:”, and a button marked “OK” which tells the browser to return the form data to the URL/user_name/, using the POST method. If the template context contains a current_user_name variable, that will be used to pre-fill the user_name field.

We needs a view which supply the current_user_name field as appropriate, and renders the template containing the HTML form.

The web form allows the user to enter the data. By submitting the form, the POST request is sent to the view corresponding to that /user_name/ URL for processing the data.The POST request body contains the key/value pairs(form data).

This is a very simple form. In practice, a form might contain dozens or hundreds of fields, many of which might need to be pre-populated, and we might expect the user to work through the edit-submit cycle several times before concluding the operation.

We might require some validation to occur in the browser, even before the form is submitted; we might want to use much more complex fields, that allow the user to do things like pick dates from a calendar and so on.

At this point it’s much easier to get Django to do most of this work for us.

Django handles three distinct parts of the work involved in forms:

      * preparing and restructuring data to make it ready for rendering
      * creating HTML forms for the data
      * receiving and processing submitted forms and data from the client


In Django we need to start from here..

forms.py

from django import forms

class UsernameForm(forms.Form):
    user_name = forms.CharField(label='Your Username', max_length=100)

The UsernameForm is a form class with a single field (user_name). The user_name field is Character field with a maximum number of characters allowed in the <input> element is 100, which prevents the user from entering more than 100 characters in this HTML input.Django will validate the length of the data when it receives the form back from the browser.

The label attribute applies a human friendly label to the input field.Here it is 'Your Username', which will appear in the <label> when it’s rendered. If we ommit speacifying the label, the default label for a Field is generated from the field name by converting all underscores to spaces and upper-casing the first letter (User Name).

Django form instance has a method named 'is_valid()' which validates all its fields. If all the form data are valid, it will return 'True' and places all the form data in its cleaned_data attribute.We can use this data to update the database or do other processing before sending an HTTP redirect to the browser telling it where to go next.

We don’t need to do much in our username.html template. The simplest example is:

username.html

<form action="/user-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>

All the form’s fields and their attributes will be unpacked into HTML markup from that{{ form }} by Django’s template language.

In fact if your form is going to be used to directly add or edit a Django model, a ModelForm can save you a great deal of time, effort, and code, because it will build a form, along with the appropriate fields and their attributes, from a Model class.

That’s all you need to get started, but the forms framework puts a lot more at your fingertips. Once you understand the basics of the process described above, you should be prepared to understand other features of the forms system and ready to learn a bit more about the underlying machinery.