Displaying Error in Django Html page

Question

Here is preview of my web page using Django But it is not formatted i am getting the choose file option And also i want to display my Errors at the same <p> tags ie just after each tags not on a new lines i am getting like this

My forms.py file

class UploadForm(forms.ModelForm):


    class Meta:
        model = UploadFile

My views.py file **

def UploadFile(request):
     if request.method == 'POST':
         forms = UploadForm(request.POST, request.FILES)
         if forms.is_valid():
           save_it = forms.save()
           save_it.save()
     else: forms = UploadForm()
     context =  RequestContext(request)
     return  render_to_response("Uploads.html" ,locals() ,context)<br><br>

Templates

{%  extends "File_Uploads.html" %}

{% block formcontents %}
    <form action="" , method="post">{% csrf_token %}

    {{ forms.as_p }}
    <input type="submit">


    </form>

{% endblock %}

Please Help me so that i can make error message to display on the side of each filed And Place choose File at a correct place

How can i implement Drag and Drop to file upload section and limit the size of the file.

**

Answer 1

You should add some controls to your input box, and try to add css for that

For example

{% extends "base.html" %}

{% block heading %}Login{% endblock %}

{% block content %}

<div id="wrapper">

    <div id="container">
        <div class="bold_font">
        Please enter your login details
        </div> 

        <form action=".?next={{ next }}" method="POST">
                {% csrf_token %}
                {{ form.as_p }}
                            <input type="submit" value="Login" />
                <div class="adjustment">
                        <a class="tooltip" href="https://google.com/">
                            <span class="classic">
                            If you have forgotten your password, please click here to Reset Password 
                            </span>
                        Forgot Password</a>
                </div>
        </form>

    </div>



</div>
{% endblock %}