6.3.4.3. 入力フォーム¶
本章では、入力フォームの部品(テキストボックスやセレクトボックスなど)について説明します。
項目
6.3.4.3.1. 入力フォーム全体¶
以下を推奨します。登録/更新/参照画面/一覧画面は、以下のコンテナいずれかで囲みます。
imui–form–container imui–form–container–narrow imui–form–container–wide
6.3.4.3.1.1. HTML コーディング 実装例¶
1 2 3 <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 を指定せずに、自動で角丸デザインが適用されます。 入力不可の場合(1)readonly 属性を指定します。例:フローティングカレンダーからテキストボックスに入力します。(直接編集は不可です) 入力不可の場合(2)readonly 属性を指定し、class=”imui-text-readonly” を指定します。(class=”imui-text-readonly” は線なし、背景なしになります)例:登録画面で入力可能だった項目を参照画面、編集画面で表示します。 入力不可の場合(3)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" />注意
- 共通ルール
配置する際に、スペースや 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’)を使用し、リストの1行目に表示します。体言止めにしてください。(例:ロケールを選択)※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」(エンドユーザが利用する画面では、専門用語は避けてください)コラム
「xxして下さい(実質動詞)」ではなく、「xxしてください(補助動詞)」と平仮名で記述します。
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」 にて同じ情報を公開しています。