如何自定义 django-uni-form 样式的表单？答案

【问题标题】：How to customize form styled by django-uni-form?如何自定义 django-uni-form 样式的表单？
【发布时间】：2010-12-26 17:08:14
【问题描述】：

我正在使用 django-uni-form 使用过滤器 my_form|as_uni_form 来设置表单样式：

<form class="uniForm" id="my_form" method="post" action="./">
      <fieldset class="inlineLabels">
           {{ my_form|as_uni_form }}
           <div  class="form_block">
                <input type="submit" value="Submit"/>
           </div>
       </fieldset>
</form>

看起来真不错。但我需要自定义它。

例如，表单的“百分比”字段之一是 IntegerField 类型。它被渲染为<input type="text">。问题是文本框真的很宽，我想让它只有 2 个字符宽。另外，我想在文本框后添加一个百分号“%”，以便用户知道如果他们在文本框中输入数字“10”，则表示 10%。

有没有办法用 django-uni-form 做到这一点？

感谢您的帮助。

【问题讨论】：

标签： html css django django-forms

【解决方案1】：

您需要遍历表单的元素并自己呈现 uniForm 标记。无论哪种方式，您都可以根据 id 或类自定义每个输入的外观。

我要做的是查看它生成的标记，然后遍历生成相同标记的元素并自定义它们。请参阅the Django docs 了解更多信息。

【讨论】：

【解决方案2】：

我和你有同样的问题。我认为文本输入的长度很容易通过 css 更改。我更关心输入背后的自定义 html 元素，在你的情况下是百分比标记。我没有找到一个简单的解决方案。看起来我们要么必须模仿字段在 django-uni-form 模板中呈现的方式，要么编写我们自己的过滤器。我仍在等待更优雅的解决方案。

【讨论】：