Центральные метки Django ModelForm поверх уже центрированных входов - PullRequest
Новая
       8

Центральные метки Django ModelForm поверх уже центрированных входов

0 голосов
/ 01 июля 2018

Привет. Я пытаюсь отобразить надписи над уже центрированными входами, как бы я поступил? Я не совсем уверен, как перебрать метки, а затем выровнять их выше. Я новичок в Django и не уверен, как правильно использовать теги цикла for в HTML, спасибо за ваше время:). 

from django.db import models
from django.forms import ModelForm
from django.forms import modelformset_factory
# Create your models here.

# Model Sign up starts here.
class ModelRegister(models.Model):
    name = models.CharField(max_length=356)
    lastname = models.CharField(max_length=356)
    email = models.EmailField(max_length=356)
    password = models.CharField(max_length=356)
    password_conf = models.CharField(max_length=356)
    phone_number = models.CharField(max_length=356)

# ModelForm Sign up starts here.
class RegisterForm(ModelForm):
    class Meta:

        model = ModelRegister

        fields = ['name', 'lastname', 'email', 'password', 'password_conf',
         'phone_number',]

        labels = {
            'name' : 'Name',
            'lastname' : 'Last Name',
            'email' : 'Email',
            'password' : 'Password',
            'password_conf' : 'Confirm',
            'phone_number' : 'Phone Number',
        }

        class Media:
            css = {
                '__all__' : 'Register_style_sheet.css'
            }

1 Ответ

0 голосов
/ 30 декабря 2018

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

<label for="{{form.field_name.label_tag}}> Name of field example: Email </label>

вызовите функцию label_tag(), как в примере выше, без скобок.

Теперь вызывайте разрыв строки вручную после строки выше, которая выглядит следующим образом <br>.

И, наконец, вызовите ввод вручную {{form.field_name}}. Это откроет ваш ввод и вы сможете ввести информацию.

ВЫХОД: 

                                    Email Address:
                                    |      Input Field      |

                                    Password:
                                    |      Input Field      |

HMTL 

<!-- Start of a jumbotron -->

<div id="LoginFormJumbo" class="container">
  <div id="Jumbotronlogin" class="jumbotron">

    <!-- Form starts here  -->
    <form class="form-group mx-auto" action="#" method="POST">

        <!-- Cross Site Request Forgery Token -->
        {% csrf_token %}
        <!-- End Cross Site Request Forgery -->

        <div id="formtest" class="container">

          <label id="email_address_label">{{form.email.label_tag}}</label>
            <br>    <!-- This is an example of how to layout your input & label -->
          {{form.email}} <!-- This is calling the input -->

            <br> </br>

          <label id="password_label">{{form.password.label_tag}}</label>
            <br>    <-- Another example here -->
            {{form.password}} <!-- Calling another input in our form -->
            <br>
            <a id="forgot_pass" href="#"> <small>Forgot password?</small></a>

            <br> <br> </br>

          <input id="login_submit_btn" type="submit" name="" value="Enter">

         </div>

        {% for i in form %}
        <div class="fieldWrapper">

          {{i.errors}}
          {% if i.help_text %}
          <p class="help">{{i.help_text|safe}}</p>
          {% endif %}
          {% endfor %}
        </div>


    </form>
    <!-- Form ends here -->

    </div>
  </div>
</div>
<!-- End Jumbotron  -->
...