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

各データ入力画面には、記入例を載せてないので、入力時に
どんな事、データを入れるか悩むのを防ぐ為、"入力のヒント"を表示するように
編集する

まずdata1.html

codepenで検証

薄い文字はplaceholderで表現する
data1には、作業名、分類名、内容、備考の項目があり
それぞれに合った入力のヒントを記載する

作業名には、"NchFET実験基板半田付け"
分類名に"基板組み立て"
内容は"実験基板の半田付け、抵抗値チェック、火入れ"
備考は"コンデンサと抵抗との間隔が近すぎである
　　　　次回設計時には、20mm以上空ける事にする"
とヒントを記載。

<!--余白や色などはCSSに書く、文章のみを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 action='{% url "showUsers" %}' method="POST" class='data-form'>
        <p>作業名</p>
        <input type="text" name="task_name" id="task_name" placeholder="N-chFET実験基板半田付けと組み立て">

        <p>分類名</p>
        <input type="text" name="class_name" id="class_name" placeholder="基板組み立て">

        <p>作業内容</p>
        <textarea name="work_details" id= "work_details" rows="5" cols="60"
        placeholder="半田付け、抵抗値チェック、火入れ"></textarea>

        <p>備考</p>
        <textarea name="remarks" id= "remarks" rows="5" cols="60"
        placeholder="コンデンサと抵抗との間隔が近すぎ、次回設計時には、20mm空ける事に注意する"></textarea>

        {% csrf_token %}  <!-- この記述がないとエラーになる -->
        {{ form.as_p }}   <!-- フォーム内容がすべて表示される-->
        <input type="button" value="入力画面2へ">
        <input type="reset" value="リセット">
    </form>
    
    <p>{{ message }}</p>
</body>
 
</html>