Use custom HTML to render forms

104 views
Skip to first unread message

Fred DJar

unread,
Mar 27, 2014, 9:48:47 AM3/27/14
to django...@googlegroups.com
Hello, 
I am a beginner in python and django programming, i have a question that already have been asked in stackoverflow and many forums, but i couldnt solve my own.

this exactly my situation:

this the code in my app html page:

{% extends 'base.html' %}

{% block content %}

<form method="POST" action=""> {% csrf_token %}            
        {{ form.as_p }} 
    <footer>
        <button type="submit" class="button">Confirmer</button>
    </footer>    
</form>

{% endblock %}



but in my base.html i have already this form and this classes:

<form action="" class="sky-form">
    <section>
        <label class="input">
                <input type="password" placeholder="Confirmation">
                <b class="tooltip tooltip-bottom-right">Retaper votre mot de passe</b>
        </label>
    </section>
.
.
.
.
</form>


where should i put {% block content %} and {% endblock %} in my base.html!!!!!!

i've also followed the tutorial from the official docs, but it did,'t work out for me

i'm sorry if my question seem silly!
Thanks in advance.

Fred DJar

unread,
Mar 31, 2014, 7:40:44 PM3/31/14
to django...@googlegroups.com
HELP PLEASE

Nikolas Stevenson-Molnar

unread,
Mar 31, 2014, 9:53:00 PM3/31/14
to django...@googlegroups.com
It depends on what you want to do. If you want to override/replace the form in base.html, then place the block tag around the form, like so (in base.html):

{% block content %}
    <form action="" class="sky-form">
        ...
    </form>
{% endblock %}

Any template extending from base.html which defines a "content" block will override the form in base.html.

_Nik
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/0d9ee9e7-7cc5-4e6b-8fdb-c02d9d1d7049%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Camilo Torres

unread,
Mar 31, 2014, 10:26:56 PM3/31/14
to django...@googlegroups.com
You must think on what is the output HTML you need to generate. Depending on that, you may be able to figure where to put the {% block content %} tags. What is the output HTML you expect?

Daniel Roseman

unread,
Apr 1, 2014, 5:12:04 AM4/1/14
to django...@googlegroups.com
On Tuesday, 1 April 2014 00:40:44 UTC+1, Fred DJar wrote:
HELP PLEASE

No.

You don't get to demand that people help you. If someone knows the answer to your question, and they have time to answer - and if they can work out what you're asking, which isn't obvious - they will reply. But if you want help on demand, you need to pay someone.
--
DR. 

Mike Dewhirst

unread,
Apr 1, 2014, 7:50:55 AM4/1/14
to django...@googlegroups.com
On 1/04/2014 8:12 PM, Daniel Roseman wrote:
> On Tuesday, 1 April 2014 00:40:44 UTC+1, Fred DJar wrote:
>
> HELP PLEASE

I agree with DR but it might be interesting to know what your problem
might be ...

>
>
> No.
>
> You don't get to demand that people help you. If someone knows the
> answer to your question, and they have time to answer - and if they can
> work out what you're asking, which isn't obvious - they will reply. But
> if you want help on demand, you need to pay someone.
> --
> DR.
>
> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to django-users...@googlegroups.com
> <mailto:django-users...@googlegroups.com>.
> To post to this group, send email to django...@googlegroups.com
> <mailto:django...@googlegroups.com>.
> Visit this group at http://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/162b8220-9c99-4f7f-ad36-7701d6a40451%40googlegroups.com
> <https://groups.google.com/d/msgid/django-users/162b8220-9c99-4f7f-ad36-7701d6a40451%40googlegroups.com?utm_medium=email&utm_source=footer>.

Mario Gudelj

unread,
Apr 1, 2014, 10:49:39 PM4/1/14
to django...@googlegroups.com
You can use {{form.field_name}} to render the input tag, {{form.field_name.label}} to render the label and {{form.field_name.errors}} to render field errors. Simple example:

<div class="span6">
                            <div class="control-group required">
                            <label for="id_comments" class="control-label">{{ reorder_form.comments.label }}</label>
                            <div class="controls">
                                {{ reorder_form.comments.errors }}
                                {{ reorder_form.comments }}
                            </div>
                          </div>
                        </div>

To add attributes to the input tag, such as classes, placeholder etc. you need to add them as attrs dictionary parameter inside the widget class.

e.g. comment = forms.CharField(label="Please submit your comment below", widget=forms.Textarea(attrs={"class":"span6"}))

You can also create a filter for rendering your own markup. Perhaps you can take a look at bootstrap toolkit package for example. In particular {{form|as_bootstrap}}


On 1 April 2014 22:50, Mike Dewhirst <mi...@dewhirst.com.au> wrote:
On 1/04/2014 8:12 PM, Daniel Roseman wrote:
On Tuesday, 1 April 2014 00:40:44 UTC+1, Fred DJar wrote:

    HELP PLEASE

