Question

I have a form which is like:

class Address_info_updateForm(forms.Form):
    street = forms.CharField(label=_("Street"), required=True)
    street2 = forms.CharField(label=_("Additional Address"), required=False, max_length=50)
    zip = forms.CharField(label=_("Postcode"), required=True, max_length=50)

    city = forms.CharField(label=_("City"), required=True, max_length=50)
    state = forms.CharField(label=_("State"), required=False, max_length=50)        
    country = forms.ChoiceField(label=_("Country"), choices=countries, widget=forms.Select,    required=True)  

Now I have rendered to template which is like:

{% extends "base/base_page.html" %}
{% load i18n %}
{% load static %}

{% block html_title %}
    {% trans "Update Profile" %}                    
{% endblock %}

{% block html_page_left_content %}


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stepcarousel.js">

stepcarousel.setup({
  galleryid: 'mygallery2', //id of carousel DIV
  beltclass: 'belt2', //class of inner "belt" DIV containing all the panel DIVs
  panelclass: 'panel2', //class of panel DIVs each holding content
  autostep: {enable:true, moveby:1, pause:3000},
  panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
  defaultbuttons: {enable: true, moveby: 1, leftnav: ['{{ STATIC_PREFIX }}images/home/bigarrowleft.png', 5, 168], rightnav: ['{{ STATIC_PREFIX }}images/home/bigarrowright.png', -47, 163]},
  statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})


</script>

<div style="height: 400px">
    <div>
        <p class="title">{% trans "BILLING ADDRESS" %}</p>
    </div>
    <form action="" method="POST" class="custom_form">{% csrf_token %}
        <table style="color:black;text-align:left; margin-left: 20px;">

           {% if form.errors %}
                                       <span style="color:red;">{% trans "You have not filled in the form correctly. Please correct the errors"%}:</span>                                                                                              
                        {% endif %}
                        {% for field in form %}
                             {% if not field.is_hidden %}        
                            <tr>
                                    <td>                                                        
                                            {{field.label}}                                                        
                                            {% if field.field.required %}
                                            <span style="color:red;">*</span>
                                            {%endif%}
                                    </td>                                                
                            </tr>
                            {%else%}                        
                                {{field}}{{field.errors}}                                                   
                            {%endif%}
                        {% endfor %}
            <tr>
                <td colspan="2">
                    <input type="submit" value="{% trans "UPDATE" %}">
                    <input type="button" value="{% trans "CANCEL" %}" onclick="document.location.href='{{base_url}}MyProfile/'" class="custom_button">
                </td>
            </tr>
        </table>
    </form>                    
    <script>
        jQuery('select#id_country').wrap('<div class="select_div" />');
    </script>
</div>
{% endblock %}
{% block html_page_right_sidebar_login %}
{% endblock %}

the problem is when i use {{form.as_table}} i see my textboxes along with my form fields in very descent manner.
But when i am using the stepcruousel to display the errors and * marked fields it is NOT SHOWING ME THE TEXTBOXES and it is only showing me the fields with aestrics * like this

Street * and so on

I want the fields to be aestrix along with the texboxes also.

Thanks in advance

Answer 1

To show the field label & textbox you are using:

{{field.label}}                                                        
{% if field.field.required %}
<span style="color:red;">*</span>
{%endif%}

but this will show only label {{field.label}} but not textbox because there is no {{ field }} which is the widget translated to html of the field (in your case its the text box). Add it:

{{field.label}}                                                        
{% if field.field.required %}
<span style="color:red;">*</span>
{%endif%}
{{ field }}