ryotankの備考録日記

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

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

今回はdata2のHTMLをイメージ図になるようなコードを書く
data2.htmlのイメージ図は
このような感じ

f:id:ryotank:20211223091736p:plain
data2のイメージ図
<!--余白や色などはCSSに書く、文章のみをHTMLページに-->
<!--data2.htmlはリダイレクト先のテンプレート-->
<!--ewrn/templates/user/data2.html-->

<!--気づいた事、作業日を入力する画面、状況写真もアップロード出来るさいだい5枚まで-->
<!--テキストボックスに入力された文字列を取得するのはjavascriptで行う-->

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>データ入力画面2フォーム</title>
    <link rel="stylesheet" href="data2.css" type="text/css"> <!-- cssを読み込ませる -->
</head>
 
<body>  <!-- 本文-->
    <h1 class="title2">データ入力画面2</h1>
    <form method="POST" class="data-form" enctype="multipart/form-data"> 
    <p>{{ message }}</p>
    
    <p class="w_i_n">気づいた事<br>
        <textarea class="what_i_noiced" rows="5" cols="60"
        placeholder="R1(チップ抵抗)を半田付けしようとしたら
        ブリッジしてしまった。 ブリッジする前にカプトンテープで
        貼り固定してから半田付けするべきだった・・・・。"></textarea> <!-- 1行では入らないのでtextareaに-->
    
        <p class="w_d">作業日<br> 
        <input type="date" class="work_day" placeholder="2021/12/19">    
        
        <p class="s_p">状況写真<br> 
        <input type="file" class="situation_photo" accept=".png, .jpeg" multiple> <!-- アップロードするファイルをpngに指定-->
        <!-- ここにプレビュー画像を追加する-->
        <div id="preview"></div>
    <input type="button" value="入力画面3へ" class="input3btn">
    <input type="reset" value="リセット" class="reset2"> 
    <input type="button" value="戻る" class="back">
    </form>
</body>
 
</html>
/* data2のcss */
/* 全体を左マージン80px移動させた 2022-1-23 
運用ブラウザ:FireFox_ver96.01(64bit)
ボタンの大きさを決め、マウスオーバーでボタン背景を左から右に変化させる */

/* "入力画面3へ"ボタンホバー時をダークバイオレットなど 2022-1-23-AM5:08*/

/* 文字列のマージン*/
.title2{background-color: #f8dce0; margin-left: 80px;}
p.w_i_n{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px;}  /*気づいた事の文字列*/
p.w_d{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px}  /*作業日の文字列*/
p.s_p{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px}  /*状況写真の文字列*/

/* textとtextareaのマージン*/
.what_i_noiced{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 40px;}
.work_day{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 0px;}
.situation_photo{background-color: #f8dce0; margin: 30px; margin-left: 80px;}

/* ボタンのデザイン関連 */
.input3btn {  /* 入力画面3へボタン */
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    font-size: 28px;    /* 文字を大きめに*/
}

.reset2 {  /* リセットボタン */
    display: inline-block;
    width: 125px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    font-size: 22px;    /* 文字を大きめに*/
}

.back {  /* 戻るボタン */
    display: inline-block;
    width: 125px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    font-size: 22px;    /* 文字を大きめに*/
}

という風に書けた。

出来たのがこちら

f:id:ryotank:20220123123427p:plain
data2HTML_作業日入力カレンダー呼び出し
f:id:ryotank:20220123123512p:plain
data2HTML_状況写真_ファイルのアップロード画面呼び出し

あとは、"入力画面3へ"ボタンのホバー時のアニメーションをつけて
全体のレイアウトを調整する

次回は入力画面3へ"ボタンのホバー時のアニメーションを目指す