I agree with DR but it might be interesting to know what your problem might be ...



No.

You don't get to demand that people help you. If someone knows the
answer to your question, and they have time to answer - and if they can
work out what you're asking, which isn't obvious - they will reply. But
if you want help on demand, you need to pay someone.
--
DR.

--
You received this message because you are subscribed to the Google
Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send
<mailto:django-users+unsub...@googlegroups.com>.

To post to this group, send email to django...@googlegroups.com
<mailto:django-users@googlegroups.com>.
<https://groups.google.com/d/msgid/django-users/162b8220-9c99-4f7f-ad36-7701d6a40451%40googlegroups.com?utm_medium=email&utm_source=footer>.

For more options, visit https://groups.google.com/d/optout.
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/533AA81F.3070205%40dewhirst.com.au.

Fred DJar

unread,
Apr 3, 2014, 5:46:53 AM4/3/14
to django...@googlegroups.com
Thanks for the response. i think that you understand my problem and my question. so to clarify thinks in my case i should do this for example:
in my html i have this:
<div>
    <fieldset>
        <section>
            <label class="input">
                <input type="text" placeholder="E-Mail">
            </label>
        </section>
    </fieldset>
</div>

and i should declare my email parameter like this: 
email = forms.EmailField(widget=forms.Textarea(attrs={"class":"input"}))

but now i have to question:
1/ how to deal with html tags like <fieldset> and <section> and add them to the email param
2/ where is the widget class in my case?

To post to this group, send email to django...@googlegroups.com
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.

Fred DJar

unread,
Apr 3, 2014, 5:49:43 AM4/3/14
to django...@googlegroups.com
I ve posted my question and waited 5 days and it seems that my post got lost and people didn't pay attention to it
but when i added my reply asking for help people generously replied to my question and i thank them for that.
iam sorry but your reply is irrelevant and you're just being mean!!

Fred DJar

unread,
Apr 3, 2014, 5:51:05 AM4/3/14
to django...@googlegroups.com
but i have other tags in my html like <section> and <fieldset> !! how can i render them ??


On Wednesday, 2 April 2014 03:49:39 UTC+1, somecallitblues wrote:

To post to this group, send email to django...@googlegroups.com
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.

Fred DJar

unread,
Apr 3, 2014, 5:52:39 AM4/3/14
to django...@googlegroups.com
actually i want the exact opposite 
i want to KEEP my html with all the tags like <fieldset> and <section> 

Fred DJar

unread,
Apr 11, 2014, 6:57:29 AM4/11/14
to django...@googlegroups.com
ANY IDEA GUYS?

Lucas Klassmann

unread,
Apr 11, 2014, 7:08:19 AM4/11/14
to django...@googlegroups.com
Hi Fred.

You must put {% block %} {% endblock %} in html where you want allow override in others base.html descendants.

Like this:

# base.html

<html>
<head>
   <title>{% block title %}{% endblock %}</title>
</head>
<body>

   <form action="" method="POST">
    <!-- Fields -->
     {% block fields %}{% endblock %}
    <input type="submit" value="Save" name="save">
   </form>
</body>
</html>



# other.html

{% extends "base.html" %}

{% block title %}My Title{% endblock %}

{% block fields %}
   
     Subscribe: <input type="text" name="email" value="">

{% endblock %}


Cheers.


--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/b8c9cb20-87e1-43b3-9238-04683a36aaf4%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
Lucas Klassmann
Desenvolvedor de Software

Email: lucaskl...@gmail.com
Web site: http://www.lucasklassmann.com

Fred DJar

unread,
Apr 11, 2014, 7:15:26 AM4/11/14
to django...@googlegroups.com
Thanks for the response.But in my case i use customized html tags like <filedset> and <section>:

<div>
    <fieldset>
        <section>
            <label class="input">
                <input type="text" placeholder="E-Mail">
            </label>
        </section>
    </fieldset>
</div>

so how to deal with html tags like <fieldset> and <section> and add them to the email param

Lucas Klassmann

unread,
Apr 11, 2014, 7:40:27 AM4/11/14
to django...@googlegroups.com
Hi,

Let me see if i understand, you want put <fielset> and <section> per field?

Because if you want customize per field, you can iterate in fields of form like this:
{% for field in form %}
<div>
    <fieldset>
        <section>
            <label class="input" for="id_{{ field.html_name }}">{{ field.label }}
             {{ field }}
            </label>
        </section>
    </fieldset>
</div>
{% endfor %}


This pages can be useful, but is a little more advanced:





I hope this help you.

Cheers.



To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/8e009105-9413-4550-9709-7f932dfa8238%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Nikolas Stevenson-Molnar

unread,
Apr 11, 2014, 6:30:51 PM4/11/14
to django...@googlegroups.com
I'm not clear from the example which of the code from base you want to keep, and which you want to be overriden. What should the resulting HTML look like?

_Nik
Reply all
Reply to author
Forward
0 new messages