入力フォーム指針¶

入力フォームの部品（テキストボックスやセレクトボックスなど）を配置する上での画面開発規約を下記に記します。

ボタンについては、ボタン指針 を参照してください。

項目

入力フォーム全体
入力フォーム部品一覧
テキストボックス（imuiTextbox）、パスワード（imuiPassword）
テキストエリア（imuiTextArea）
チェックボックス（imuiCheckbox）、ラジオボタン（imuiRadio）
セレクトボックス（imuiSelect）
placeholder の表示指針
tabindex
文字寄せ（align）
エンターキー押下時のフォームの動作
- form のサブミット方法
- エンターキー押下時にサブミットさせる
必須入力の表記方法

入力フォーム全体 ¶

基本指針として以下を推奨します。

登録／更新／参照画面／一覧画面：全体を以下のいずれかで囲んでください。

imui-form-container 画面 75%

imui-form-container-narrow 画面 60%

imui-form-container-wide 画面 90%

指定する表の class は、表を参照してください。

入力フォーム部品一覧 ¶

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

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

パスワード 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番目に、入力ヒントを体言止めで記述してください。（例：ロケールを選択）

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

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

autofocus 属性は、任意指定です。画面表示時に1番最初に入力してほしい部品に指定します。

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

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

横幅の指定方法

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

size 属性は使用しません。

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

maxlength 属性を指定します。

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

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

入力不可の場合（１）

readonly 属性を指定します。

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

入力不可の場合（２）

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

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

入力不可の場合（３）

disabled 属性を指定します。

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

コラム

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

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

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

テキストエリア（imuiTextArea）¶

縦幅、横幅の指定方法

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

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

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

入力不可の場合

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

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

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

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

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

選択不可の場合

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

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

入力ヒントを記述してください。

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

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

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

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

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

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

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

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

placeholder の表示指針 ¶

テキストボックスやテキストエリアの placeholder に関する指針をまとめます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tabindex ¶

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

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

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

文字寄せ（align）¶

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

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

種類文字寄せ

数値右寄せ

文字列左寄せ

日付／日時左寄せ

区分／コード左寄せ

以下のスタイルシートを指定します。

文字寄せ class

左寄せ不要

中央寄せ align-C

右寄せ align-R

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

文字寄せ	class
左寄せ	不要
中央寄せ	align-C
右寄せ	align-R

エンターキー押下時のフォームの動作 ¶

form のサブミット方法 ¶

form のサブミットを行うにはいくつかの方法がありますが、このガイドラインでは以下の方法でサブミットすることとします。

input type=”button” を配置し、

click イベントで form.submit() を実行する

imuiAjaxSend を実行する

imuiAjaxSubmit を実行する

input type=”submit” は利用しないようにしてください。理由は以下の通りです。

エンターキー押下でサブミットされる
imuiConfirm を呼び出そうとしても、サブミットが先に実行されてしまい、確認ダイアログが表示されない

もし input type=”submit” を利用する際には

<form onsubmit="return false;">
  ...
</form>

のように、onsubmit 属性で return false; を記述してください。

エンターキー押下時にサブミットさせる ¶

検索画面などでエンターキー押下時にサブミットさせたいときは、input type=”submit” を利用してください。ただし上述の通り、imuiConfirm を呼び出そうとしても確認ダイアログが表示されないことに注意して下さい。

<form ...>
  <input type="submit"/>
</form>

必須入力の表記方法 ¶

以下のように HTML に記述します。
HTML
<label class="imui-required">タイトル</label>
と記述すると、画面上には、「タイトル * 」と表示されます。
CSS（共通のスタイルとして以下が設定済です。）
.imui-required: after {
  color: #e00;
  content: " *";
}

imui-form-container	画面 75%
imui-form-container-narrow	画面 60%
imui-form-container-wide	画面 90%