teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問django-bootstrap4 で 複数行の形式で入力・出力可能なフォームを作るには

編集履歴

質問編集履歴

11

仕様の変更

2020/11/23 10:48

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,16 +1,18 @@
1
- ### お尋ねしたいこと
1
+ ### 前提・実現したいこと
2
2
 
3
3
 
4
4
 
5
5
  Djangoで`class-based view`を用いてブログアプリを作っています。
6
6
 
7
- 装飾に`django-bootstrap4`を使っていますが、入力フォームで複数行を入力する方法を見つけられずに困っています。
7
+ 装飾に`django-bootstrap4`を使っていますが、入力フォームで複数行を入力できる仕様にしようと思っています。
8
+
9
+
10
+
8
-
11
+ ### 発生している問題
9
-
10
-
12
+
13
+
14
+
11
- `django-bootstrap4`で、`{% bootstrap_form form %}`を記述する場合に、複数行の入力（改行）が可能な入力フォームを作る方法がありましたら、アドバイスいただければ幸いです。
15
+ `textarea`要素を使って`create.html`ファイルを作成しましたが、送信先のブログ本体において本文が一行で出力されてしまいます。
12
-
13
- （あるいは、`{% bootstrap_form form %}`の記述を変更して、`class`属性に`form-group`を指定した`div`要素と`textarea`要素を使うような方法になるのでしょうか。）
14
16
 
15
17
 
16
18
 
@@ -28,7 +30,7 @@
28
30
 
29
31
 
30
32
 
31
- {% block title %}ブログ{% endblock %}
33
+ {% block title %}新規作成{% endblock %}
32
34
 
33
35
 
34
36
 
@@ -36,15 +38,43 @@
36
38
 
37
39
 
38
40
 
39
- <form class="mt-4 mb-3" action="" method="POST">
41
+ <form class="mt-4 mb-3 form-horizontal" action="" method="POST">
40
42
 
41
43
  {% csrf_token %}
42
44
 
43
- {% bootstrap_form form %}
45
+ <div class="form-group">
46
+
44
-
47
+ <label class="col-sm-2 control-label">タイトル</label>
48
+
45
-
49
+ <div class="col-sm-10">
50
+
46
-
51
+ <input type="text" class="form-control" name='title' placeholder="タイトル">
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ <div class="form-group">
58
+
59
+ <label class="col-sm-2 control-label">内容</label>
60
+
61
+ <div class="col-sm-10">
62
+
63
+ <textarea class="form-control" name='content' rows="5" placeholder="内容"></textarea>
64
+
65
+ </div>
66
+
67
+ </div>
68
+
69
+ <div class="form-group">
70
+
71
+ <div class="col-sm-offset-2 col-sm-10">
72
+
47
- <input type="submit" value="作成する">
73
+ <button type="submit" class="btn btn-primary">作成する</button>
74
+
75
+ </div>
76
+
77
+ </div>
48
78
 
49
79
  </form>
50
80
 

10

質問表現の変更

2020/11/23 10:47

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  `django-bootstrap4`で、`{% bootstrap_form form %}`を記述する場合に、複数行の入力（改行）が可能な入力フォームを作る方法がありましたら、アドバイスいただければ幸いです。
12
12
 
13
- （あるいは、`{% bootstrap_form form %}`の記述を変更して、`class`属性に`form-group`を指定したdiv要素と`textarea`要素を使うような方法になるのでしょうか。）
13
+ （あるいは、`{% bootstrap_form form %}`の記述を変更して、`class`属性に`form-group`を指定した`div`要素と`textarea`要素を使うような方法になるのでしょうか。）
14
14
 
15
15
 
16
16
 

9

質問表現の変更

2020/11/17 13:48

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  `django-bootstrap4`で、`{% bootstrap_form form %}`を記述する場合に、複数行の入力（改行）が可能な入力フォームを作る方法がありましたら、アドバイスいただければ幸いです。
12
12
 
13
- （あるいは、{% bootstrap_form form %}`の記述を変更して、`class`属性に`form-group`を指定したdiv要素と`textarea`要素を使うような方法になるのでしょうか。）
13
+ （あるいは、`{% bootstrap_form form %}`の記述を変更して、`class`属性に`form-group`を指定したdiv要素と`textarea`要素を使うような方法になるのでしょうか。）
14
14
 
15
15
 
16
16
 

8

質問表現の変更

2020/11/17 13:47

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -8,9 +8,9 @@
8
8
 
9
9
 
10
10
 
11
- 通常の`Bootstrap`であれば、`textarea`要素を使うことになるかと思いますが、
11
+ `django-bootstrap4`で、`{% bootstrap_form form %}`を記述する場合に、複数行の入力（改行）が可能な入力フォームを作る方法がありましたら、アドバイスいただければ幸いです。
12
12
 
13
- `django-bootstrap4`で、`{% bootstrap_form form %}`を記述する場合に、複数行の入力（改行）が可能な入力フォームを作る方法がありましたら、アドバイスいただければ幸いです。
13
+ （あるいは、{% bootstrap_form form %}`の記述を変更して、`class`属性に`form-group`を指定したdiv要素と`textarea`要素を使うような方法になるのでしょうか。）
14
14
 
15
15
 
16
16
 

7

質問表現の変更

2020/11/17 13:46

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -5,8 +5,6 @@
5
5
  Djangoで`class-based view`を用いてブログアプリを作っています。
6
6
 
7
7
  装飾に`django-bootstrap4`を使っていますが、入力フォームで複数行を入力する方法を見つけられずに困っています。
8
-
9
- （つまり、改行してフォームに入力しても、一行で出力されてしまいます。）
10
8
 
11
9
 
12
10
 

6

質問表現の変更

2020/11/17 13:31

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  通常の`Bootstrap`であれば、`textarea`要素を使うことになるかと思いますが、
14
14
 
15
- `django-bootstrap4`で、`{% bootstrap_form form %}`を記述する場合に、複数行の入力（改行）が可能な入力フォームはどう作ればいいのでしょうか。
15
+ `django-bootstrap4`で、`{% bootstrap_form form %}`を記述する場合に、複数行の入力（改行）が可能な入力フォームを作る方法がありましたら、アドバイスいただければ幸いです。
16
16
 
17
17
 
18
18
 

5

タイトルの変更

2020/11/17 13:24

投稿

tetsuk
tetsuk

スコア6

test CHANGED
@@ -1 +1 @@
1
- django-bootstrap4 で bootstrap_form を使って複数行の形式で入力・出力可能なフォームを作るには
1
+ django-bootstrap4 で 複数行の形式で入力・出力可能なフォームを作るには
test CHANGED
File without changes

4

タイトルの変更

2020/11/17 13:21

投稿

tetsuk
tetsuk

スコア6

test CHANGED
@@ -1 +1 @@
1
- django-bootstrap4 で bootstrap_form を使って複数行入力可能なフォームを作るには
1
+ django-bootstrap4 で bootstrap_form を使って複数行の形式で入力・出力可能なフォームを作るには
test CHANGED
File without changes

3

タイトルの変更

2020/11/17 13:20

投稿

tetsuk
tetsuk

スコア6

test CHANGED
@@ -1 +1 @@
1
- django-bootstrap4 で bootstrap_form を使った複数行の記載
1
+ django-bootstrap4 で bootstrap_form を使って複数行入力可能なフォームを作るには
test CHANGED
File without changes

2

質問表現の変更

2020/11/17 13:18

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  Djangoで`class-based view`を用いてブログアプリを作っています。
6
6
 
7
- 装飾に`django-bootstrap4`を使っていますが、入力フォームで複数行を入力する方法を見つけられません。
7
+ 装飾に`django-bootstrap4`を使っていますが、入力フォームで複数行を入力する方法を見つけられずに困っています。
8
8
 
9
9
  （つまり、改行してフォームに入力しても、一行で出力されてしまいます。）
10
10
 

1

views.pyに違うコードを入れていたため、差し替えました。

2020/11/17 13:10

投稿

tetsuk
tetsuk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -112,35 +112,53 @@
112
112
 
113
113
  ```python
114
114
 
115
- {% extends "base.html" %}
115
+ from django.shortcuts import render
116
116
 
117
- {% load bootstrap4 %}
117
+ from django.urls import reverse_lazy
118
+
119
+ from django.views.generic import ListView, DetailView, CreateView, DeleteView
118
120
 
119
121
 
120
122
 
121
- {% block title %}ブログ{% endblock %}
123
+ from .models import BlogModel
122
124
 
123
125
 
124
126
 
127
+
128
+
129
+ class BlogList(ListView):
130
+
131
+ """ 一覧表示 """
132
+
133
+ template_name = 'list.html'
134
+
125
- {% block content %}
135
+ model = BlogModel
126
136
 
127
137
 
128
138
 
129
- <form class="mt-4 mb-3" action="" method="POST">
139
+ class BlogDetail(DetailView):
130
140
 
131
- {% csrf_token %}
141
+ """ 詳細表示 """
132
142
 
143
+ template_name = 'detail.html'
144
+
133
- {% bootstrap_form form %}
145
+ model = BlogModel
134
146
 
135
147
 
136
148
 
137
- <input type="submit" value="作成する">
149
+ class BlogCreate(CreateView):
138
150
 
151
+ """ 記事作成 """
152
+
153
+ template_name = 'create.html'
154
+
139
- </form>
155
+ model = BlogModel
156
+
157
+ fields = ('title', 'content')
158
+
159
+ success_url = reverse_lazy('list')
140
160
 
141
161
 
142
-
143
- {% endblock %}
144
162
 
145
163
  ```
146
164