自定义包含 django.forms.CheckboxInput() 的 django.forms.BooleanField() 的样式

Posted 2023-02-24

【中文标题】自定义包含 django.forms.CheckboxInput() 的 django.forms.BooleanField() 的样式

【英文标题】：Customize the style of a django.forms.BooleanField() containing a django.forms.CheckboxInput()

【发布时间】：2021-04-26 19:01:53

【问题描述】：

我在我的网页上添加了一个联系方式，如下所示：

我想通过以下方式设置“CC 我自己”- 复选框的样式：

文字“CC 我自己”在其框中垂直居中。 复选框应位于文本“CC 我自己”旁边。 “前进”符号应位于文本和复选框之间，但直接位于文本旁边，并且与复选框的水平距离更大（在其右侧）。

这就是我在forms.py 中定义联系表的方式：

from django import forms

class ContactForm(forms.Form):
    # * Sender
    from_email = forms.EmailField(
        required=True,
        label='Your Email',
        widget=forms.TextInput(attrs='placeholder': '[e-mail]'))

    # * Optional CC to sender
    cc_myself = forms.BooleanField(
        required=False,
        label='CC myself',
        widget=forms.CheckboxInput(attrs='class': 'fa fa-share'))

    # * Subject
    subject = forms.CharField(required=True, label='Subject')

    # * Message
    message = forms.CharField(
        widget=forms.Textarea(attrs='placeholder': 'Dear Andreas ..'),
        required=True,
        label='Message')

然后在home.html 模板中，表单显示如下：

<form style="margin-left: auto;margin-right: 0;" method="post" action="% url 'contact' %">
    % csrf_token %

    <!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
    Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
    % for hidden in sendemail_form.hidden_fields %
         hidden 
    % endfor %

    % for field in sendemail_form.visible_fields %
    <div class="form-group">
        <label for=" field.id_for_label "> field.label </label>
         field|add_class:'form-control' 
        % for error in field.errors %
        <span class="help-block"> error </span>
        % endfor %
    </div>
    % endfor %


    <div style="text-align:center" class="form-actions">
        <button type="submit" class="btn btn-success">
            <!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
            Docs on how to implement: https://***.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
            <span class="fa fa-paper-plane"></span> Send Message
        </button>

        <!-- Add horizontal space: https://***.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
        &nbsp;
        <!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
        <a href="% url 'home' %" class="btn btn-secondary">
            <span class="fa fa-times"></span> Cancel
        </a>
    </div>

</form>

---

编辑我的项目中使用的 CSS 样式（bootstrap 4.x）：

在我所有模板周围的base.html 中，包括以下内容：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Docs for including fontawesome: https://***.com/a/41281304/12298276 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

---

在尝试@Danoram 的第一个建议后编辑：

结果是这样的（唯一的修改是复选框内“前进”-符号的位置：

我想显示 help_text='决定是否应将消息转发给您。'在灰色复选框下方，就像其他字段一样。此外，与标签文本“CC 我自己”相比，复选框的高度仍然大得多。最后但并非最不重要的一点是，整个联系表格列的格式已被扭曲。尤其是后者应该是固定的，否则我不能这样实现。

【问题讨论】：

你在使用引导程序吗？如果您需要帮助设置表单字段的样式，我们需要知道它们已经在使用什么 css 设置样式。

感谢您的评论。我刚刚在编辑中包含了所需的信息。

【参考方案1】：

这是我最好的尝试（保留复选框的大小）。

使用 if 检查单独呈现 cc 字段。

虽然这样做我必须从复选框输入中删除类并将它们直接放入 html 中

forms.py

cc_myself = forms.BooleanField(
        required=False,
        label='CC myself',
        widget=forms.CheckboxInput())

home.html

<form style="margin-left: auto;margin-right: 0;" method="post" action="% url 'contact' %">
    % csrf_token %

    <!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
        Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
    % for hidden in sendemail_form.hidden_fields %
     hidden 
    % endfor %

    % for field in sendemail_form.visible_fields %
        % if field.label == 'CC myself'%
            <div class="row form-group">
                <div class="col-3 col-lg-2 col-xl-auto">
                    <label> field.label  <label for=" field.id_for_label " class="fa fa-share"></label></label>
                </div>
                <div class="col-2">
                     field|add_class:'form-control' 
                </div>
            </div>

        % else %
            <div class="form-group">
                <label for=" field.id_for_label "> field.label </label>
                 field|add_class:'form-control' 
                % for error in field.errors %
                    <span class="help-block"> error </span>
                % endfor %
            </div>

        % endif %
    % endfor %


    <div style="text-align:center" class="form-actions">
      <button type="submit" class="btn btn-success">
        <!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
                Docs on how to implement: https://***.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
        <span class="fa fa-paper-plane"></span> Send Message
      </button>

      <!-- Add horizontal space: https://***.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
      &nbsp;
      <!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
      <a href="% url 'home' %" class="btn btn-secondary">
        <span class="fa fa-times"></span> Cancel
      </a>
    </div>

  </form>

【讨论】：

感谢您的建议。我想显示 help_text='决定是否应将消息转发给您。在灰色复选框下方，就像其他字段一样。此外，与标签文本“CC 我自己”相比，复选框的高度仍然大得多。最后但并非最不重要的一点是，整个联系表格列的格式已被扭曲。尤其是后者可以修复，这会很棒。我在上面的问题中包含了最新结果的屏幕截图。