如何在Django Crispy Forms（Bootstrap5）中将标签置于输入框内？

方法一：手动渲染字段（快速实现） #

直接放弃{{ form|crispy }}的自动渲染，改用Bootstrap 5的**浮动标签（Floating Labels）**结构手动遍历字段：

1. 修改Forms.py，添加字段样式和占位符
   给每个字段的widget添加form-control类（Bootstrap样式），下拉选择框需先添加空选项作为默认提示：

class InvestmentForm(forms.Form):
    starting_amount = forms.ChoiceField(
        choices=[('', 'Select Starting Amount')] + STARTING_AMOUNT,
        widget=forms.Select(attrs={'class': 'form-control'})
    )
    deposit_amount = forms.FloatField(
        widget=forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Deposit Amount'})
    )
    trade_in_value = forms.FloatField(
        widget=forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Trade-in Value'})
    )
    number_of_years = forms.FloatField(
        widget=forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Number of Years'})
    )
    credit_score = forms.ChoiceField(
        choices=[('', 'Select Credit Score')] + CREDIT_SCORE,
        widget=forms.Select(attrs={'class': 'form-control'})
    )
    state = forms.ChoiceField(
        label='State',
        choices=[('', 'Select State')] + [(zipcode, zipcode) for zipcode in StateTax.objects.values_list('zipcode', flat=True).distinct()],
        widget=forms.Select(attrs={'class': 'form-control'})
    )

2. 修改Index.html，替换自动渲染为手动浮动标签结构
   把{{ form|crispy }}替换为遍历字段的代码：

<div class="row justify-content-center">
    <h5 class="text-center"> Enter details below to see your estimate</h5>
</div>
<div class="col-md-8 mx-auto">
<form action="" method="POST">
    {% csrf_token %}
    {% for field in form %}
        <div class="form-floating mb-3">
            {{ field }}
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        </div>
        <!-- 保留错误提示和帮助文本 -->
        {% if field.errors %}
            <div class="text-danger mb-3">{{ field.errors }}</div>
        {% endif %}
        {% if field.help_text %}
            <small class="text-muted mb-3 d-block">{{ field.help_text }}</small>
        {% endif %}
    {% endfor %}
    <br>
    <button class="btn btn-primary" type="submit">Calculate</button>                
</form>
<br>
</div>

方法二：自定义Crispy模板（批量复用） #

如果需要保持{{ form|crispy }}的便捷性，可以自定义Crispy的Bootstrap5模板，统一修改字段渲染结构：

1. 创建自定义模板文件
   在项目templates目录下新建crispy_bootstrap5/field.html，复制原crispy-bootstrap5的field.html内容，修改为浮动标签结构：

<div class="form-floating mb-3 {% if field_class %} {{ field_class }}{% endif %}">
    {{ field }}
    {% if form_show_labels %}
    <label for="{{ field.id_for_label }}" class="{% if label_class %} {{ label_class }}{% endif %}">
        {{ field.label }}
    </label>
    {% endif %}
    {% include 'crispy_bootstrap5/help_text.html' %}
    {% include 'crispy_bootstrap5/errors.html' %}
</div>

2. 给字段添加样式和占位符
   和方法一一样，在Forms.py中给每个字段的widget添加form-control类和占位符（下拉框需添加空选项）。

3. 保留原模板调用
   Index.html中继续使用{{ form|crispy }}即可，Crispy会自动使用你自定义的模板渲染字段。

注意事项 #

• 确保项目已正确加载Bootstrap 5的CSS文件（浮动标签依赖Bootstrap的内置样式）
• 下拉选择框的空选项是为了让浮动标签正常显示，若不需要默认提示可去掉，但标签可能会一直浮在上方

内容的提问来源于stack exchange，提问作者jimiclapton