繁体   English   中英

Django 在注册 forms.py 中使用 select 选项

[英]Django using select options in registration forms.py

Django 在注册 forms.py 中使用 select 选项

我以这种方式将一些团队放在我的models.py中:

class Account(AbstractBaseUser):
    TEAM = (('python', 'python'), ('php', 'php'))
    ...
    username = models.CharField(max_length=16, unique=True)
    first_name = models.CharField(max_length=16, unique=True)
    last_name = models.CharField(max_length=16, unique=True)
    member_of = models.CharField(max_length=20, choices=TEAM, default=TEAM[0][0])
   
    USERNAME_FIELD = 'username'
    REQUIRED_FIELDS = ['first_name', 'last_name']

    objects = AccountManager()

    def __str__(self):
        return self.username

    def has_perm(self, perm, obj=None):
        return self.is_admin

    def has_module_perms(self, app_label):
        return True

我的forms.py就像:

class RegistrationForm(UserCreationForm):
    #email = forms.EmailField(max_length=50)
    class Meta:
        model = Account
        #fields = '__all__'
        fields = ['username', 'first_name', 'last_name', 'password1', 'password2', 'member_of']

因此,当我想在我的registration.html中使用它时。html 我无法创建帐户:

<div class="group text-left">
    <label for="exampleFormControlInput1">team</label>
    <select name="status" class="form-control" id="exampleFormControlSelect2">
        {% for team in registration_form.member_of %}
            {{team}}
        {% endfor %}
    </select>
</div>

而且使用registration_form.member_of也不重要。 如果我只将member_of放在我的forms.py中,我将无法注册新用户。

#更新:

我的注册页面是:

{% load static %}

<!DOCTYPE html>
<html lang="fa">
    <!-- Begin HEAD -->
    {% include 'account/user/snippets/head.html' %}
    <!-- End HEAD -->
    <body class="bg-white">
        <!-- Begin Preloader -->
        {% include 'account/user/snippets/page-preloader.html' %}
        <!-- End Preloader -->
        <!-- Begin Container -->
        <div class="container-fluid no-padding h-100">
            <div class="row flex-row h-100 bg-white">
                <!-- Begin Left Content -->
                <div class="col-xl-8 col-lg-6 col-md-5 no-padding">
                    <div class="theme-bg background-05">
                        <div class="theme-overlay overlay-04"></div>
                        <div class="authentication-col-content mx-auto">
                            <h1 class="gradient-text-01">
test
                            </h1>
                            <span class="description">
test
                            </span>
                        </div>
                    </div>
                </div>
                <!-- End Left Content -->
                <!-- Begin Right Content -->
                <div class="col-xl-4 col-lg-6 col-md-7 my-auto no-padding">
                    <!-- Begin Form -->
                    <div class="authentication-form mx-auto">
                        <div class="logo-centered">
                            <a href="{% url 'panel' %}">
                                <img src="{% static '/img/logo.png' %}" alt="logo">
                            </a>
                        </div>
                        <h3>create account</h3>
                        <form method="POST">
                            {% csrf_token %}
                            {% if 'password2' in registration_form.errors %}
                                <h3><span style="width:400px;"><span style="width:400px;" class="badge badge-text-small text-white badge-danger">error</span></span></h3>
                            {% endif %}
                            <div class="group material-input">
                                {{registration_form.username}}
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>username</label>
                            </div>
                            <div class="group material-input">
                                {{registration_form.first_name}}
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>anme</label>
                            </div>
                            <div class="group material-input">
                                {{registration_form.last_name}}
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>family</label>
                            </div>
                            <div class="group text-left">
                                <label for="exampleFormControlInput1">status</label>
                                <select name="status" class="form-control" id="exampleFormControlSelect2">
                                    {% for team in registration_form.member_of %}
                                        {{team}}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="group material-input">
                                {{registration_form.password1}}
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>password</label>
                            </div>
                            <div class="group material-input">
                                {{registration_form.password2}}
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>confirm</label>
                            </div>
                            <div class="sign-btn text-center">
                                <input type="submit" name="register" class="btn btn-lg btn-gradient-01" value="create account">
                            </div>
                            <div class="register">
