Django의 CharField에 자리 표시자를 추가하려면 어떻게 해야 합니까?
예를 들어 다음과 같은 매우 간단한 형식을 취합니다.
class SearchForm(Form):
q = forms.CharField(label='search')
이것은 템플릿에 렌더링됩니다.
<input type="text" name="q" id="id_q" />
단, 이 명령어를 추가하고 싶다.placeholder
값을 가진 이 필드에 귀속시키다Search
HTML이 다음과 같이 보이도록 합니다.
<input type="text" name="q" id="id_q" placeholder="Search" />
가능하면 자리 표시자 값을 다음에 전달하고 싶습니다.CharField
사전 등을 통해 양식 클래스에서 다음을 수행합니다.
q = forms.CharField(label='search', placeholder='Search')
이를 위한 가장 좋은 방법은 무엇일까요?
위젯 설명서를 참조하십시오.기본적으로 다음과 같습니다.
q = forms.CharField(label='search',
widget=forms.TextInput(attrs={'placeholder': 'Search'}))
더 많은 글을 쓸 수 있지만, 분리를 통해 더 복잡한 사건들을 더 잘 추상화할 수 있습니다.
선언할 수도 있습니다.widgets
를 포함하는 속성<field name> => <widget instance>
직접 매핑Meta
고객님의ModelForm
서브클래스
ModelForm의 경우 다음과 같이 Meta 클래스를 사용할 수 있습니다.
from django import forms
from .models import MyModel
class MyModelForm(forms.ModelForm):
class Meta:
model = MyModel
widgets = {
'name': forms.TextInput(attrs={'placeholder': 'Name'}),
'description': forms.Textarea(
attrs={'placeholder': 'Enter description here'}),
}
다른 방법은 다 좋아요.단, 필드를 지정하지 않는 경우(예를 들어 동적 방법)에는 다음을 사용할 수 있습니다.
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['email'].widget.attrs['placeholder'] = self.fields['email'].label or 'email@address.nl'
또한 자리 표시자는 인스턴스가 지정된 ModelForms의 인스턴스에 종속될 수 있습니다.
좋은 질문입니다.다음 세 가지 솔루션에 대해 알고 있습니다.
솔루션 #1
기본 위젯을 교체합니다.
class SearchForm(forms.Form):
q = forms.CharField(
label='Search',
widget=forms.TextInput(attrs={'placeholder': 'Search'})
)
솔루션 #2
기본 위젯을 사용자 지정합니다.필드에서 일반적으로 사용하는 위젯과 동일한 위젯을 사용하는 경우 완전히 새로운 위젯을 인스턴스화하는 대신 해당 위젯을 사용자 정의할 수 있습니다.
class SearchForm(forms.Form):
q = forms.CharField(label='Search')
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['q'].widget.attrs.update({'placeholder': 'Search'})
솔루션 #3
마지막으로 모델 양식을 사용하는 경우(앞의 두 솔루션 외에) 다음을 설정하여 필드에 대한 사용자 지정 위젯을 지정할 수 있습니다.widgets
내면의 속성Meta
학급.
class CommentForm(forms.ModelForm):
class Meta:
model = Comment
widgets = {
'body': forms.Textarea(attrs={'cols': 80, 'rows': 20})
}
이 코드를 사용하여 폼의 모든 TextInput 필드에 플레이스홀더 속성을 추가할 수 있습니다.자리 표시자에 대한 텍스트는 모델 필드 레이블에서 가져옵니다.
class PlaceholderDemoForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(PlaceholderDemoForm, self).__init__(*args, **kwargs)
for field_name in self.fields:
field = self.fields.get(field_name)
if field:
if type(field.widget) in (forms.TextInput, forms.DateInput):
field.widget = forms.TextInput(attrs={'placeholder': field.label})
class Meta:
model = DemoModel
대부분의 경우 모든 자리 표시자가 내 모델에 정의된 필드의 자세한 이름과 같기를 원합니다.
어떤 폼이든 쉽게 할 수 있도록 믹스인을 추가했습니다.
class ProductForm(PlaceholderMixin, ModelForm):
class Meta:
model = Product
fields = ('name', 'description', 'location', 'store')
그리고.
class PlaceholderMixin:
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
field_names = [field_name for field_name, _ in self.fields.items()]
for field_name in field_names:
field = self.fields.get(field_name)
field.widget.attrs.update({'placeholder': field.label})
자리 표시자만 재정의하려는 경우 위젯을 인스턴스화하는 방법을 알아야 합니다.
q = forms.CharField(label='search')
...
q.widget.attrs['placeholder'] = "Search"
class FormClass(forms.ModelForm):
class Meta:
model = Book
fields = '__all__'
widgets = {
'field_name': forms.TextInput(attrs={'placeholder': 'Type placeholder text here..'}),
}
저는 당신의 방법을 보고 이 방법을 사용하여 해결했습니다.
class Register(forms.Form):
username = forms.CharField(label='用户名', max_length=32)
email = forms.EmailField(label='邮箱', max_length=64)
password = forms.CharField(label="密码", min_length=6, max_length=16)
captcha = forms.CharField(label="验证码", max_length=4)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for field_name in self.fields:
field = self.fields.get(field_name)
self.fields[field_name].widget.attrs.update({
"placeholder": field.label,
'class': "input-control"
})
언급URL : https://stackoverflow.com/questions/4101258/how-do-i-add-a-placeholder-on-a-charfield-in-django
'source' 카테고리의 다른 글
"검색" HTML5 입력의 삭제를 어떻게 감지합니까? (0) | 2022.11.04 |
---|---|
텍스트 값이 중복된 표 열 (0) | 2022.11.04 |
Vue 형제 간에 데이터 전달 (0) | 2022.11.04 |
MySQL 데이터베이스의 테이블 크기를 가져오려면 어떻게 해야 합니까? (0) | 2022.11.04 |
Node.js에서 환경변수를 읽습니다. (0) | 2022.11.04 |