DJangoテンプレートで使用されるラベルと入力フィールド（モデルフォームから）の外観を変更します

Question

Model Formに関連付けられているinput fieldsを表示するために、以下のスクリプトを使用しています（DJangoテンプレートにあります）。このテンプレートの目的は、モデルのデータを追加および変更することです。

テンプレートの名前である：model_name_form.html（例：テーブル顧客のモデル表現用customer_form.html）

データを変更/追加するために、Model Formが使用されています。

問題は、以下のスクリプトを使用すると、デフォルトのプレゼンテーションの種類がフィールドに使用されていることです。私の場合は、フィールドをさらにカスタマイズする必要があります。

カスタマイズされたlabelsとinput fieldsは、フォームをもっとよく見せます。この変身

{% for field in form %} 
     <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
       <span class="text-danger small"> {{ field.errors }} </span> 
      </div> 
      <label class="control-label col-sm-2"> {{ field.label_tag }} </label> 
      <div class="col-sm-10"> {{ field }} </div> 
     </div> 
    {% endfor %} 

：

<div class="form-group"> 

    <div class="col-sm-offset-2 col-sm-10"> 

    <span class="text-danger small"> 
    </span> 

    </div> 

    <label class="control-label col-sm-2"> 
     <label for="id_companyname">Company Name:</label> 

    </label> 
    <div class="col-sm-10"> 

     <input name="companyname" id="id_companyname" type="text" maxlength="30"> 

    </div> 

</div> 

しかし、何を必要とされている（フォームを表示するテンプレートである）

私はこれでスタート次のようなラベル/入力プレゼンテーション：

は、関連付けられた属性を制御することができますどのよう

：

{{ field.errors }} 
{{ field.label_tag }} 
{{ field }} <<< especially this one 

例えば、1は上記を参照することができますが、{{ field }}は

<input name="companyname" id="id_companyname" type="text" maxlength="30"> 

生成しかし、必要とされるものは、次のとおりです。

<input class="form-control" placeholder="Username" aria-describedby="sizing-addon1" type="text"> 

ラベルと入力フィールドの表示方法を制御するにはどうすればよいですか？

TIAあなたがウィジェットには、例えば、HTML出力をより詳細に制御を持っている属性を使用することができます

Answer 1

：あなたが行うことができ、あなたの場合は

class MyModelForm(ModelForm): 

    class Meta: 
     model = MyModel 
     fields = '__all__' 
     widgets = { 
      'my_field': TextInput(attrs = { 
       'placeholder': 'Ingrese el contacto', 
       'class': 'form-control', 
       'data-validation': 'custom', 

      }), 
      'my_other_field': Select(attrs = { 
       'class': 'form-control selectpicker', 
       'data-live-search': 'true', 
       'title': 'Elegir un tipo', 
       'data-validation': 'required', 
       'data-validation-error-msg': 'Debe elegir una de las opciones.', 
      }), 

：

 widgets = { 
      'my_field': TextInput(attrs = { 
       'placeholder': 'Username', 
       'class': 'form-control', 
       'aria-describedby': 'sizing-addon1', 

      }), 

詳細はcustom template filtersを使うこともできますし、ライブラリdjango crispy formsを試すこともできますが、必要のない複雑なレイヤーが追加されます。