【Django】Formクラス|widgetの基本~inputをtextareaへ変更、placeholder、labelの設定方法

Django

(最終更新月:2021年11月)

Djangoのフォームクラスを使っていて

「Textareaってどうやって作るの?」

「placeholderを指定したい!」

「labelを変更したい!」

等々、お考えの方も多いのではないのでしょうか?

当記事では特にDjango初学者の方へ向けて、

  • Formクラスのwidgetの基本

について徹底的に解説していきます

通常、

forms.CharField()

は、

<input type="text">

に相当します

今回は、

  • <textarea>に変更する方法
  • placeholderを設定する方法
  • labelを指定する方法

について解説していきます

✔月9,800円でWebデザインが学べる

デザナルは、Webデザインに苦手意識がある方におすすめのサブスク型スクールです。

特徴は以下の通り。

  • 初期費用不要
  • 教材が使い放題
  • 案件で収入も得られる

デザナルは稼ぎながら学べる、格安のWebデザインスクールです。

>>詳細はこちら<<

安いWebデザインスクール「デザナル」を徹底分析

現状

【Formクラス】

from django import forms

class NippoFormClass(forms.Form):
    title = forms.CharField(max_length=100)
    content = forms.CharField(max_length=100)

ブラウザで表示すると

http://localhost:8000/nippo/create

まずは「content」フィールドを<textarea>に変更しよう

textareaへ変更する

content = forms.CharField(max_length=100)

content = forms.CharField(widget=forms.Textarea(), max_length=100)

へ変更します

フィールド名 = forms.CharField(widget=forms.Textarea())

とすると<textarea>へ変更できます

placehlder

「title」と「content」フィールドにplaceholderを設定します

title = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'placeholder':'タイトル...'}))
content = forms.CharField(widget=forms.Textarea(attrs={'placeholder':'内容...'}), max_length=1000)

へ変更します

フィールド名 = forms.CharField(widget=forms.Textarea(attrs={‘placeholder’:’タイトル…’}))

とし、placeholderが設定できました

label

それぞれのラベルも変更しよう!

title = forms.CharField(max_length=100, label="タイトル", widget=forms.TextInput(attrs={'placeholder':'タイトル...'}))
content = forms.CharField(widget=forms.Textarea(attrs={'placeholder':'内容...'}), max_length=1000, label="内容")

フィールド名 = forms.CharField(label=ラベル名)

とするとラベル

まとめ

当記事を通じて、

  • textarea
  • placeholder
  • label

を設定する方法を解説してきました

textareaは、

フィールド名 = forms.CharField(widget=forms.Textarea())

placeholderは、

フィールド名 = forms.CharField(widget=forms.Textarea(attrs={‘placeholder’:’タイトル…’}))

labelは、

フィールド名 = forms.CharField(label=ラベル名)

として、設定することが可能です

概要を掴んだら、詳しくは公式サイトをご覧いただくといろいろなウィジェットが載っていますのでもっと詳しく知りたい!という人はご覧ください

次回は、Webアプリ機能「CRUD」の中の「U」アップデート機能を持ったページについて解説します

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

タイトルとURLをコピーしました