我如何创建一个Django表单,在复选框的右边显示一个复选框标签?

34gzjxbg  于 2023-05-01  发布在  Go
关注(0)|答案(8)|浏览(158)

当我定义一个类似于这样的Django表单类时:

def class MyForm(forms.Form):
    check = forms.BooleanField(required=True, label="Check this")

它扩展为HTML,看起来像这样:

<form action="." id="form" method=POST>
<p><label for="check">Check this:</label> <input type="checkbox" name="check" id="check" /></p>
<p><input type=submit value="Submit"></p>
</form>

我希望checkbox输入元素在checkbox后面有一个标签,而不是相反。有办法说服Django这么做吗?

[编辑]

感谢Jonas的回答-尽管如此,虽然它修复了我问的问题(复选框标签呈现在复选框的右侧),但它引入了一个新问题(所有小部件标签都呈现在其小部件的右侧)。..)
我想避免覆盖_html_output(),因为它显然不是为它设计的。我提出的设计是在Field类中实现一个字段html输出方法,覆盖布尔字段的方法,并在_html_output()中使用该方法。不幸的是,Django开发人员选择了另一种方式,我希望尽可能在现有的框架内工作。
CSS听起来像是一个不错的方法,只是我不知道足够的CSS来实现这一点,甚至不知道我是否喜欢这种方法。此外,我更喜欢仍然类似于最终输出的标记,至少在呈现顺序上是这样。
此外,由于为任何特定的标记使用多个样式表是合理的,在CSS中这样做可能意味着必须为多种样式执行多次,这几乎使CSS成为错误的答案。

[编辑]

好像我在下面回答自己的问题。如果有人有更好的主意,不要害羞。

dgenwo3n

dgenwo3n1#

这是我提出的一个解决方案(Django v1.1):

{% load myfilters %}

[...]

{% for field in form %}
    [...]
    {% if field.field.widget|is_checkbox %}
      {{ field }}{{ field.label_tag }}
    {% else %}
      {{ field.label_tag }}{{ field }}
    {% endif %}
    [...]
{% endfor %}

您需要创建一个自定义模板标记(在本例中,在“www.example.html”中 www.example.com ”文件),其中包含如下内容:

from django import template
from django.forms.fields import CheckboxInput

register = template.Library()

@register.filter(name='is_checkbox')
def is_checkbox(value):
    return isinstance(value, CheckboxInput)

更多信息自定义模板标签可用here

编辑:本着asker自己回答的精神:

优点:
1.不要用CSS。
1.标记最终看起来像它应该的样子。
1.我没有黑进 Django 内部。(但不得不看相当多的一堆)
1.模板是好的,紧凑和惯用的。
1.不管标签和输入字段名的确切值如何,过滤器代码都能很好地发挥作用。
缺点:
1.可能有什么东西能做得更好更快。
1.客户不太可能愿意支付所有的时间花在这只是移动标签的权利。..

0md85ypi

0md85ypi2#

我从romkyns那里得到了答案,并使它更一般化一点

def field_type(field, ftype):
    try:
        t = field.field.widget.__class__.__name__
        return t.lower() == ftype
    except:
        pass
    return False

这样您就可以直接用字符串检查小部件类型

{% if field|field_type:'checkboxinput' %}
    <label>{{ field }} {{ field.label }}</label>
{% else %}
    <label> {{ field.label }} </label> {{ field }}
{% endif %}
3duebb1j

3duebb1j3#

所有提出的解决方案都涉及模板修改,这通常在性能方面相当低效。下面是一个自定义小部件来完成这项工作:

from django import forms
from django.forms.fields import BooleanField
from django.forms.util import flatatt
from django.utils.encoding import force_text
from django.utils.html import format_html
from django.utils.translation import ugettext as _

class PrettyCheckboxWidget(forms.widgets.CheckboxInput):
    def render(self, name, value, attrs=None):
        final_attrs = self.build_attrs(attrs, type='checkbox', name=name)
        if self.check_test(value):
            final_attrs['checked'] = 'checked'
        if not (value is True or value is False or value is None or value == ''):
            final_attrs['value'] = force_text(value)
        if 'prettycheckbox-label' in final_attrs:
            label = _(final_attrs.pop('prettycheckbox-label'))
        else:
            label = ''
        return format_html('<label for="{0}"><input{1} /> {2}</label>', attrs['id'], flatatt(final_attrs), label)

class PrettyCheckboxField(BooleanField):
    widget = PrettyCheckboxWidget
    def __init__(self, *args, **kwargs):
        if kwargs['label']:
            kwargs['widget'].attrs['prettycheckbox-label'] = kwargs['label']
            kwargs['label'] = ''
        super(PrettyCheckboxField, self).__init__(*args, **kwargs)

# usage in form
class MyForm(forms.Form):
    my_boolean = PrettyCheckboxField(label=_('Some label'), widget=PrettyCheckboxWidget())

