Django：引导输入组未使用表单呈现所需的 HTML/CSS

Posted 2023-02-24

【中文标题】Django：引导输入组未使用表单呈现所需的 HTML/CSS

【英文标题】：Django: Bootstrap input group not rendering desired HTML/CSS with form

【发布时间】：2020-08-04 02:48:06

【问题描述】：

我对 Django 比较陌生，并且在将表单呈现为 Bootstrap 中的输入组时遇到了问题。表单是为模型添加消息以进行聊天。

这是我作为输入组的目标：Expected input group

这可以通过以下 html 来实现：

<div class="input-group">
    <div class="input-group-append">
        <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
    </div>
    <textarea name="" class="form-control type_msg" placeholder="Type your message..."></textarea>
    <div class="input-group-append">
        <span class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></span>
    </div>
</div>

现在使用 Django 将表单包含在我正在使用的输入组中：

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
    </div>
    <form method="post" action=".">
        % csrf_token %
         form.content 
        <div class="input-group-append">
            <button class="send_btn" type="submit"><i class="fas fa-location-arrow"></i></button>
        </div>
    </form>
</div>

这是使用下面的forms.py：

class JobMessageForm(ModelForm):
content = forms.CharField(required=True, widget=forms.Textarea(attrs=
    'class': 'form-control type_msg',
    'placeholder': 'Type your message...'), label=False)

class Meta:
    model = JobMessage
    fields = ('content',)

这给了我以下信息：Current input group

任何帮助实现预期输出将不胜感激！让我知道是否有任何进一步的信息会有所帮助。

【参考方案1】：

原来答案是简单地使表单本身成为一个输入组：

<form class="input-group" method="post" action="."> <div class="input-group-prepend"> <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span> </div> % csrf_token % form.content <div class="input-group-append"> <button class="send_btn" type="submit"><i class="fas fa-location-arrow"></i></button> </div> </form>