test
                                <br>
                                <a href="{% url 'login' %}">login</a>
                            </div> 
                        </form>
                    </div>
                    <!-- End Form -->                      
                </div>
                <!-- End Right Content -->
            </div>
            <!-- End Row -->
        </div>
        <!-- End Container -->     
        <!-- Begin Vendor Js -->
        <script src="{% static '/vendors/js/base/jquery.min.js' %}"></script>
        <script src="{% static '/vendors/js/base/core.min.js' %}"></script>
        <!-- End Vendor Js -->
        <!-- Begin Page Vendor Js -->
        <script src="{% static '/vendors/js/app/app.min.js' %}"></script>
        <!-- End Page Vendor Js -->
    </body>
</html>                 </div>
                            <div class="group material-input">
                                {{registration_form.password1}}
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>password</label>
                            </div>
                            <div class="group material-input">
                                {{registration_form.password2}}
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>confirm</label>
                            </div>
                            <div class="sign-btn text-center">
                                <input type="submit" name="register" class="btn btn-lg btn-gradient-01" value="create account">
                            </div>
                            <div class="register">
test
                                <br>
                                <a href="{% url 'login' %}">login</a>
                            </div> 
                        </form>
                    </div>
                    <!-- End Form -->                      
                </div>
                <!-- End Right Content -->
            </div>
            <!-- End Row -->
        </div>
        <!-- End Container -->     
        <!-- Begin Vendor Js -->
        <script src="{% static '/vendors/js/base/jquery.min.js' %}"></script>
        <script src="{% static '/vendors/js/base/core.min.js' %}"></script>
        <!-- End Vendor Js -->
        <!-- Begin Page Vendor Js -->
        <script src="{% static '/vendors/js/app/app.min.js' %}"></script>
        <!-- End Page Vendor Js -->
    </body>
</html>

看起来您正在手动呈现表单。 在这种情况下,如果没有member_of字段,则注册正在工作,您想更改模板。


# I assume you have other fields you are rending manually
# such as
# {{registration_form.username}}
# {{registration_form.first_name}}

# for team, just use:
  
  {{registration_form.member_of}}

基本上更换这部分

<label for="exampleFormControlInput1">وضعیت</label>
                                <select name="status" class="form-control" id="exampleFormControlSelect2">
                                    {% for team in registration_form.member_of %}
                                        {{team}}
                                    {% endfor %}
                                </select>

{{registration_form.member_of}}

如果你想添加一些风格

有两种方法可以做到这一点。

  1. 一种选择是使用widget 我认为即使没有这种需要,您也应该尽可能多地使用表单小部件。 例如,如果您不喜欢 django 默认的下拉菜单,并且想要更改为单选按钮,您可以使用widget 除此之外,小部件还可以让您添加css attributes 以下是如何使用它的示例:
class RegistrationForm(UserCreationForm):

    class Meta:
        model = Account
        fields = ['username', 'first_name', 'last_name', 'password1', 'password2', 'member_of']
        widgets = {
            'member_of': forms.CheckboxInput(attrs= {
                 'class': 'choice_class'})
        }

如果 CheckboxInput 不是您想要的,请在此处查看其他小部件文档, 了解选择器和复选框小部件

  1. 当我想更改字段的默认小部件时,我喜欢使用widget部件。 但我不喜欢用它来设置 css 属性。 我认为仅设置 css 属性, widget-tweaks是一个更好的选择。 因为widget-tweaks在 html 模板中添加了 css 属性。

要使用widget-tweaks

一个。 安装

pip install django-widget-tweaks

湾。 添加到INSTALLED_APPS

INSTALLED_APPS = [
    ...
    'widget_tweaks',
    ...
]

c。 在模板中,

{% load widget_tweaks %}

{{registration_form.member_of |add_class: "member_of_class"}}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM