HTML形式のDjango

Question

Djangoフォームを設定してDjangoでレンダリングする方法を知っています。残念なことに、スタイリングフォームはあまり単純ではありません。私はHTMLフォームが入力された値をDjangoに渡す方法を見つけることに興味があります。 HTMLフォームはHTMLとCSSで完全にプログラムされています。各フォームをループするために、forループを使用し、各フィールドをレンダリングするカスタムテンプレートフィルター（CSS styling in Django forms）

を設定

• ：ちょうど文脈のために、私はいくつかの理由で却下ソリューションのリストの下に見つけてくださいターン（How to style a django form - bootstrap）
• リファレンスフォームフィールドに直接最初の二つのソリューションとリスト項目を使用してhttps://stackoverflow.com/posts/5930179/revisions

私の問題は私のフォーム内の私のsがそれらを左に割り当てられて見ているクラスの属性に依存しているということであるYまたは右側の列（col_halfおよびcol_half col_last）。

私のフォームはリスト項目を使用していないので、3番目の方法はあまり効果がありません。私のフォームをリストアイテムに変換すると、奇妙な境界線がフォームフィールドに追加されます（下記のスクリーンショットを参照）。

私はHTMLテンプレートを保持し、この奇妙な境界線を取得することなく、form.py one-by-oneに値を割り当てる方法があるかどうか疑問に思っています（理想的には、私の入力タグ）？どんな広告アドバイスも高く評価されます。

HTMLフォーム下記を参照してください：

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post"> 
 
     <div class="col_half"> 
 
     <label for="register-form-name">First Name:</label> 
 
     <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control"/> 
 
     </div> 
 
    
 
     <div class="col_half col_last"> 
 
     <label for="register-form-name">Last Name:</label> 
 
\t  <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" /> 
 
     </div> 
 
    
 
     <div class="col_half"> 
 
     <label for="register-form-email">Email Address:</label> 
 
     <input type="text" id="register-form-email" name="register-form-email" value="" class="form-control" /> 
 
     </div> 
 
    
 
     <!-- <div class="clear"></div> --> 
 
    
 
     <div class="col_half col_last"> 
 
     <label for="register-form-username">Choose a Username:</label> 
 
     <input type="text" id="register-form-username" name="register-form-username" value="" class="form-control" /> 
 
     </div> 
 
    
 
     <div class="col_half"> 
 
     <label for="register-form-phone">Phone:</label> 
 
     <input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" /> 
 
     </div> 
 
    
 
     <!--<div class="clear"></div> --> 
 
    
 
     <div class="col_half col_last"> 
 
     <label for="register-form-phone">Country</label> 
 
\t  <input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" /> 
 
     </div> 
 
    
 
     <div class="col_half"> 
 
     <label for="register-form-password">Choose Password:</label> 
 
     <input type="password" id="register-form-password" name="register-form-password" value="" class="form-control" /> 
 
     </div> 
 
    
 
     <div class="col_half col_last"> 
 
     <label for="register-form-repassword">Re-enter Password:</label> 
 
     <input type="password" id="register-form-repassword" name="register-form-repassword" value="" class="form-control" /> 
 
     </div> 
 
    
 
     <div class="clear"></div> 
 
    
 
     <div class="col_full nobottommargin"> 
 
     <button class="button button-3d button-black nomargin" id="register-form-submit" name="register-form-submit" value="register">Register Now</button> 
 
     </div> 
 

 
</form>

Answer 1

[OK]を、私はそれを考え出しました。

これは、Djangoが既にフォームタグ（{{form.firstName}}）を入力タグにレンダリングすることを実現することです。私たちは、そのクラスは、我々は、このフォームを定義forms.py中にこのタグに属性を追加することができます。

HTML：

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post"> 
 
    <div class="col_half"> 
 
     <label for="register-form-name">First Name:</label> 
 
\t {{ form.firstName }} 
 
\t </div> 
 
</form>

がFORMS.PY：

を

class newUserRegistration(forms.Form): 
firstName = forms.CharField(widget=forms.TextInput(attrs={'type': 'text', 'id':'register-form-name', 'name':'register-form-name', 'value':"", 'class':'form-control'})) 

THIS RENDERS HTML ASは、我々は、基本的にHTMLに入力タグをレンダリングしているforms.pyする属性を追加することにより

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post"> 
 
     <div class="col_half"> 
 
     <label for="register-form-name">First Name:</label> 
 
\t \t <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" /> 
 
\t </div> 
 
</form>

に従います。