Django文本域表单

Question

我需要在我的Django HTML页面上为textarea设置行和列，但它却无法正常工作。

我已经将rows和cols放在我的表单中。

Views.py

class EditForm(forms.Form):

    title =  forms.CharField(widget=forms.TextInput(attrs={'name':'title'}))

    body = forms.CharField(widget=forms.Textarea(attrs={'name':'body', 'rows':3, 'cols':5}))

def new(request):
     return render(request,"encyclopedia/handlepage.html", {
       "title": "CREATE NEW PAGE",
        "edit": False,
        "editpage": EditForm()
     })
 

handlepage.html

{% extends "encyclopedia/layout.html" %}

{% block title %}
   {{ title }}
{% endblock %}

{% block body %}

<h1>{{title}}</h1>
<a href="https://guides.github.com/features/mastering-markdown/">Markdown guides</a>
{% if edit %}
    //Useless right now
{% else %}

<form method="POST" action="{% url 'save' %}">
    <input type="submit" value="SAVE ENTRY"><br>
    {% csrf_token %}
    {{ editpage }} 
</form>


{% endif %}
  
{% endblock %}

我的页面应该有一个小文本区，但是它的大小独立于其行和列，就像这样：

- MrBuffalo

---

你的浏览器源代码中是否显示了与该文本区域标签相关的任何信息？ - AMG

@AMG 抱歉回复晚了。这是来自检查文本区域的代码 { 高度：90vh; 宽度：80％; } - MrBuffalo

我怀疑你的CSS正在超越你的属性。在<textarea>中，你有设置行和列吗？看一下源代码。 - AMG

是的，也许是这样。我看不到CSS，因为这是一个要修改的现有项目。 - MrBuffalo

Answer 1

我也遇到了完全相同的问题，而且我认为我们正在做同一个项目，因为截图看起来一样：这是关于CS50 Python和JavaScript Web编程的 项目1 吗？

无论如何，我已经尝试过

    content = forms.CharField(widget=forms.Textarea(attrs={"rows":"5"}))

这看起来似乎不起作用，但这仅是由于已应用了一个覆盖行列属性的CSS属性（如@AMG建议的那样）。

如果您打开浏览器检查器，就可以看到：

您只需要删除宽度和高度这两个CSS属性，就可以看到应用了行列属性。

我知道您可能已经解决了这个问题，但我还是发布了这篇文章，因为我猜想未来CS50的同学可能仍然需要这个答案。

- aeron13

---

是的，这是CS50项目。无论如何，感谢您的回复。我希望它能对某些人有用。 - MrBuffalo

Answer 2

在init中添加它能行吗？我忘记为什么要这样做了，但这是我一直在使用的方法（可能已经过时了）。

class EditForm(forms.Form):

    body = forms.CharField(widget=forms.Textarea())
    
    def __init__(self, *args, *kwargs):
        super().__init__(*args, *kwargs)
        self.fields['body'].widget.attrs['rows'] = 3

或者在元标记中：

class EditForm(forms.Form):

    # your fields defined here followed by Meta

    class Meta:
        fields = ['title', 'body' ]
        widgets = {
            'body': forms.Textarea(attrs={'rows': 3}),
        }

- AMG

---

两种解决方案都没有奏效。大小仍然保持不变。 - MrBuffalo

Answer 3

我的解决方法是更改文本区域的CSS样式。

class EditForm(forms.Form):

    title =  forms.CharField(widget=forms.TextInput(attrs={'name':'title'}))

    body = forms.CharField(widget=forms.Textarea(attrs={'name':'body', 
                                                        'style': 'height: 3em;'))

希望它对你有用！

- Thanh Nguyen

Answer 4

我想我已经找到了答案。 在Project1\wiki\encyclopedia\static\encyclopedia中有一个名为style.CSS的CSS文件。 在这个文件中决定了textarea的样式。

"
textarea {
    height: 90vh;
    width: 80%;
}
"

输入图像描述 删除这个和所有的回来。

- jaceJu

---

目前为止，你的回答并不清晰。请编辑并添加更多细节以帮助他人理解它如何回答问题。您可以在帮助中心找到有关编写良好答案的更多信息。 - Community

Answer 5

将这些数字写在引号中。然后看看它是否有效。

body = forms.CharField(widget=forms.Textarea(attrs={'name':'body', 'rows':'3', 'cols':'5'}))

- starboy_jb

Answer 6

我最近在这个项目上工作，遇到了同样的问题。我所做的是：

从你的 static/encyclopedia/ 文件夹中找到一个名为 styles.css 的 CSS 文件，找到 textarea 并将其注释掉。

styles.css

"
/*textarea {
height: 60vh;
width: 90%;
resize: none;
margin-top: 10px;
}*/
"

然后，在您的views.py文件中，您创建了"forms"类，在textarea变量上添加所需的属性。

views.py

class NewPageForm(forms.Form):
title = forms.CharField(label="New Title",widget=forms.TextInput(attrs={'name':'title'}))
content = forms.CharField(label="Content:",widget=forms.Textarea(attrs={'name':'content','style':'width: 90%; height: 60vh; resize: none; margin-top: 10px;'}))   

通过这个方法，你将完全掌控textarea的CSS。希望这个答案对未来有类似问题的CS50同学有所帮助。

- Vladimi_r