6.3.4.3. 入力フォーム¶

本章では、入力フォームの部品（テキストボックスやセレクトボックスなど）について説明します。

項目

入力フォーム全体
- HTML コーディング実装例
- コンテナの違い
入力フォーム部品
入力フォーム部品の基本ルール
入力ヒント（ placeholder ) の表示
Tab キーによる移動順序（ tabindex )
文字寄せ（ align ）
必須入力の表記方法

6.3.4.3.1. 入力フォーム全体 ¶

以下を推奨します。

登録／更新／参照画面／一覧画面は、以下のコンテナいずれかで囲みます。

imui–form–container

imui–form–container–narrow

imui–form–container–wide

6.3.4.3.1.1. HTML コーディング実装例 ¶

<div class="imui-form-container">
  ここに表や入力フォームなどが配置されます
</div>

6.3.4.3.1.2. コンテナの違い ¶

指定した class により枠の幅 (%) が変わります。（サンプル画像では style=height:300px を指定）

imui–form–container imui–form–container–narrow imui–form–container–wide

width:75% width:60% width:90%

コラム

imui-form-container 、 imui-form-container-narrow 、 imui-form-container-wide は、 UIモジュール の 1 つです。

別ドキュメントの CSS Module List の「コンテナ」で説明しています。

6.3.4.3.2. 入力フォーム部品 ¶

本章で説明する部品一覧は以下の通りです。

名称 imart タグ生成される HTML タグ placeholder 属性 [1]

テキストボックス imuiTextbox <input type=”text” /> ○

パスワード imuiPassword <input type=”password” /> ○

テキストエリア imuiTextArea <textarea></textarea> ○

チェックボックス imuiCheckbox <input type=”checkbox” /> －

ラジオボタン imuiRadio <input type=”radio” /> －

セレクトボックス imuiSelect <select></select> － [2]

[1] placeholder は、入力ヒント（ placeholder ) の表示 を参照してください。

[2] list の1番目に、入力ヒント（ placeholder ) を体言止めで記述します。（例：ロケールを選択）

注意

上記以外に、imuiMultiDragbox や imuiRichtextbox などの入力フォーム部品も用意しています。

スクリプト開発向けタグライブラリのPC版UIコンポーネントを参照してください。

6.3.4.3.3. 入力フォーム部品の基本ルール ¶

入力フォーム部品の基本的な記述方法と基本ルールを説明します。詳細は、スクリプト開発向けタグライブラリのPC版UIコンポーネントを参照してください。

6.3.4.3.3.1. テキストボックス（imuiTextbox）、パスワード（imuiPassword）¶

外観と基本的な HTML ソース
imuiTextbox
1
<imart type="imuiTextbox" value="テキストボックス" />
imuiPassword
1
<imart type="imuiPassword" value="password" />
注意

詳細は、スクリプト開発向けタグライブラリのPC版UIコンポーネントの imuiTextbox 、 imuiPassword を参照してください。
共通ルール

autofocus 属性は、任意指定です。

画面表示時に1番最初に入力してほしい部品に指定します。

例：ログイン画面で、ユーザコードのテキストボックスに autofocus を指定します。

検索画面で、検索文字列のテキストボックスに autofocus を指定します。

横幅の指定方法は以下の通りです。

style=”width:000px;” で指定します。（000 は該当のサイズを指定してください）

size 属性は使用しません。

※size 属性は、ブラウザによる表示の差異が発生します。（表示フォントにも依存します）

maxlength 属性を指定します。

（一般ユーザのユーザビリティ向上の為に指定します）

class を指定せずに、自動で角丸デザインが適用されます。

入力不可の場合（１）

readonly 属性を指定します。

例：フローティングカレンダーからテキストボックスに入力します。（直接編集は不可です）

入力不可の場合（２）

readonly 属性を指定し、class=”imui-text-readonly” を指定します。

（class=”imui-text-readonly” は線なし、背景なしになります）

例：登録画面で入力可能だった項目を参照画面、編集画面で表示します。

入力不可の場合（３）

disabled 属性を指定します。

例：ラジオボタンの選択値により、入力制御をします。

コラム

上記の「入力不可」は、 imuiTextbox 、 imuiPassword 、 input type=”text” 、 input type=”password” をそのまま利用する方法です。

