ユーザインターフェース

本項では、United Front 2 の標準的なユーザインターフェースを定義しています。

フォーム

標準的なフォーム画面の構成を定義します。

フォーム画面のデモを次に示します。この画面は、何も入力せずに送信ボタンを押した後の画面をイメージしています。

　　　　　
入力欄のレイアウトを統一する
入力欄は、入力欄の意味を示す簡単な語と、エラーメッセージ、実際の入力欄、入力欄の制限事項から構成されます。 次のように構成することで、スペースを効率的に使って入力欄を表現します。この例は単一行入力欄ですが、他の入力 欄タイプでも同様です。
入力欄のレイアウト
エラーメッセージはボタン押下後、制限事項を満たしていない場合に赤く表示されます。このレイアウトであれば再描画 時にもレイアウトが崩れることなくメッセージを表示できます。フォーム画面の実装は ビュー層 で説明しています。
単一行入力欄に MAXLENGTH 属性を設定する
単一行入力欄の MAXLENGTH 属性の値に、入力値の最大文字数を設定します。これにより、ユー ザが最大文字数をオーバーして入力してしまう可能性がなくなります。同時に制限事項に最大入力文字数を明記して おきます。
入力値の最大文字数が20未満の単一行入力欄に SIZE 属性を設定する
通常単一行入力欄はブラウザのデフォルトのサイズ（20文字）で表示するため設定不要ですが、入力値の最大文字数 が20未満である場合、INPUT タグの SIZE 属性の値に最大文字数を設定し ます。
必須入力欄は先頭にアスタリスクを付ける
必須入力欄に対しては、入力欄の意味を示す語の左にアスタリスクを表示することで必須であることを明示します。
最初に入力する入力欄にフォーカスをあてる
画面最初の入力欄をフォーカスします。通常、フォーカスする入力欄に ID 属性を設定し、その値を Tiles 定義ファイルに記述して実装します。詳細は ビュー層 で説明しています。
複数行入力欄には文字数制限を設けない
複数行入力欄には文字数制限を設けないようにします。これはデータベース設計にも影響を与えます。データベースの 該当列を TEXT 型で定義することで、文字数制限のない文字列データを定義できます。
日時入力欄は yyyy/MM/dd HH:mm 形式で表現し、デフォルト値を定めておく
日時入力欄は yyyy/MM/dd HH:mm 形式で表現し、制限事項の欄にそのことを明記します。また、入力しやすいよ うにデフォルトの値をあらかじめ設定しておくとユーザに親切です。日時入力欄の最大値は16字で固定ですので、 INPUT タグの SIZE および MAXLENGTH 属性の値を16 に設定します。
日時入力欄
選択項目を LABEL タグで囲う
ラジオボタンまたはチェックボックスを使った選択項目では、 LABEL タグをつけることで対応するテ キスト部をクリックしても選択できるようにします。このとき、INPUT タグを囲むようにして LABEL タグを用いると、ブラウザでの互換性を解消し、JavaScript で制御する際にも使いやす い入力欄になります。
選択項目
ソースコードは次のようになります。LABEL タグに onclick 属性をつけれ ば、選択項目がクリックされたときの動作を JavaScript で制御できます。 
<label for="choice1"><input id="choice1" type="radio" ... /> 選択肢１</label>
送信ボタンの二重送信を防ぐ
二重送信を防ぐために、送信ボタン押下直後に INPUT タグの DISABLED 属 性に値を設定し、ボタンを無効化します。
送信ボタン
ソースコードは次のようになります。 
<input type="submit" value="送信" ...
　　　　onclick="this.disabled='disabled';this.form.submit();"/>
ボタンの VALUE 属性には適切な表現を設定する
ボタンの VALUE 属性のデフォルト値は「送信」としますが、状況によって適切な表現を設定しま す。例えば、画面遷移の途中なら「次へ」、何かを作成するフォームでは「作成する」といった表現が適切です。
複数のボタンがある場合は主ボタンを強調する
複数のボタンが存在する場合は、主ボタンを太字で強調して表示します。これにより、使う可能性の高いボタンをより選 択しやすくなります。
複数ボタン
リセットボタンは極力使わない
リセットボタンは通常使いません。リセットボタンは、使う場面がほとんどないにもかかわらず、誤って押してしまったとき のデメリットが大きいように思います。もし採用する必要がある場合も、FORM タグの ONRESET 属性を使ってリセットの確認を促すプロンプトを表示させた方が良いでしょう。
必要に応じて FIELDSET タグ使う
フォームの入力項目をいくつかのパートの分割できる場合、 FIELDSET タグを使ってグループ分け します。