输入文本字段不显示在浏览器上 - Django答案

【问题标题】：Input text field do not show on browser - Django输入文本字段不显示在浏览器上 - Django
【发布时间】：2016-09-20 12:06:30
【问题描述】：

我按照一本书来学习 Django，但现在我被卡住了，因为我无法呈现我应该呈现的文本字段。我使用的是 Django 1.9 版，通常在 Firefox 上呈现。

我的 django forms.py

from django import forms

class TweetForm(forms.Form):
    text = forms.CharField(widget=forms.Textarea(attrs={'rows': 1,
'cols': 85}), max_length=160)
    country = forms.CharField(widget=forms.HiddenInput())

我有这两个 html 文件：base.html 和 profile.html

<!DOCTYPE html>
    {% load static from staticfiles %}
<html>


<head>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'js/bootstrap.min.js' %}" rel="stylesheet">

</head>

<body>
    <nav class="navbar navbar-fixed-static navbar-default" role="navigation">
        <a class="navbar-brand" href="#">MyTweets</a>
        <p class="navbar-text navbar-right container-fluid">User Profile Page</p>
    </nav>

    <div class="container">
        {% block content %}
        {% endblock %}
    </div>

    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <p class="navbar-text navbar-right">Footer </p>
    </nav>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>



<!DOCTYPE html>
<!--esse extends significa que ele vai entrar no bloco definido no arquivo base.html-->
<!-- primeiro esse profile era apenas pra mostrar os twitters, mas depopis adicionamos o campo de

adicionar um novo twitter, utilizando form, que foi feito no aqquivo <forms class="py"></forms>-->
{% extends "tweets/base.html" %}

<!--definicao dos blocos, ou seja, tera o mesmo header, body ..., o que muda eh o content-->    
{% block content %}
<div class="container" class="row clearfix">
    <div class="col-md-12 column">
    <!--Form para um novo twitter-->
        <form method="post" action="post/">{% csrf_token %}
            <div class="col-md-8 col-md-offset-2 fieldWrapper">
                {{ form.text.errors }}
                {{ form.text }}
            </div>
            {{ form.country.as_hidden }}
            <div>
                <input type="submit" value="post">
            </div>
        </form>
    </div>  

    <h3>&nbsp;</h3>

    <!--loop que mostra os tweets-->
    <div class="col-md-12 column">
        <!-- ver a logica disso no views-->
        {% for tweet in tweets %}
        <!-- a classe well ou wellbox, da o efeito de insercao-->
        <div class="well">
            <span>{{tweet.text}}</span>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

所以，渲染结果如下图：

【问题讨论】：

您指的是这个 -> profile.html 中的<input type="submit" value="post"> 输入字段？？因为我没有看到任何其他input 标签。如果那是您所指的input 标签，那么它在您的页面上作为一个 button 可见，post 就写在上面。如果您希望它是文本输入，请将输入标记的类型更改为文本而不是提交。像这样 -> <input type="text" value="post">
表单，文本是我的forms.py上定义的一个小部件...
这也与 Django 无关。它是 HTML 的一部分。所以从技术上讲，你链接到这个问题的标签是不正确的。
哦，你说的是 Django 表单？如果是这样，那么您必须向我们展示您的 forms.py
@AnkushRaghuvanshi，对不起，我加了。

标签： django django-forms django-templates

【解决方案1】：

好的，所以 Django 不允许您在 forms.Form 的情况下为表单字段添加 attrs

您需要使用ModelForm。像这样的：

from django import forms

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
          'text': forms.Textarea(attrs={'rows':1, 'cols':85}),
        }

但对于您的用例，我建议在您的模板中使用像这样的https://pypi.python.org/pypi/django-widget-tweaks 包：

首先pip install django-widget-tweaks

现在在 settings.py 的 installed_apps 中添加 django-widget-tweaks，如下所示：

INSTALLED_APPS = (
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'widget_tweaks',
)

现在像这样在你的模板中使用它们：

{% load widget_tweaks %}
...
{{ form.text|attr:"rows:1"|attr:"cols:85" }}

看到这个 -> How can i set the size of rows , columns in textField in Django Models

【讨论】：