Стилизация пользовательских форм регистрации пользователей в Django - PullRequest
0 голосов
/ 15 мая 2019

Я создал пользовательскую регистрацию пользователя. Я хотел бы стилизовать их, используя входные заполнители и имена классов.

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

Вот как я хочу стилизовать мой 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>

Базовая версия формы регистрации (без стиля) выглядит следующим образом. 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>

Хотелось бы знать, где упомянуть имена классов стилей и местозаполнители поля ввода.

1 Ответ

0 голосов
/ 15 мая 2019

вы можете передать все атрибуты в виджетах.

 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!')
        }
    )
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...