Django Forms 템플릿 디자인 클래스

Question

Django Forms 프레임 워크는 훌륭하고 다음과 같이 전체 양식을 렌더링합니다. 다음과 같이

<p><label for="id_username">Username:</label> <input id="id_username" type="text" name="username" maxlength="30" /> Required. 30 characters or fewer. Alphanumeric characters only (letters, digits and underscores).</p> 
<p><label for="id_email">Email:</label> <input type="text" name="email" id="id_email" /></p> 
<p><label for="id_firstname">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p> 
<p><label for="id_lastname">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p> 
<p><label for="id_password1">Password:</label> <input type="password" name="password1" id="id_password1" /></p> 
<p><label for="id_password2">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p> 

하지만 양식의 각 요소에 클래스를 추가 할 디자인을 위해서 : 등록 양식에 대한

{{ form.as_p }} 

, 그것으로 위의 변환

<p><label for="id_email" class="field-title">Email:</label> <input type="text" name="email" id="id_email" /></p> 
<p><label for="id_firstname" class="field-title">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p> 
<p><label for="id_lastname" class="field-title">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p> 
<p><label for="id_password1" class="field-title">Password:</label> <input type="password" name="password1" id="id_password1" /></p> 
<p><label for="id_password2" class="field-title">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p> 

이러한 클래스를 개별 양식 요소에 추가하는 표준 방법은 무엇입니까? 이러한 클래스를 추가하려면 템플릿의 폼을 수동으로 확장해야합니다 (이 경우 폼의 변경 내용도 템플릿에 해당 변경 사항을 적용해야합니다). 이는 특히 오류가 발생하면 추가해야하므로이 필드 각각에 대한 오류도 표시해야하므로 너무 힘들어집니다.

또는보기 클래스에서 일부 클래스를 제공하는 것이 좋지만보기가 조금 엉망입니다.

많은 CSS가 없으므로 양식 클래스에서 지정된 태그에 대해 이러한 클래스를 정의 할 수 있어야합니다. 그렇다면이 방법이 최선의 방법입니다.

디자이너 클래스를 양식 요소에 어떻게 추가합니까? 그들을 추가하는 가장 좋은 방법은 무엇이라고 생각합니까?

Answer 1

모든 라벨에 특정 클래스가 있어야하는 경우 가장 좋은 방법은 마크 업과 CSS를 약간 변경하는 것입니다.

<div class="field-title"> 
    {{ form.as_p }} 
</div> 

을 다음과 같이 CSS 정의합니다 : 양식의 주위에 당신의 클래스와 <div>을 넣어

div.field-title label { 
    ... 
} 

Answer 2

다음은 비슷한 질문입니다 : Add class to Django label_tag() output. 내가 선택한 대답이 당신의 필요에 맞는지 아닌지 확실하지 않습니다.

Answer 3

나는 또한 당신이 인식하지 못하는 경우 단지 정보를 추가, 같은 검색되었습니다 이. 양식 필드 name : 특정 필드에 CSS를 적용 할 경우

예 : 다음과 같은

, 당신은 개별 양식 필드를 추출 할 수 있습니다 지금

{{ form.name.label }} 
{{ form.name.errors }} 
{{ form.name }} 
{{ form.name.help_text }} 

을 대신 {{ form.name.label }}의, 당신은 제공 할 수 있습니다 언급 한대로 자신의 서식을 지정하십시오.

또 다른 방법은 자바 스크립트를 통해 클래스 이름을 추가하는 것입니다.

Answer 4

클래스를 속성으로 직접 폼 필드에 추가하는 것은 DRY 최선의 방법입니다.

name = forms.CharField(widget=forms.TextInput(attrs={"class":"form-control"})) 

message = forms.CharField(widget=forms.Textarea(attrs={"class":"form-control bar foo"})) 

이렇게하면 다른 곳에서는 수정할 필요가 없습니다. 원하는만큼 특정 필드에 많은 수의 클래스를 추가 할 수 있습니다.