前の
Djangoでbitflyerの収支管理アプリを作ってみる（02_02.ログイン画面を作る②。）

前回入力フィールドを作成したのですが、表示の体裁を整えるのをすっかり失念しておりました。
というわけで、今回はtableタグを使って見栄えを整えたりしていきます。

編集するのはlogin.htmlです。

login.html

{% load static %}
<!doctype html>
<html lang="ja">
<head>
    <meta charset="uth-8">
    <title>{{title}}</title>
    {% comment %} <link rel="stylesheet" type="text/css"
        href="{% static 'login/css/style.css' %}" /> {% endcomment %}
</head>
<body>
    <h1>{{title}}</h1>
    <p>{{message|safe}}</p>
    <table>
        <form action="{% url 'login' %}" method="post">
            {% csrf_token %}
            {{ form.as_table }}
            <tr><td></td><td><input type="submit" value="click"></td></tr>
        </form>
    </table>
</body>
</html>

tableタグの追加と、

{{ form }}
↓
{{ form.as_table }}

と変更しています。

ではサーバーを起動して確認してみましょう。

>python manage.py runserver

ログイン画面にアクセスして表示を確認します。

http://localhost:8000/login/

入力フィールドが縦に並んで、すこし見栄えがよくなりました。
あ、ちなみにCSS読み込みがコメントアウトしたままこっそり置いてあります。
そのうち作るかもしれませんが、殺風景だなーと思われた方は自己責任で追加どうぞ。

では、次回は今度こそユーザー登録機能を実装していきますぞー。