django-bootstrap4 で複数行の形式で入力・出力可能なフォームを作るには

前提・実現したいこと

Djangoでclass-based viewを用いてブログアプリを作っています。
装飾にdjango-bootstrap4を使っていますが、入力フォームで複数行を入力できる仕様にしようと思っています。

発生している問題

textarea要素を使ってcreate.htmlファイルを作成しましたが、送信先のブログ本体において本文が一行で出力されてしまいます。

関連するソースコード

blogproject/templates/create.html

html
1{% extends "base.html" %}
2{% load bootstrap4 %}
3
4{% block title %}新規作成{% endblock %}
5
6{% block content %}
7
8<form class="mt-4 mb-3 form-horizontal" action="" method="POST">
9  {% csrf_token %}
10	<div class="form-group">
11		<label class="col-sm-2 control-label">タイトル</label>
12		<div class="col-sm-10">
13			<input type="text" class="form-control" name='title' placeholder="タイトル">
14		</div>
15	</div>
16	<div class="form-group">
17		<label class="col-sm-2 control-label">内容</label>
18		<div class="col-sm-10">
19			<textarea class="form-control" name='content' rows="5" placeholder="内容"></textarea>
20		</div>
21	</div>
22	<div class="form-group">
23		<div class="col-sm-offset-2 col-sm-10">
24			<button type="submit" class="btn btn-primary">作成する</button>
25		</div>
26	</div>
27</form>
28
29{% endblock %}

blogproject/templates/base.html

html
1<!DOCTYPE html>
2{% load bootstrap4 %}
3{% bootstrap_css %}
4{% bootstrap_javascript jquery='slim' %}
5<html lang="ja">
6  <head>
7    <meta charset="utf-8">
8    <meta http-equiv="X-UA-Compatible" content="IE=edge">
9    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10    <title>{% block title %}{% endblock %}</title>
11
12    {# --- css --- #}
13    {% block extra_css %}{% endblock %}
14  </head>
15  <body>
16    <main class="container">
17      {% block content %}{% endblock %}
18    </main>
19    {# --- js --- #}
20    {% block extra_js %}{% endblock %}
21  </body>
22</html>
23

blogproject/blogpost/views.py

python
1from django.shortcuts import render
2from django.urls import reverse_lazy
3from django.views.generic import ListView, DetailView, CreateView, DeleteView
4
5from .models import BlogModel
6
7
8class BlogList(ListView):
9    """ 一覧表示 """
10    template_name = 'list.html'
11    model = BlogModel
12
13class BlogDetail(DetailView):
14    """ 詳細表示 """
15    template_name = 'detail.html'
16    model = BlogModel
17
18class BlogCreate(CreateView):
19    """ 記事作成 """
20    template_name = 'create.html'
21    model = BlogModel
22    fields = ('title', 'content')
23    success_url = reverse_lazy('list')
24

blogproject/blogpost/models.py

python
1from django.db import models
2
3
4class BlogModel(models.Model):
5    title = models.CharField(max_length=100)
6    content = models.TextField()
7    postdate = models.DateField(auto_now_add=True)
8
9    def __str__(self):
10        return self.title

attakei

2020/11/19 03:22

> あるいは、{% bootstrap_form form %}の記述を変更して、class属性にform-groupを指定したdiv要素とtextarea要素を使うような方法になるのでしょうか。自分も割とこの仮説はあってそうな気もするんですが、仮説があってまだ試していないのであれば、試すところから始めてみては。試して上で想定通りであれば即自己解決です。そうでないなら仮説+検証の繰り返しが基本になるので、最終的に何も思いつかい時点でｍ再度質問を編集して「こう考えて実装してみたけど想定したとおりに動かなかった」的な内容を追記して回答を求めるなどは出来ると思います

tetsuk

2020/11/23 11:25 編集

アドバイスありがとうございます。その後、色々調べて、forms.py に widget=forms.Textarea を組み込む方法に関しても試しております。こちらについても、何かが足りなくて、解決には至っておりません。入力画面までは表示されるのですが、送信しても、ブログ本体にタイトルと日付しか反映されないという結果です。質問を変えましたので、もし可能でしたら、こちらについてアドバイスいただけると幸いです。 https://teratail.com/questions/305522

行動規範の内容に同意します

回答1件

ベストアンサー

textarea要素を使ってcreate.htmlファイルを作成しましたが、送信先のブログ本体において本文が一行で出力されてしまいます。

textarea経由の改行は改行コードなので、HTMLとして見た場合だとブラウザでは改行されるものではありません。

ブログを表示している方のテンプレートが無いので正しいかはわからないですが、
Djangoでは改行をコードをHTML用の<br>タグに変換するフィルタががあるので、
もし使っていないなら試してみて下さい。

使用例

<div>{{ article.content|linebreaks }}</div>

※ドキュメント

投稿2020/11/23 12:58

attakei

総合スコア2740

tetsuk

2020/11/24 17:19

お陰様で解決しました。textareaだけでは、view.py経由のHTMLでは改行表示されないのですね。大変参考になりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

django-bootstrap4 で複数行の形式で入力・出力可能なフォームを作るには

前提・実現したいこと

発生している問題

関連するソースコード

関連した質問