django - 更改表单的结构，以便输入超出标签

Posted 2023-02-24

【中文标题】django - 更改表单的结构，以便输入超出标签

【英文标题】：django - change the structure of forms so that inputs be out of labels

【发布时间】：2017-03-14 16:36:03

【问题描述】：

我们如何改变表单的结构，使输入没有标签 当我的表单渲染将显示如下：

<p>
<label for="id_form-0-food_name_0"><input checked="checked" id="id_form-0-food_name_0" name="form-0-food_name" value="" type="radio"> (Nothing)</label>
<label for="id_form-0-food_name_1"><input id="id_form-0-food_name_1" name="form-0-food_name" value="1" type="radio"> خوراک مرغ</label>
<label for="id_form-0-food_name_2"><input id="id_form-0-food_name_2" name="form-0-food_name" value="2" type="radio"> خوراک لوبیا</label>
<label for="id_form-0-food_name_3"><input id="id_form-0-food_name_3" name="form-0-food_name" value="3" type="radio"> فسنجون</label>
</p>

但我需要inputs 渲染出labels 标签。像这样：

<p>
<input checked="checked" id="id_form-0-food_name_0" name="form-0-food_name" value="" type="radio"><label for="id_form-0-food_name_0"> (Nothing)</label>
<input id="id_form-0-food_name_1" name="form-0-food_name" value="1" type="radio"><label for="id_form-0-food_name_1"> خوراک مرغ</label>
<input id="id_form-0-food_name_2" name="form-0-food_name" value="2" type="radio"><label for="id_form-0-food_name_2"> خوراک لوبیا</label>
<input id="id_form-0-food_name_3" name="form-0-food_name" value="3" type="radio"><label for="id_form-0-food_name_3"> فسنجون</label>
</p>

我的forms.py:

class Reserve(ModelForm):
    food_name = forms.ModelChoiceField(
        queryset=Food.objects.all(), 
        widget=forms.Radioselect(renderer=RadioFieldWithoutULRenderer), 
        empty_label="(Nothing)",
        # label=''
        )
    class Meta:
        model = Reservation
        fields = ('food_name',)

和form.html

<form method="post">
% csrf_token %

% for form in formset %

<p>
  <input name="group1" type="radio" id="test1" value="" />
   form.food_name  
</p>

% endfor %

<button type="submit" class="btn btn-default">Submit</button>

【问题讨论】：

相关：Show BooleanField checkbox before label - 相信我，很难控制标签出现在哪一侧。要么保持原样，要么使用像 django-angular 这样已经完成了艰苦工作的东西

【参考方案1】：

As shown in this question您可以使用自定义模板创建自己的小部件：

在您的模板文件夹中创建一个模板文件（例如 my_project/my_app/templates/my_app/widgets/radio_option.html）：

% include "django/forms/widgets/input.html" %% if widget.wrap_label %<label% if widget.attrs.id % for=" widget.attrs.id "% endif %> widget.label </label>% endif %

（此模板从 django/forms/templates/django/forms/widgets/input_option.html 复制并稍作修改，默认情况下用于无线电小部件。）

在您的应用中创建自定义小部件：

class MyRadioSelect(django.forms.RadioSelect):
    option_template_name = "my_app/widgets/radio_option.html"

使用MyRadioSelect 而不是RadioSelect