Виджет Textarea

Виджет Textarea применяется для отображения текстового поля, предназначенного для ввода большого объема текста. В HTML он превращается в тег <textarea>. Данный виджет особенно полезен для полей, где требуется ввод описаний, комментариев или другого многострочного содержимого. При создании виджета можно указать такие атрибуты, как cols и rows для задания размеров текстовой области, а также передать произвольные HTML-атрибуты через параметр attrs.

Синтаксис

pythonfrom django import forms

class MyForm(forms.Form):
  field_name = forms.CharField(widget=forms.Textarea(attrs={'rows': 10, 'cols': 40}))

Пример

Создадим простую форму с полем для ввода описания статьи, используя виджет Textarea:

pythonfrom django import forms

class ArticleForm(forms.Form):
  title = forms.CharField(max_length=100)
  description = forms.CharField(
    widget=forms.Textarea(attrs={'rows': 5, 'cols': 50}),
    label='Описание статьи'
  )

Пример

Используем виджет Textarea в форме, основанной на модели, для поля, которое хранит большой текст:

pythonfrom django import forms
from myapp.models import Article

class ArticleModelForm(forms.ModelForm):
  class Meta:
    model = Article
    fields = ['title', 'content', 'status']
    widgets = {
      'content': forms.Textarea(attrs={
        'rows': 15,
        'cols': 80,
        'placeholder': 'Введите текст статьи здесь...'
      }),
    }

Пример

Зададим виджету Textarea дополнительные CSS-классы для стилизации через атрибут attrs:

pythonfrom django import forms

class CommentForm(forms.Form):
  author = forms.CharField(max_length=50)
  comment = forms.CharField(
    widget=forms.Textarea(attrs={
      'class': 'form-control comment-area',
      'rows': 4,
      'cols': 60,
      'id': 'comment-field'
    }),
    label='Ваш комментарий'
  )

Пример

Используем виджет Textarea с передачей начального значения через поле формы:

pythonfrom django import forms

class EditArticleForm(forms.Form):
  content = forms.CharField(
    widget=forms.Textarea(attrs={'rows': 10, 'cols': 70}),
    initial='Это текст статьи по умолчанию.'
  )

Смотрите также