WEB 適用業務初期画面HTML(PYTHON.400/QHTMLSRC.DSPHEAD)
最終更新:
2025-11-27
0001.00 <!DOCTYPE html>
0002.00 % import ibm_db2
0003.00 <html lang="ja">
0004.00 <head>
0005.00 <meta charset="utf-8">
0006.00 <meta http-equiv="Content-Language" content="ja">
0007.00 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
0008.00 <meta http-equiv="Pragma" content="no-cache">
0009.00 <meta http-equiv="cache-control" content="no-cache">
0010.00 <meta http-equiv="Expires" content="-1">
0011.00 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
0012.00 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
0013.00 <title>$TITLE</title>
0014.00 <style>
0015.00 html {
0016.00 font-family: "BIZ UPDGothic", Meiryo, sans-serif;
0017.00 accent-color: rgb(26, 115, 232);
0018.00 color: #555;
0019.00 }
0020.00 body {
0021.00 padding: 1em 4em;
0022.00 }
0023.00 input {
0041.00 display: flex;
0042.00 align-items: baseline;
0043.00 gap: 0 0.7em;
0044.00 }
0045.00 .name {
0046.00 flex: none;
0047.00 width: 8em;
0048.00 }
0049.00 button > img {
0050.00 width: 1.2em;
0051.00 height: 1.2em;
0052.00 object-fit: contain;
0053.00 vertical-align: text-bottom;
0054.00 margin-right: 0.3em;
0055.00 }
0056.00 .msg {
0057.00 color: rgb(68,114,196);
0058.00 margin-top: 1em;
0059.00 }
0060.00 .dspmod {
0061.00 position: absolute;
0062.00 top: 1em;
0063.00 right: 3em;
0064.00 font-size: 2.5em;
0065.00 color: #8888ff;
0066.00 }
0067.00 </style>
0068.00 </head>
0069.00 <body>
0070.00 <form action="/query" method="get">
0071.00 <header>
0072.00 <h1>$TITLE</h1>
0073.00 <div class="buttons">
0074.00 <button type="submit" class="default"><img src="/icon/SEARCH.SVG"> 検索 </button>
0075.00 % if dspmod == 'CHGPTN':
0076.00 <button type="submit" class="default" formaction="/input"><img src="/icon/ADD.SVG"> 入力 </butto
0077.00 % end
0078.00 <button type="submit" formmethod="POST" formaction="/end"><img src="/icon/END.SVG"> 終了 </butto
0079.00 </div>
0080.00 </header>
0081.00 <main>
0082.00 <div class="dspmod">{{' 変更 ' if dspmod == 'CHGPTN' else ' 表示 '}}</div>
0083.00 <div class="content">
0084.00 <fieldset class="cols-2 db-keys">
0085.00 <label><span class="name">$KEYHDG</span><span class="value">
0086.00 <input type="text" name="$KEYFLD" value="{{values[0].get('$KEYFLD', '')}}"
0087.00 size="$SIZE" maxlength="$KEYLEN" autofocus></span></label>
0088.00 </fieldset>
0089.00 </div>
0090.00 <div class="msg">{{get('msg', '')}}</div>
0091.00 </main>
0092.00 <footer>
0093.00 </footer>
0094.00 </form>
0095.00 <script type="module" src="STATIC/COMMON.JS"></script>
0096.00 </body>
0097.00 </html>
[解説]
0070.00 <form action="/query" method="get"> 0071.00 <header> 0072.00 <h1>$TITLE</h1> 0073.00 <div class="buttons"> 0074.00 <button type="submit" class="default"><img src="/icon/SEARCH.SVG"> 検索 </button>
=> この検索ボタンが押されれば
<form action="/query" method="get">
によって Pythonプログラムのquery関数が呼び出されて実行されます。
0084.00 <fieldset class="cols-2 db-keys">
0085.00 <label><span class="name">$KEYHDG</span><span class="value">
0086.00 <input type="text" name="$KEYFLD" value="{{values[0].get('$KEYFLD', '')}}"
0087.00 size="$SIZE" maxlength="$KEYLEN" autofocus></span></label>
0088.00 </fieldset>
=>初期画面にはメイン・ファイルのキー記述が埋め込まれます。
$KEYHDG = キー・フィールドの見出しテキスト
$KEYFLD = キー・フィールドの名前
&KEYLEN = キー・フィールドの長さ
$SIZE = キー・フィールドセの長さ + 1
が埋め込まれます。キー・フィールドが複数個あれば
複数個の数だけ記述が繰り返されます。