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

7.1.1. 登録画面

7.1.1.1. 作成ガイド

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

7.1.1.1.1. 補足事項

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

7.1.1.2. 実装サンプル

7.1.1.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
<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/register" 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="register-button" class="imui-large-button" />
    </div>
  </form>
</div>