Django-html5范围滑块奇怪地呈现

Question

我在Django表单上使用html5范围滑块。我在表单上有多个滑块。该功能可以正常工作，但是它始终以html形式呈现，并且存在这些奇怪的小错误（请参见图片）。 和。

似乎问题出在使用模板标签作为滑块ID。当我删除它们时，小错误消失了。但是，当然，这意味着我无法将范围滑块的输入保存到关联的字段。我也尝试过将ID移到输入标签中的各个位置，但这只是破坏了它完全呈现滑块的方式。关于如何解决此问题的任何想法将不胜感激。

这是模板：

<div class="range-slider">
          {{ form.content_rating_1.errors }}
          <p>  <h6> <span class="range-slider__value">0</span></p></h6>

          <input class="custom-range" type="range" value="0" min="0" max="50" id="{{ form.content_rating_1 }}" >

        </div>

Answer 1

使用表单字段对象的id_for_label属性。那将是一个字符串。如果您使用form.content_rating_1，则将在id属性中呈现完整表单元素的html标记。

<div class="range-slider">
  {{ form.content_rating_1.errors }}
  <input 
    class="custom-range" 
    type="range" value="0" min="0" max="50"
    id="{{ form.content_rating_1.id_for_label }}" >
</div>

https://docs.djangoproject.com/en/2.1/topics/forms/#looping-over-the-form-s-fields