Настройка формы в шаблоне Django - PullRequest
Новая
       4

Настройка формы в шаблоне Django

0 голосов
/ 31 января 2020

Я хочу добавить стили к приведенной ниже форме (основная цель - изменить цвет текста заполнителя, поскольку моя форма имеет темный цвет, а заполнитель не виден из-за серого цвета по умолчанию). Я уверен, что должны быть некоторые способ достижения этого только в шаблоне.

Фрагмент из CSS

 ::placeholder {
      color: aquamarine;
      opacity: 1;
    }

Фрагмент из шаблона 

<form action="{% url 'register' %}" class="box" method="POST">
  <input type="text" name="username" placeholder="{{form.username.label}}" id=""/>
  <input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" />
  <input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/>
  <input type="text" name="email"placeholder="{{form.email.label}}"id="" />
  <input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/>
  <input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/>
  <input type="submit" value="Submit" />
</form>

Это моя форма, которую я создал для добавить нового пользователя (django .contrib.auth.models User). Я не уверен, как я могу использовать {{form.username}} в существующей форме. Если я просто добавлю {{form.username}} к форме, это создаст новое поле без применения к нему стилей.

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Я нашел грязное решение проблемы. Сначала я ввел созданную форму, как показано ниже - 

<form action="{% url 'register' %}" class="box" method="POST">
{{form.username}}
{{form.first_name}}
...
</form>

Затем я проверил отрендеренный шаблон и украл HTML эквивалент приведенного выше кода. Я добавил все необходимые атрибуты во входные теги. Это выглядит как фрагмент ниже - 

      {% csrf_token%}
      <input
        type="text"
        name="username"
        maxlength="150"
        **placeholder="Username"**
        autofocus=""
        required=""
        id="id_username"
      />

      <input
        type="text"
        name="first_name"
        maxlength="30"
        **placeholder="First Name"**
        id="id_first_name"
      />
...

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

0 голосов
/ 31 января 2020

Возможно, я неправильно понял, чего вы хотите достичь, но вы можете просто установить пользовательский CSS через тег <style></style>. Если вы хотите более сложное решение, вы можете определить CSS класс в атрибутах виджета формы или добавить пользовательских стилей в форму . 

<style>
::placeholder {
  color: aquamarine;
  opacity: 1;
}
</style>

<form action="{% url 'register' %}" class="box" method="POST">
  <input type="text" name="username" placeholder="{{form.username.label}}" id=""/>
  <input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" />
  <input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/>
  <input type="text" name="email"placeholder="{{form.email.label}}"id="" />
  <input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/>
  <input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/>
  <input type="submit" value="Submit" />
</form>
...