我在一个额外的文件中有 PrettyCheckboxWidgetPrettyCheckboxField,所以它们可以在需要的地方导入。如果您不需要翻译,可以删除ugettext部分。此代码在Django 1上运行。5,未对较低版本进行测试。

优点:

  • 高性能,无需修改模板
  • 易于作为自定义小部件使用
    缺点:
  • “as_table”在第二列中呈现checkbox +标签
  • 模板内的{{ field.label }}为空。标签将改为绑定到{{ field }}
  • 比我计划在星期六做的更多的工作;- )
lyr7nygr

lyr7nygr4#

我知道用户排除了CSS,但考虑到顶级答案需要大约半个小时的工作来做这样一件小事,但知道像这样的细节在网站上很重要,我会满足于CSS解决方案。
checkbox.css

input[type="checkbox"] {
    float: left;
    margin-right: 10px;
    margin-top: 4px;
}

forms.py

class MyForm(forms.ModelForm):
    # ...
    class Media:
    css = {
        'all': 'checkbox.css',
    }

template.html

{{ form.media }}
{{ form.as_p }}

优点:

  • 快点!
  • 没有futzing与模板标签(只是form.as_p
  • 没有新的该死的小部件
  • CSS文件将自动包含在每个表单中

缺点:

  • HTML没有反映演示文稿(但已经足够好了!)
  • 你的前沿主义者会抱怨
egmofgnx

egmofgnx5#

这就是我最后做的。我写了一个自定义模板stringfilter来切换标签。现在,我的模板代码看起来像这样:

{% load pretty_forms %}
<form action="." method="POST">
{{ form.as_p|pretty_checkbox }}
<p><input type="submit" value="Submit"></p>
</form>

与普通Django模板的唯一区别是添加了{% load %}模板标签和pretty_checkbox过滤器。
下面是pretty_checkbox的一个实用但丑陋的实现--这段代码没有任何错误处理,它假设Django生成的属性是以一种非常特定的方式格式化的,在你的代码中使用这样的东西是一个坏主意:

from django import template
from django.template.defaultfilters import stringfilter
import logging

register=template.Library()

@register.filter(name='pretty_checkbox')
@stringfilter
def pretty_checkbox(value):
    # Iterate over the HTML fragment, extract <label> and <input> tags, and
    # switch the order of the pairs where the input type is "checkbox".
    scratch = value
    output = ''
    try:
        while True:
            ls = scratch.find('<label')
            if ls > -1:
                le = scratch.find('</label>')
                ins = scratch.find('<input')
                ine = scratch.find('/>', ins)
                # Check whether we're dealing with a checkbox:
                if scratch[ins:ine+2].find(' type="checkbox" ')>-1:
                    # Switch the tags
                    output += scratch[:ls]
                    output += scratch[ins:ine+2]
                    output += scratch[ls:le-1]+scratch[le:le+8]
                else:
                    output += scratch[:ine+2]
                scratch = scratch[ine+2:]
            else:
                output += scratch
                break
    except:
        logging.error("pretty_checkbox caught an exception")
    return output

pretty_checkbox扫描其字符串参数,查找和标签对,如果标签的类型为“checkbox”,则切换它们。它还剥离了标签的最后一个字符,该字符恰好是':'字符。

优点:
1.不要用CSS。
1.标记最终看起来像它应该的样子。
1.我没有黑进 Django 内部。
1.模板是好的,紧凑和惯用的。
缺点:
1.过滤器代码需要测试标签和输入字段名称的令人兴奋的值。
1.可能有什么东西能做得更好更快。
1.比我计划在周六做的更多的工作。

yks3o0rb

yks3o0rb6#

在Django admin中更改复选框的位置可能非常棘手,但幸运的是,有一个简单的解决方案,使用自定义小部件:

from django.forms.widgets import Widget, CheckboxInput, boolean_check

class RightCheckbox(Widget):
    render = CheckboxInput().render

    def __init__(self, attrs=None, check_test=None):
        super(RightCheckbox, self).__init__(attrs)
        self.check_test = boolean_check if check_test is None else check_test

Django只在widget是CheckboxInput的子类时使用左位置

czfnxgou

czfnxgou7#

输入和标签的顺序通过表单的normal_row参数提供,复选框没有不同的行模式。因此,有两种方法可以做到这一点(在0。96版本:

  1. override _html_output的表单
    2.使用CSS更改标签和复选框的位置
ctehm74n

ctehm74n8#

我也遇到了这个问题,我只是用了这个方法:

**后详细信息。简体中文

{% if field.html_name == "check_box" %}
      {{ field }}
     <label for="{{ field.id_for_label }}" class="form-label">
    {{ field.label }}
    </label>
{% else %}
   <label for="{{ field.id_for_label }}" class="form-label">
   {{ field.label }}
   </label>
  {{ field }}
{% endif %}

相关问题