これ以外に、label タグと input type=”hidden” を組み合わせて入力不可にする方法もあります。

どちらの方法を採用しても問題ありませんが、画面単位での統一を図るようにしてください。

6.3.4.3.3.2. テキストエリア（imuiTextArea）¶

外観と基本的な HTML ソース
1
<imart type="imuiTextArea" value="テキストエリア" />
注意

詳細は、スクリプト開発向けタグライブラリのPC版UIコンポーネントの imuiTextArea を参照してください。

共通ルール

縦幅、横幅の指定方法

style=”width: 000px; height: 000px;” で指定。（000 は該当のサイズを指定してください）

cols 属性、rows 属性は使用しません。（テキストボックスと合わせます）

class を指定せずに、自動で角丸デザインが適用されます。

入力不可の場合

テキストボックスに準拠します。

（class=”imui-text-readonly” は線なし、背景なしになります）

6.3.4.3.3.3. チェックボックス（imuiCheckbox）、ラジオボタン（imuiRadio）¶

外観と基本的な HTML ソース
imuiCheckbox
1
<imart type="imuiCheckbox" label="ラベル" />
imuiRadio
1
2
3
<imart type="imuiRadio" name="radio" label="ラベル1" />
<imart type="imuiRadio" name="radio" label="ラベル2" />
<imart type="imuiRadio" name="radio" label="ラベル3" />
注意

詳細は、スクリプト開発向けタグライブラリのPC版UIコンポーネントの imuiCheckbox 、 imuiRadio を参照してください。
共通ルール

配置する際に、スペースや HTML タグによる空白の調整は不要です。

CSS で margin: 5px 5px 0px 0px; を指定しています。

選択不可の場合

テキストボックスに準拠します。

6.3.4.3.3.4. セレクトボックス（imuiSelect）¶

外観と基本的なソース
サーバサイド 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
var sampleList = [
    {
        type: "group",
        label: "グループラベル",
        list: [
            {
                label: "ラベル1",
                value: "value1"
            },
            {
                label: "ラベル2",
                value: "value2"
            },
            {
                label: "ラベル3",
                value: "value3"
            }
        ]
    },
    {
        label: "ラベル4",
        value: "value4"
    },
    {
        label: "ラベル5",
        value: "value5"
    },
    {
        label: "ラベル6",
        value: "value6"
    }
];
HTML ソース
1
<imart type="imuiSelect" list=sampleList />
注意

詳細は、スクリプト開発向けタグライブラリのPC版UIコンポーネントの imuiSelect を参照してください。
ルール

入力ヒントを記述しましょう。

表示方法1: optgroup（type: ‘group’）を使用し、リストの１行目に表示します。

体言止めにしてください。（例：ロケールを選択）

※imuiSelect をクリックし、リストを表示すると optgroup が表示されます。

表示方法2: imuiSelect の右側または近くにラベルで表示します。

基本的に体言止めとします。（例：ロケールを選択）

ユーザビリティを考慮し、敬体表示も可とします。（例：ロケールを選択してください）

※項目名で完結している場合は、不要です。

リストを生成する際のデータはソート順を指定して取得してください。

6.3.4.3.4. 入力ヒント（ placeholder ) の表示 ¶

テキストボックスやテキストエリアの入力ヒント（ placeholder ）について説明します。

ソース例
1
<imart type="imuiTextbox" placeholder="ユーザ氏名、ユーザカナを入力してください。" />
画面

ルール

placeholder （プレースホルダー）は、テキストボックス、テキストエリアの入力欄に初期値として表示される文字列です。

入力ヒントや操作ヒントとして使用します。

placeholder が非表示の状態で、入力内容がわからない場合は、項目名の表示や、ラベルでヒントを明示してください。

placeholder の未対応のブラウザもあります。

width を placeholder に合わせる必要はありません。入力桁数や画面デザイン（全体のテキストボックスの横幅）を考慮してください。

入力項目にラベルが無い、画面の構成上ラベルが付けられない場合のヒント

入力OK：「ユーザコード、ユーザ名を入力してください。」

入力項目のラベルを見ても入力値が想像しづらい場合のヒント

文章の場合は、敬体（です/ます）を推奨します。

