Question

嗨，我想更改表单邮箱（占位符所在的位置）的尺寸，它的尺寸相当长。我想知道如何用下面的代码更改它：

forms.py

from django import forms
from home.models import Post


class HomeForm(forms.ModelForm):
post = forms.CharField(widget=forms.TextInput(
    attrs={
        'class': 'form-control',
        'placeholder': 'How are you feeling?',

    }
))

class Meta:
    model = Post
    fields = ('post',)

home.html：

{% extends 'base.html' %}

{% block body%}
<div class="container">
    <br/>
    <form method="post">
        {% csrf_token %}
        {{ form.post }}
        <br />
        <button type="submit">Submit</button>
</form>
<h2>{{ text }}</h2>
{% for post in posts %}
    <h1>{{ post.post }}</h1>
    <p>Posted </b> on {{ post.created }}</p>
{% endfor %}
</div>
 {% endblock %}

base.html：

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% block head %}

    <title>anonmy</title>

    {% endblock %}

</head>

<body>

    <br>

    <div class="container">

        <nav class="navbar navbar-default">

        <div class="container-fluid">

          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

            </button>

          </div>

          <div id="navbar" class="navbar-collapse collapse">

            {% if user.is_authenticated %}

            <ul class="nav navbar-nav">

                <li><a href="{% url 'home:home' %}"><b>anonmy</b></a></li>

                <li><a href='{% url 'home:categories' %}'>categories</a></li>

                <li><a href="{% url 'accounts:view_profile' %}">profile</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="{% url 'accounts:logout' %}">log out</a></li>

            </ul>

            {% else %}

            <ul class="nav navbar-nav">

                <li><a href="{% url 'accounts:login' %}">anonmy</a></li>

                <li><a href="{% url 'accounts:login' %}">login</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="{% url 'accounts:reset_password' %}">forgotten password?</a></li>

                <li><a href="{% url 'accounts:register' %}">register</a></li>

            </ul>

            {% endif %}

          </div><!--/.nav-collapse -->

        </div><!--/.container-fluid -->

      </nav>

    </div>

    {% block body %}

        <h1>Base</h1>

    {% endblock %}

</body>

<script

  src="https://code.jquery.com/jquery-3.1.1.min.js"

  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="

  crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我知道如何更改标准的html表单，但是不确定姜有两个模板/ django。我是否必须在项目中添加一个css文件，然后对其进行编辑或在form.py中做些什么？谢谢

Answer 1

您只需添加一个CSS文件，就可以像编辑标准html文件一样对其进行编辑，并使用以attrs形式输入的类名

Answer 2

将此添加到您的模型表单类中

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.fields['post'].widget.attrs.update({'size': '20'})

有关此的更多信息：Widgets

在Django中更改表单信箱的大小

2 个答案: