在django中设置自定义用户注册表单的样式

Question

I have created custom user registration. 我创建了自定义用户注册。 I would like to style them using input placeholders and class names. 我想使用输入占位符和类名来设置它们的样式。

models.py models.py

from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    username=models.CharField(max_length=30, unique=True)
    email=models.EmailField()
    password1=models.CharField(max_length=30)
    highestQualification=models.CharField(max_length=50)


    def __str__(self):
        return self.email

This is how I want to style my signup.html with the input fields styling and placeholders. 这就是我想用输入字段样式和占位符来设置我的signup.html的样式。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

input{
  padding: 12px;
  border: 1px solid gray;
}

input:hover{
  opacity: 1;
}
</style>
</head>

<body>
<div class="container">
  <form method="post">
    <div class="row">
      <div class="col">

        <input type="text" name="username" placeholder="Username" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password1" placeholder="Password" required>
        <input type="text" name="highestQualification" placeholder="Highest qualification" required>
        <input type="submit" value="Sign up">
      </div>
    </div>
  </form>
</div>
</body>
</html>

The basic version of the signup form (without styling) looks like this. 注册表单的基本版本（没有样式）看起来像这样。 signup.html signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

{% block title %}Sign Up{% endblock %}

{% block content %}
<h2>Sign up</h2>
<form method="post">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit">Sign up</button>
</form>
{% endblock %}
</head>
<body>

</body>
</html>

Wanted to know where to mention the styling class names and placeholders of the input field. 想知道在哪里提到输入字段的样式类名称和占位符。

Answer 1

you can pass all attributes in widgets. 您可以传递小部件中的所有属性。

 name = forms.CharField(
    label=_('Person Name'),
        required=True,
        error_messages={
            'required': _('Please Enter Person Name!')
        },
        widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': _('Enter Person Name'),
                                      'data-msg': _('Starred fields must be filled.')})
    )



   email = forms.EmailField(
        label=_('Person Email'),
        required=True,
        error_messages={
            'required': _('Please Enter Person Email!')
        },
        widget=forms.EmailInput(attrs={'class': 'form-control', 'placeholder': _('Enter Person Email'),
                                       'data-msg': _('Starred fields must be filled.')})
    )

new_password = forms.CharField(
        required=True,
        widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': _('Enter New Password'),
                                          'data-msg': _('Starred fields must be filled.')}),
        label=_('New Password'),
        error_messages={
            'required': _('New Password is required!')
        }
    )

在django中设置自定义用户注册表单的样式

问题描述

1 个解决方案

解决方案1
0 2019-05-15 10:20:22

在django中设置自定义用户注册表单的样式

问题描述

1 个解决方案

解决方案1 0 2019-05-15 10:20:22

解决方案1
0 2019-05-15 10:20:22