intra-mart Accel Platform UIデザインガイドライン(PC版) 第6版 2022-12-01

7.1.2. 更新画面

7.1.2.1. 作成ガイド

更新画面の基本的な作成ガイドについて記載します。
詳細は以下リンク先を参照してください。
実装サンプルは、基本的な画面レイアウト を使用しています。
詳細は以下リンク先を参照してください。

7.1.2.1.1. 補足事項

  • 見出し(h2 ~ h6)は必要に応じて配置します。必須部品ではありません。
  • 更新画面で、更新/削除を行えるようにする場合は、画面下部に左から更新ボタン、削除ボタンの順番に配置します。
    ボタンラベルは、基本的に「更新」「削除」とします。
    ユーザビリティを考慮して「保存」などにする場合、関係画面の統一を図ってください。
  • 同じデータの登録画面が存在する場合は、レイアウトの差異は最小限にしましょう。

7.1.2.2. 実装サンプル

7.1.2.2.2. HTML / クライアントサイド JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<imart type="head">
   <title>更新/削除画面</title>
            ・・・
 </imart>

 <!-- 画面タイトル  -->
 <div class="imui-title">
   <h1>更新/削除画面</h1>
 </div>

 <!-- ツールバー -->
 <div class="imui-toolbar-wrap">
   <div class="imui-toolbar-inner">
     <ul class="imui-list-toolbar">
       <!-- 戻るボタン -->
       <li><a href="#" class="imui-toolbar-icon" title="戻る"><span class="im-ui-icon-common-16-back"></span></a></li>
     </ul>
   </div>
 </div>

 <!-- コンテンツエリア -->
 <div class="imui-form-container-narrow">
   <!-- h2 -->
   <div class="imui-chapter-title">
     <h2>入力フォームのタイトル(必要に応じて配置)</h2>
   </div>

   <form id="form" method="POST" class="target_form mt-10" action="hoge/update_delete" onsubmit="return false;">
     <table class="imui-form">
       <tr>
         <th><label>項目名1</label></th>
         <td><imart type="imuiTextbox" id="textbox" name="textbox" style="width: 200px;" /></td>
       </tr>
       <tr>
         <th><label>項目名2</label></th>
         <td><imart type="imuiPassword" id="password" name="password" style="width: 200px;" /></td>
       </tr>
       <tr>
         <th><label>項目名3</label></th>
         <td><imart type="imuiTextArea" id="textarea" name="textarea" width="350px" height="50px" /></td>
       </tr>
       <tr>
         <th><label>項目名4</label></th>
         <td>
           <imart type="imuiCheckbox" id="checkbox_1" name="checkbox" label="チェック1"  />
           <imart type="imuiCheckbox" id="checkbox_2" name="checkbox" label="チェック2"  />
           <imart type="imuiCheckbox" id="checkbox_3" name="checkbox" label="チェック3"  />
         </td>
       </tr>
       <tr>
         <th><label>項目名5</label></th>
         <td>
           <imart type="imuiRadio" id="radio_1" name="radio" label="ラジオ1" />
           <imart type="imuiRadio" id="radio_2" name="radio" label="ラジオ2" />
           <imart type="imuiRadio" id="radio_3" name="radio" label="ラジオ3" />
         </td>
       </tr>
       <tr>
         <th><label>項目名6</label></th>
         <td>
           <imart type="imuiSelect" id="inputItem6" name="inputItem6" width="200px" />
         </td>
       </tr>
     </table>
     <div class="imui-operation-parts">
       <imart type="imuiButton"  value="更新" id="update-button" class="imui-large-button" />
       <imart type="imuiButton"  value="削除" id="delete-button" class="imui-large-button" />
     </div>
   </form>
 </div>