人気ブログランキング
人気ブログランキング
WEBスキル PR

Django テンプレートでform.as_pを使わずにフォーム入力をする方法(エラーの原因も分かる)

やっちゃえPYTHON
記事内に商品プロモーションを含む場合があります

フォームで設定した入力を一括でテンプレートで入力する場合、form.as_pを使用すると簡単に入力フォームが作成されます。しかし、テンプレート側の設定で入力フォームを項目ごとに個別で設定したい際は、このform.as_pを使用することができません。

どのようにすれば個別で入力フォームを設定できるのかについて解説します。

通常の入力フォームを表示する場合のテンプレート(form.as_pを使用)

サクッとテンプレートを作りたいときは、form.as_pを使用します。

その作成例としては

<form method="post">
     {{ form.as_p }}
     {% csrf_token %}
     <input type="submit" class="btn btn-primary" value="Submit">
</form>

たったこれだけで入力フォームを表示できるので、簡単に入力画面を作ることができるのです。

ちなみにform method=”post” は、ブラウザからサーバーに入力値を送る場合に使用するmethodです。これは、テンプレート(HTML)内でも記載しておく必要があります。

form.as_pを使用しないで入力フォームを表示する場合

それぞれのフィールド名などの関係を確認できるようにする為、モデル、フィールドを設定したフィールド,テンプレートを表示しておきます。

アプリ名:DenApp

モデル名:modelDEN

フィールド名:DENtitle、DENtext、DENrate

ビュークラス名:CreateDenView※クラス機能”CreateView”を使用

テンプレート名:DEN_form.html

urls.py

app_name = 'DenApp'
urlpatterns = [
    path('', views.index_view, name='index'),
    path('<int:pk>/detail/', views.CreateDenView.as_view(), name="detailden"),
]

models.py

class ModelDEN(models.Model):
    DENtitle = models.CharField(
    max_length=100
    )

    DENtext = models.TextField(
        max_length=200
    )
    DENrate = models.IntegerField(
        choices=5
    )

    def __str__(self):
        return self.title

viwes.py

class CreateDenView(CreateView):
    model = ModelDEN
    fields = ('DENtitle','DENtext','DENrate')
    template_name = 'DEN_form.html'

    def get_success_url(self):
        return reverse('DenApp:index')

DEN_form.html(←テンプレート)

<form method = 'post'>
      {% csrf_token %}
      <p>
          <label for="id_DENtitle">タイトル:</label>
          <input type="text" name="DENtitle" maxlength="100" required id="id_DENtitle">
      </p>
      <p>
          <label for="id_DENtext">本文:</label>
          <textarea name="text" maxlength="200" required id="id_DENtext"></textarea>
      </p>
      <p>
          <label for="id_DENrate">星の数:</label>
          <select name = "DENrate" required id="id_DENrate">
              <option value selected>--------</option>
              <option value="0">0(最低)</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3(標準)</option>
              <option value="4">4</option>
              <option value="5">5(最高)</option>
          </select>
      </p>

      <input type="submit" class="btn btn-success mt-4" value='登録する'>
  </form>

もしDjangoを勉強して間もない方は、この本がとてもおススメです。

私は4冊目にこの本に出合いましたが、Djangoの基本的なことがとても丁寧に記載されています。

Djangoのツボとコツがゼッタイにわかる本[第2版] [ 大橋亮太 ]

価格:2,860円
(2023/2/25 13:54時点)
感想(0件)

迷ったときはブラウザで表示させて解析ツールで確認してみよう

form.as_pが使えればいいやと思っていたのですが、使わないときはどうればいいんだろうか?と思い、今回の記事を記載しました。

試しにform.as_pで作成したアプリをブラウザで表示させてみたところ、<p>タグで囲まれて、<label>と<input>タグによって書き換わっていましたのでこの書き方であれば個別で指定できることが分かりました。

<label>タグや<input>タグのことについてよくわからない人は以下の記事を参考にしてください。

どうしてもできないときは

投稿に失敗しても、原因が分からないのがこのやり方のデメリットです。

失敗すると再度投稿ページが開き直ってしまい、何が原因なのかが分からずに、悩むことになってしまいます。

しかし、安心してください。

以下のコードをテンプレートの最後(endblock contentがある場合は直前)に書き加えてください。

失敗すると何が読み取れていないのかを表示することができます。

{% for error in form.errors %}
{{ error }}
{% endfor %}

書籍で調べる際のおすすめの本

ABOUT ME
den
完全独学でWEBデザインを無謀にも挑戦している中年男。 工場勤務の会社員で3児の父。 チャレンジを忘れず、妻に怒られても心はおれず。 有益な情報を発信し、これを見ている人の為になればと思っています。
関連記事一覧