如何在我的模板中使用django表单下拉菜单?

时间:2019-10-07 21:44:58

标签: python django django-models django-forms django-templates

我创建了一种表单,其中包含带有下拉列表的字段,一个字段用于“国家”,另一个字段用于“国籍” 但我不知道如何将其传递给我的html模板。 我怎么解决这个问题? 我编写了模型并将其传递给form.py并将其用于模板

Models.py

class User(models.Model):
    first_name = models.CharField(max_length=100)
    second_name = models.CharField(max_length=100)
    E_mail = models.EmailField(max_length=254)
    COUNTRY_CHOICES = [('saudi arabia +966','SAUDI ARABIA +966'),
                       ('oman +968','OMAN +968'),
                       ('kuwait +965','KWUAIT +965'),
                       ('Qatar +948','QATAR +948')]
    country = models.CharField(max_length=250, choices=COUNTRY_CHOICES, null=True)
    phone = models.IntegerField(null=True)
    phone_code = models.IntegerField(null=True)
    birthday = models.DateField(null=True, blank=True)
    NATIONALITY_CHOICES = [('خليجي','خليجي'),
                           ('ليس خليجي','ليس خليجي')]
    nationality = models.CharField(max_length=250, choices=NATIONALITY_CHOICES, null=True)

    def __str__(self):
        return self.first_name

forms.py

    from django import forms
    from .models import User

    class UserForm(forms.ModelForm):
        class Meta:
            model = User
            fields = ('first_name', 'second_name', 'E_mail', 'country', 'phone', 'phone_code','birthday', 'nationality',)

form_page.html

    <form action="{% url 'LandingPage:form_page' %}" method="POST" class="ui inverted form container">
        {% csrf_token %}

        <div class="field">
            <label>البريد الألكتروني</label>
            <input type="text" name="last-name" placeholder="joe@schmoe.com" {{form.E_mail}}>
        </div>
        <div class="ui field">
            <label>أختر الدولة</label>
            <select name="gender" class="ui dropdown" id="select" {{form.country}}>
                <option value="">أختر الدولة</option>
                <option value="Saudi">Saudi Arabia +966</option>
                <option value="Qatar">Qatar +974</option>
                <option value="Oman">Oman +968</option>
                <option value="Kuwait">Kuwait +965</option>
                <option value="Bahrain">Bahrain +973</option>

            </select>
        </div>

        <!-- Mobile Number -->
        <div class="ui field">
            <label>رقم الهاتف</label>

            <div class="inline fields">
                <div class="eight wide field">
                    <input type="text" placeholder="(xxx)" {{form.phone}}>
                </div>

                <div class="three wide field" {{form.phone_code}}>
                    <input type="text" placeholder="الكود">
                </div>
            </div>
        </div>

        <!-- Nationalety -->
        <div class="ui field">
            <label>الجنسية</label>
            <select name="gender" class="ui dropdown" id="select" {{form.nationality}}>
                <option value="">الجنسية</option>
                <option value="خليجي">خليجي</option>
                <option value="ليس خليجي">ليس خليجي</option>
            </select>
        </div>
        <button class="ui fluid positive button" type="submit">Submit</button>
    </form>

1 个答案:

答案 0 :(得分:1)

尝试一下:

    <form action="{% url 'LandingPage:form_page' %}" method="POST" class="ui inverted form container">
        {% csrf_token %}

        <div class="field">
            <label>البريد الألكتروني</label>
            {{form.E_mail}}
        </div>
        <div class="ui field">
            <label>أختر الدولة</label>
            {{form.country}}
        </div>

        <!-- Mobile Number -->
        <div class="ui field">
            <label>رقم الهاتف</label>

            <div class="inline fields">
                <div class="eight wide field">
                    {{form.phone}}
                </div>

                <div class="three wide field">
                    {{form.phone_code}}
                </div>
            </div>
        </div>

        <!-- Nationalety -->
        <div class="ui field">
            <label>الجنسية</label>
            {{form.nationality}}
        </div>
        <button class="ui fluid positive button" type="submit">Submit</button>
    </form>

Django模板将根据表单字段为您呈现它。关于占位符或任何其他html属性,您可以在UserForm上进行设置以使其显示在模板中。