如何在 django 中的表单上应用 css

Question

我在注册页面中使用 django 形式，我想在其上应用 css。 这是注册 html :

<div class="login-space">
  <div class="sign-up-form">
    <form method="POST" class="register-form" action="" id="register-form">
      {% csrf_token %}
      <div class="group">{{form.username}}</div>
      <div class="group">{{form.email}}</div>
      <div class="group">{{form.password1}}</div>
      <div class="group">{{form.password2}}</div>
      <div class="group">{{form.country}}</div>
      <div class="group">{{form.age}}</div>
      <div class="group">{{form.preferences}}</div>
      <div class="group">
        <input
          type="submit"
          name="signup"
          class="button"
          id="signup"
          class="form-submit"
          value="Register"
        />
      </div>
      <div class="foot">
        <a href="{% url 'login' %}" class="signup-image-link"
          >I am already member</a
        >
      </div>
    </form>
  </div>
</div>

那么我如何在字段（用户名、电子邮件......）上应用CSS。 有人可以帮忙吗？ 非常感谢。

Answer 1

使用 Django Forms 可以非常轻松地做到这一点。您唯一需要在 Forms.py 中应用正确的 CSS 类作为属性。我在下面给出了一些示例。根据您的表格要求进行编辑。

**#File :forms.py**
    from django import forms
    from django.contrib.auth.forms import UserCreationForm, 
    from proApp.models import CustomUser
    from django.contrib.auth import get_user_model
    
    class CustomUserCreationForm(UserCreationForm):
        class Meta(UserCreationForm):
            model = get_user_model()
            fields = ['first_name', 'username', 'email', 'mobile', 'sponsorId', 'address', 'zipCode', 'country',
                      ' 'user_doc', 'last_name', 'password1', 'password2']
            widgets = {
                'first_name': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'First Name', 'required': 'required'}),
                'last_name': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Last Name', 'required': 'required'}),
                'username': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Trading Acc No: (For Login)', 'required': 'required'}),
                'password1': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Password', 'required': 'required'}),
                'password2': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Confirm Password', 'required': 'required'}),
                'mobile': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Mobile', 'required': 'required'}),
                'email': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Email', 'required': 'required'}),
                'address': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Address'}),
 'user_doc': forms.FileInput(attrs={'class': 'form-control-file',}),
            }

并且在 HTML 文件中，您可以像充足的那样调用每个字段。

# 文件：signup.html

       <div class="form-group">
                <label style="float: left; margin-bottom: 10px;color: black;">{{form.first_name.label}}</label> {{form.first_name}} {{form.last_name}}
            </div>
            <div class="form-group">
                <label style="float: left;
         margin-bottom: 10px;color: black;"> User ID:</label> {{form.username}}
            </div>
            <div class="form-group">
                <label style="float: left;
         margin-bottom: 10px;color: black;"> Password:</label> {{form.password1}}
            </div>

您还可以像这样检查 HTML 页面中的验证错误消息

 {% if form.errors %} 
{% for field in form %} {% for error in field.errors %}
                <div class="alert alert-danger">
                    <strong>{{field.label}} : {{ error|escape }}</strong>
                </div>
        {% endfor %}

Answer 2

您可以在浏览器中检查表单并找到输入类型，并使用这些输入类型在 CSS 中设置它们的样式。