入力OK：「画面上に表示される名前です。」「スペース区切りで単語を複数指定できます。」

ユーザに入力フォーマットを指示する場合

入力OK：「000-0000」「0000000（ハイフン不要）」「2000/10/10」「YYYY/MM/DD（例: 「2012/05/04」）」

入力NG：「YYYY-mm-dd」（エンドユーザが利用する画面では、専門用語は避けてください）

コラム

「ｘｘして下さい（実質動詞）」ではなく、「ｘｘしてください（補助動詞）」と平仮名で記述します。

6.3.4.3.5. Tab キーによる移動順序（ tabindex )¶

Tab キーによるフォーカスの移動順序を tabindex 属性について説明します。

基本的には、tabindex の指定は不要です。（Tab キーで移動は、左上から右下に流れるため）

ただし、画面の構造上、フォーカス移動の順番を指定したい場合は、tabindex を指定してください。

tab キーによる移動で、フォーカスをあてたくない部品は、tabindex=”-1” を指定してください。

6.3.4.3.6. 文字寄せ（ align ）¶

対象：テキストボックス、テキストエリア

文字の寄せは、以下のとおりとします。

種類文字寄せ

数値右寄せ

文字列左寄せ

日付／日時左寄せ

区分／コード左寄せ

文字寄せを指定するには、以下の CSS クラスを指定してください。

文字寄せ class

左寄せ不要 [3]

中央寄せ align-C

右寄せ align-R

[3]	CSSの継承により、左寄せにならない場合、align-L を指定してください。

コラム

align-C 、 align-R 、 align-L は、それぞれ UIコンポーネントのCSSモジュールです。

詳細は、以下を参照してください。

6.3.4.3.7. 必須入力の表記方法 ¶

入力項目が、必須入力かどうか判別できるようにしましょう。

以下のように HTML に記述します。

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  <table class="imui-form">
    <tbody>
      <tr>
        <th><label class="imui-required">必須項目</label></th>
        <td><input type="text" name="item1"></td>
      </tr>
      <tr>
        <th><label>項目</label></th>
        <td><input type="text" name="item2"></td>
      </tr>
    </tbody>
  </table>
画面上には、「必須項目 * 」と表示されます。
コラム

intra-mart Accel Platform では、 CSS クラスを用意しています。

以下が有効になります。
1
2
3
4
.imui-required: after {
  color: #e00;
  content: " *";
}
コラム

CSS Module List の必須入力記号「label.imui-required」にて同じ情報を公開しています。

目次

6.3.4.3. 入力フォーム¶

6.3.4.3.1. 入力フォーム全体 ¶

6.3.4.3.1.1. HTML コーディング実装例 ¶

6.3.4.3.1.2. コンテナの違い ¶

6.3.4.3.2. 入力フォーム部品 ¶

6.3.4.3.3. 入力フォーム部品の基本ルール ¶

6.3.4.3.3.1. テキストボックス（imuiTextbox）、パスワード（imuiPassword）¶

6.3.4.3.3.2. テキストエリア（imuiTextArea）¶

6.3.4.3.3.3. チェックボックス（imuiCheckbox）、ラジオボタン（imuiRadio）¶

6.3.4.3.3.4. セレクトボックス（imuiSelect）¶

6.3.4.3.4. 入力ヒント（ placeholder ) の表示 ¶

6.3.4.3.5. Tab キーによる移動順序（ tabindex )¶

6.3.4.3.6. 文字寄せ（ align ）¶

6.3.4.3.7. 必須入力の表記方法 ¶

目次

imui–form–container	imui–form–container–narrow	imui–form–container–wide
width:75%	width:60%	width:90%

名称	imart タグ	生成される HTML タグ	placeholder 属性 [1]
テキストボックス	imuiTextbox	<input type=”text” />	○
パスワード	imuiPassword	<input type=”password” />	○
テキストエリア	imuiTextArea	<textarea></textarea>	○
チェックボックス	imuiCheckbox	<input type=”checkbox” />	－
ラジオボタン	imuiRadio	<input type=”radio” />	－
セレクトボックス	imuiSelect	<select></select>	－ [2]

種類	文字寄せ
数値	右寄せ
文字列	左寄せ
日付／日時	左寄せ
区分／コード	左寄せ