Question

此表单有多种选择。但是，复选框不会显示为HTML！我正在使用Materialize CSS。请帮忙。

forms.py：

FAVORITE_COLORS_CHOICES = (
('blue', 'Blue'),
('green', 'Green'),
('black', 'Black'),
)

class StudentForm(forms.ModelForm):
    favorite_colors = forms.MultipleChoiceField(
        required=False,
        widget=forms.CheckboxSelectMultiple,
        choices=FAVORITE_COLORS_CHOICES,
    )

form.html：

<div class="container">
<form>

{{ form.as_p }}

<input type='submit' value='Save' />

</form>

浏览器中的HTML页面：

来自浏览器的查看源：

<form>

    <p><label for="id_student_name">Student name:</label> <input type="text" name="student_name" maxlength="200" required id="id_student_name"></p>
<p><label for="id_present">Present:</label> <input type="checkbox" name="present" required id="id_present"></p>
<p><label>Favorite colors:</label> <ul id="id_favorite_colors">
    <li><label for="id_favorite_colors_0"><input type="checkbox" 
name="favorite_colors" value="blue" id="id_favorite_colors_0">
 Blue</label>

</li>
    <li><label for="id_favorite_colors_1"><input type="checkbox" 
name="favorite_colors" value="green" id="id_favorite_colors_1">
 Green</label>

</li>
    <li><label for="id_favorite_colors_2"><input type="checkbox" 
name="favorite_colors" value="black" id="id_favorite_colors_2">
 Black</label>

</li>
</ul></p>

    <input type='submit' value='Save' />

    </form>

已更新：

 {% for field in form %}
        <p>
            <input type="checkbox" id=field />
        <label for=field>Hello</label>
        </p>
    {% endfor %}

Answer 1

Materialize CSS要求复选框必须在label元素内，然后在输入元素旁边带有span元素。使用Django的{{ form.as_p }}不包含span元素，导致复选框无法正确显示。您需要将表单中的每个字段分别拆分（for循环也可以）。

{% for field in form %}
    <label>
        <input type="checkbox">
        <span>{{ field.name }}</span>
    </label
{% endfor %}

更新了上面的代码。我认为field.name可以使用，但命名方式可能不同（例如field.value idk）

Answer 2

基本问题是Django输出如下颜色选项：

  <!-- default Django -->
  <li>
    <label for="id_favorite_colors_1">
      <input type="checkbox" name="favorite_colors" value="green" id="id_favorite_colors_1">
      Green
    </label>
  </li>

..当然，对于单个复选框字段，Django输出：

<p>
    <label for="id_present">Present:</label>
    <input type="checkbox" name="present" required id="id_present">
</p>

而Materialize希望看到它们像这样（注意单词“ Blue”周围的<span>）：

  <!-- correct Materialize -->
  <li>
    <label for="id_favorite_colors_0">
      <input type="checkbox" name="favorite_colors" value="blue" id="id_favorite_colors_0">
      <span>Blue</span>
    </label>
  </li>

jsfiddle（https://jsfiddle.net/8eamw6dg/）

恐怕Django在此唯一的解决方案是手动呈现字段（文档：https://docs.djangoproject.com/en/dev/topics/forms/#rendering-fields-manually）。即代替

<form>
{{ form.as_p }}
<input type='submit' value='Save' />
</form>

您将需要类似的东西

<form>
{{ form.non_field_errors }}
<p>... student name field here ...</p>

<p>
    {{ form.present.errors }}
    <label for="{{ form.present.id_for_label }}">
        {{ form.present }}
        <span>{{ form.present.label }}</span>
    </label>
</p>

etc. for all the other fields...

<input type='submit' value='Save' />
</form>

Answer 3

如果我正确理解了您的问题，以下是我面临和解决的问题：

在这种情况下，Django使用css'disply：none'渲染标签，因此复选框，单选和下拉选项不会为我显示。

我写了一个简单的javascript来解决此问题：

var elems = document.querySelectorAll('label.form-check-label');
for (i = 0; i < elems.length; i++) {
elems[i].style.display = "inline";
}

Answer 4

我在Django中使用了带有UpdateView类的基于类的视图。为了避免更改Django发出的html，我添加了在模板中进行以下修改（使用JQuery完成）：

{% extends "main.html" %}
{% load static %}

{% block title %}FEI Project Update{% endblock %}

{% block content %}

{# I copied the javascript libraries into the Django static area #}

<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/materialize.min.js' %}"></script>
<script src="{% static 'js/init.js' %}"></script>

{# these lines modify the html from Django and add the <label> and <span>
  statements as described above. Three lines are needed, the ones between
  <script> and </script>. Then the table can be rendered with the Django
  {{ form }} statement without any other changes. #}

<script>
    $(document).ready(function() {
        $(':checkbox').wrap('<label class="crutch"> </label>');
        $('.crutch').append('<span> </span>');
    });
</script>

{# This is the rest of the template for illustration #}
<div class="section no-pad-top" id="index-banner">
    <style>
        table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
        }
        th, td {
            text-align: center;
        }
        label {
            pointer-events: auto;
        }

    </style>
                
    <div class="container">
        <h3>FEI Project Update: {{ project_instance.sap_id }}</h3>
    
        <form action="" method="post">
            {% csrf_token %}
            <table>
                {{ form }}
            </table>
            <input type="submit" value="Submit">
        </form>
    </div>
</div>    
{% endblock %}

Answer 5

我有同样的问题。如果您正在使用材质前端，则可以通过以下方式进行渲染：

{% load material_form %}
...
<form method="get">
    {% form form=form %}{% endform %}
    <input type="submit" class="btn btn-default" value='send' />
</form>

Answer 6

Django 为复选框生成 HTML 代码的方式与 materialize css 期望的方式不同。解决此问题的一种方法是 django-material 库。

步骤：

pip install django-material
添加“材料”将其添加到 INSTALLED_APPS 设置中。
```
INSTALLED_APPS = (
 'material',
 ...
```
)
在您的代码中包含 javascript 和样式。

{% 包含 'material/includes/material_css.html' %}

{% 包含 'material/includes/material_js.html' %}
加载 material_form 模板标签库。

{% load material_form %}

并使用 {% form %} 模板标签呈现您的表单。

{% csrf_token %}

{% form form=form %}{% endform %}

<button type="submit" name="_submit" class="btn">Submit</button>

Django：复选框未显示在HTML中

6 个答案: