今回は、as_p,as_ul,as_tableを用いて、DjangoのFormをよりきれいに表示する表示方法を記載する
as_p, as_ul, as_tableを利用すると、自動的にformの各フィールドが、pタグ、liタグ、tr,th,tdタグに囲われて表示されるようになる
as_p,as_ul,as_tableでのformの表示
- forms.py
class FormName(forms.Form):
name = forms.CharField()
email = forms.EmailField()
age = forms.IntegerField()
sex = forms.ChoiceField(choices=[
('item1', 'man'), ('item2', 'woman')
])
check = forms.BooleanField()
次にviews.pyでフォームをtemplateに値を渡す。
- views.py
from . import forms
def index(request):
return render(request, 'basicapp/index.html')
def form_name_view(request): # formをテンプレートに渡す
form = forms.FormName()
if request.method == 'POST':
form = forms.FormName(request.POST)
return render(request, 'basicapp/form_page.html', {'form': form})
# formをtempateに渡す
最後にtemplateで、as_p,as_ul,as_tableでformがどのように表示されるか見ていく
- form_page.html(as_p)
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <title>Forms</title>
</head>
<body>
<h1>Fill out the form!</h1>
<div class="container">
<form method="post">
{{ form.as_p }}
{% csrf_token %}
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
</body>
</html>
- 画面には以下のように表示される(as_p)
- form_page.html(as_ul)
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <title>Forms</title>
</head>
<body>
<h1>Fill out the form!</h1>
<div class="container">
<form method="post">
<ul><!-- ulでli要素を囲う(olでもOK) -->
{{ form.as_ul }}
{% csrf_token %}
</ul>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
</body>
</html>
- 画面には以下のように表示される(as_ul)
- form_page.html(as_table)
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <title>Forms</title>
</head>
<body>
<h1>Fill out the form!</h1>
<div class="container">
<form method="post">
<table>
{{ form.as_table }}
</table>
{% csrf_token %}
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
</body>
</html>
- 画面には以下のように表示される(as_table)
以上、djangoのformのas_p,as_ul,as_tableについて詳細に記載しました。
