Python
 Computer >> コンピューター >  >> プログラミング >> Python

Djangoフォームウィジェットの使い方を徹底解説|Textareaで入力フォームをカスタマイズ

Djangoのフォームウィジェットとは?

この記事では、Djangoフォームにおける「ウィジェット(widget)」の使い方について詳しく解説します。ウィジェットを活用すると、フロントエンドの見た目や操作性を大きく向上させることができます。

ウィジェットとは、DjangoフォームからHTMLとしてレンダリングされる要素のことです。テキストボックス(input)、テキストエリア(textarea)、パスワード入力欄(password input)など、フォームを構成するUI部品はすべてウィジェットに該当します。

事前準備:プロジェクトとアプリの作成

まずはDjangoプロジェクトとアプリを作成しましょう。ここでは、プロジェクト名を「tutorial14」、アプリ名を「djangoFormWidget」として進めます。

次に、以下の準備を行います。

  • 作成したアプリをsettings.pyのINSTALLED_APPSに登録する
  • プロジェクトのurls.pyにアプリのURLをインクルードする
  • Templatesフォルダ、home.html、forms.pyなどの基本ファイルを作成する

実装例

1. アプリ側のurls.py

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.home, name="home")
]

これで、ビューを表示するための基本的なURLが設定されます。

2. views.py

from django.shortcuts import render
from .forms import CommentForm
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def home(request):
    if request.method == 'POST':
        form = CommentForm(request.POST)
        if form.is_valid():
            form.save()
    commentform = CommentForm()
    return render(request, 'home.html', {"commentform": commentform})

ここでは、作成したフォームをインポートし、POSTリクエストとGETリクエストを処理しています。POSTの場合はバリデーション後にデータを保存し、GETの場合は空のフォームをテンプレートへ渡して画面に表示します。

3. models.py

from django.db import models

class CommentModel(models.Model):
    comment = models.CharField(max_length=500)

フォームで扱うコメントデータを保存するためのシンプルなモデルを定義しています。フォームから送信された内容は、このモデルを通じてデータベースに保存されます。

4. home.html(テンプレート)

<!DOCTYPE html>
<html>
    <head>
        <title>TUT</title>
    </head>
    <body>
        <form method="post">
            {% csrf_token %}
            {% for fm in commentform %}
                {{ fm.errors }}<br>
                {{ fm.label }}: {{ fm }}<br>
            {% endfor %}
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

ビューから受け取ったフォームをループで展開して表示する、シンプルなフロントエンドです。CSRFトークンの設置も忘れずに行いましょう。

5. forms.py(ウィジェットの本体)

from django import forms
from .models import CommentModel

class CommentForm(forms.Form):
    comment = forms.CharField(
        widget=forms.Textarea(
            attrs={'class': 'comment', 'title': 'add comment'}
        )
    )

    def save(self):
        data = self.data
        modelRef = CommentModel(comment=data['comment'])
        modelRef.save()

ここがフォームを定義する核心部分です。通常、CharFieldは単一行のテキストボックスとしてレンダリングされますが、widget=forms.Textarea(...)を指定することで、複数行入力可能なテキストエリアに変更できます。

さらに注目すべきはattrs属性です。attrsを使うと、生成されるHTMLタグに対してCSSクラス(class)やツールチップ表示用のtitle属性などを自由に追加できます。上記の例では、「comment」というクラスと「add comment」というtitle属性を付与しています。

出力結果

Djangoフォームウィジェットの使い方を徹底解説|Textareaで入力フォームをカスタマイズ

このように、ウィジェットを指定するだけで、標準のテキスト入力欄が複数行のテキストエリアへと変化し、コメント入力などに適したユーザーフレンドリーなフォームを簡単に実現できます。

まとめ

Djangoのウィジェットは、フォームフィールドのHTML表現を制御する仕組みです。Textarea以外にも、CheckboxSelectMultiple(複数選択チェックボックス)、RadioSelect(ラジオボタン)、PasswordInput(パスワード入力)、EmailInputなど、多数の組み込みウィジェットが用意されています。用途に応じてウィジェットを使い分け、attrs属性でスタイルや属性を調整すれば、見た目も使い勝手も優れたフォームを効率的に構築できます。

  1. Python Kivy入門：BoxLayoutウィジェットでボタンの配置と色を自在にカスタマイズする方法

    Kivyは、マルチタッチアプリなど革新的なユーザーインターフェースを備えたアプリケーションを迅速に開発するために設計された、オープンソースのPythonライブラリです。Androidアプリはもちろん、WindowsやmacOSなどのデスクトップアプリケーション開発にも幅広く活用されています。本記事では、BoxLayoutウィジェットを使用して、異なる向き（orientation）や色を持つ複数のボタンを配置する方法を、具体的なサンプルコードとともに解説します。BoxLayoutの基本的な考え方以下のコードでは、まず縦方向（vertical）の外側のボックス（outerBox）を作成します。次に

  2. Python Tkinterでプログレスバーを作成する方法をわかりやすく解説

    プログレスバーとはプログレスバーは、処理やタスクの進行状況を視覚的に表示するための、GUIアプリケーションにおける一般的な要素です。ファイルのダウンロードやデータ処理など、時間のかかる作業の進み具合をユーザーに伝えることで、アプリケーションの使いやすさを大きく向上させます。tkinterでプログレスバーを作成するこの記事では、Python標準のGUIライブラリ「tkinter」を使ってプログレスバーを作成する方法を解説します。以下のサンプルプログラムでは、tkinter.ttkモジュールからProgressbarウィジェットをインポートして使用しています。また、ttk.Styleクラスのオブジ