如何使用基于类的视图自定义表单样式与HTML属性

完全可以实现，你可以通过自定义ModelForm关联CreateView的方式修改表单输入框的长度、样式、占位符等所有HTML属性，具体操作步骤如下：

• 第一步：自定义继承自ModelForm的表单类，在表单中配置字段的widget属性来添加自定义HTML属性
  你可以选择单独给每个字段配置属性，也可以统一给所有字段批量添加属性：
  示例1：单独给字段配置属性

  from django import forms
  from .models import Atum
  
  class AtumCreateForm(forms.ModelForm):
      class Meta:
          model = Atum
          # 对应你原来指定的字段列表
          fields = ['atum1', 'atum2', 'atum3', 'atum4', 'atum5', 'atum6', 'atum7']
          # 通过widgets参数给每个字段的渲染组件添加自定义属性
          widgets = {
              # 自定义atum1输入框宽度、文字颜色、外边距
              'atum1': forms.TextInput(attrs={'style': 'width: 300px; color: #333; margin: 10px 0;'}),
              # 自定义atum2的占位提示、内边距、圆角
              'atum2': forms.NumberInput(attrs={'placeholder': '请输入参数2', 'style': 'padding: 8px; border-radius: 4px;'}),
              # 剩余字段按需求同理配置即可
          }
  

  示例2：批量给所有字段添加公共属性

  class AtumCreateForm(forms.ModelForm):
      class Meta:
          model = Atum
          fields = ['atum1', 'atum2', 'atum3', 'atum4', 'atum5', 'atum6', 'atum7']
      
      def __init__(self, *args, **kwargs):
          super().__init__(*args, **kwargs)
          # 遍历所有字段统一添加属性
          for field in self.fields.values():
              field.widget.attrs.update({
                  'class': 'custom-form-input',
                  'style': 'width: 100%; margin-bottom: 15px; border: 1px solid #eee;',
              })
          # 可单独针对特殊字段额外修改属性
          self.fields['atum7'].widget.attrs['style'] += 'background-color: #f5f5f5;'
  

• 第二步：修改你的CreateView配置，关联自定义的表单类
  把原来视图中的fields参数替换为form_class，指向你刚定义的表单即可：

  class SlipCreateView(LoginRequiredMixin, CreateView):
      model = Atum
      form_class = AtumCreateForm
      # 你原有视图的其他配置（比如success_url、template_name等）保持不变即可
  

如果不想修改后端代码，也可以直接在模板中手动渲染表单字段，直接给input标签写自定义属性，效果完全一致。

内容的提问来源于stack exchange，提问作者João Pedro Santos