ryotankの備考録日記

趣味の電子工作についての備考録などなど

電子工作作業報告書管理アプリその26

電子工作作業報告書管理　EWRN

HTMLでのフォーム作成編その2

変更する前のdata1.html
<!--data.htmlはデータ入力画面1-->
<!--ewrn/templates/user/data.html-->

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>データ入力画面1フォーム</title>
</head>
 
<body>
    <h1>データ入力画面1フォーム</h1>
    <form method="POST" novalidate>
        {{ form.as_p }}   <!-- フォーム内容がすべて表示される-->
        {% csrf_token %}  <!-- この記述がないとエラーになる -->
        <button type="submit">入力画面2へ</button>
        <button type="clear">クリア</button>
    </form>
    
    <p>{{ message }}</p>
</body>
 
</html>

こんな感じだったが修正後はこのようになった

修正後のdata1.html
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>データ入力画面1フォーム</title>
</head>
 
<body>
    <h1>データ入力画面1</h1>
    <form method="POST" class="data-form">{% csrf_token %}<!-- この記述がないとエラーになる -->
        
        {{ form.as_p }}   <!-- フォーム内容がすべて表示される-->
        <button type="submit" class="submit">入力画面2へ</button>
        <input type="reset" value="リセットする">
    </form>
    
    <p>{{ message }}</p>
</body>
 
</html>

ちなみにformは

#forms.py
#本来ならewrnフォルダのuserフォルダにModelformクラスを作成

#データ入力画面1の'作業名'、'分類名'、'作業内容'、'備考'の入力項目を作る

from django import forms
from .models import Post


class DataForm(forms.ModelForm):
    
    class Meta:
        model = Post
        fields = ('task_name', 'class_name', 'work_details', 'remarks')
        labels = {
            'task_name': '作業名',
            'class_name': '分類名',
            'work_details':'作業内容',
            'remarks':'備考'
        }
        help_texts = {
            'task_name': '作業名を入力してね',
            'class_name': '分類名を入力してね',
            'work_details':'作業内容を入力',
            'remarks':'備考を入力'
        }

最初にDjangoのformsをインポート（from django import forms）し
Postモデルもインポートする必要がある
(form .models import Post)

DataFormとは何かと思うがこれはフォームの名前
このDataFormがMetaFormの種類だとDjangoに伝えないと機能しなくなる

class Metaだが、ここで、Djangoにフォームを作る時
どのモデルを使えば良いか(model= Post)を伝える

最後にフォームのフィールドに何を置くかを書く
ここでは、作業名、分類名、作業内容、備考をフォームで使用する

次回はviewの解説かな