WEBスキル

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>

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

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

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

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

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