<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document PUBLIC
  "-//Apache Software Foundation//DTD XDOC 1.0//EN"
  "http://maven.apache.org/dtd/xdoc_1_0.dtd">

<document>
  <properties>
    <title>フォームサンプル - Form Sample</title>
    <author email="kurokkie@users.sourceforge.jp">kurokkie</author>
  </properties>
  <body>
    <section name="ユーザインターフェース">
      <p>
本項では、United Front 2 の標準的なユーザインターフェースを定義しています。
      </p>
    </section>
    <section name="フォーム">
      <p>
標準的なフォーム画面の構成を定義します。
      </p>
      <p>
フォーム画面のデモを次に示します。この画面は、何も入力せずに送信ボタンを押した後の画面をイメージしています。
      </p>
　　　　　<iframe src="html/ui/sample.html" height="650" width="500" frameborder="0" style="border: none"></iframe>
      <dl>

        <dt>入力欄のレイアウトを統一する</dt>
        <dd>
入力欄は、入力欄の意味を示す簡単な語と、エラーメッセージ、実際の入力欄、入力欄の制限事項から構成されます。
次のように構成することで、スペースを効率的に使って入力欄を表現します。この例は単一行入力欄ですが、他の入力
欄タイプでも同様です。
<div class="source" style="margin-top: 0.5em; margin-bottom: 0.5em;"><img src="images/inputText.png" alt="入力欄のレイアウト"/></div>
エラーメッセージはボタン押下後、制限事項を満たしていない場合に赤く表示されます。このレイアウトであれば再描画
時にもレイアウトが崩れることなくメッセージを表示できます。フォーム画面の実装は
<a href="view.html">ビュー層</a> で説明しています。
        </dd>

        <dt>単一行入力欄に <code>MAXLENGTH</code> 属性を設定する</dt>
        <dd>
単一行入力欄の <code>MAXLENGTH</code> 属性の値に、入力値の最大文字数を設定します。これにより、ユー
ザが最大文字数をオーバーして入力してしまう可能性がなくなります。同時に制限事項に最大入力文字数を明記して
おきます。
        </dd>

        <dt>入力値の最大文字数が20未満の単一行入力欄に <code>SIZE</code> 属性を設定する</dt>
        <dd>
通常単一行入力欄はブラウザのデフォルトのサイズ（20文字）で表示するため設定不要ですが、入力値の最大文字数
が20未満である場合、<code>INPUT</code> タグの <code>SIZE</code> 属性の値に最大文字数を設定し
ます。
        </dd>

        <dt>必須入力欄は先頭にアスタリスクを付ける</dt>
        <dd>
必須入力欄に対しては、入力欄の意味を示す語の左にアスタリスクを表示することで必須であることを明示します。
        </dd>

        <dt>最初に入力する入力欄にフォーカスをあてる</dt>
        <dd>
画面最初の入力欄をフォーカスします。通常、フォーカスする入力欄に <code>ID</code> 属性を設定し、その値を
Tiles 定義ファイルに記述して実装します。詳細は <a href="view.html">ビュー層</a> で説明しています。
        </dd>

        <dt>複数行入力欄には文字数制限を設けない</dt>
        <dd>
複数行入力欄には文字数制限を設けないようにします。これはデータベース設計にも影響を与えます。データベースの
該当列を TEXT 型で定義することで、文字数制限のない文字列データを定義できます。
        </dd>

        <dt>日時入力欄は yyyy/MM/dd HH:mm 形式で表現し、デフォルト値を定めておく</dt>
        <dd>
日時入力欄は yyyy/MM/dd HH:mm 形式で表現し、制限事項の欄にそのことを明記します。また、入力しやすいよ
うにデフォルトの値をあらかじめ設定しておくとユーザに親切です。日時入力欄の最大値は16字で固定ですので、
<code>INPUT</code> タグの <code>SIZE</code> および <code>MAXLENGTH</code> 属性の値を16
に設定します。
<div class="source" style="margin-top: 0.5em;"><img src="images/inputText_date.png" alt="日時入力欄"/></div>
        </dd>

        <dt>選択項目を <code>LABEL</code> タグで囲う</dt>
        <dd>
ラジオボタンまたはチェックボックスを使った選択項目では、 <code>LABEL</code> タグをつけることで対応するテ
キスト部をクリックしても選択できるようにします。このとき、<code>INPUT</code> タグを囲むようにして
<code>LABEL</code> タグを用いると、ブラウザでの互換性を解消し、JavaScript で制御する際にも使いやす
い入力欄になります。
<div class="source" style="margin-top: 0.5em; margin-bottom: 0.5em;"><img src="images/inputRadio.png" alt="選択項目"/></div>
ソースコードは次のようになります。<code>LABEL</code> タグに <code>onclick</code> 属性をつけれ
ば、選択項目がクリックされたときの動作を JavaScript で制御できます。
<pre name="code" class="html">
&lt;label for="choice1"&gt;&lt;input id="choice1" type="radio" ... /&gt; 選択肢１&lt;/label&gt;
</pre>
        </dd>

        <dt>送信ボタンの二重送信を防ぐ</dt>
        <dd>
二重送信を防ぐために、送信ボタン押下直後に <code>INPUT</code> タグの <code>DISABLED</code> 属
性に値を設定し、ボタンを無効化します。
<div style="margin-top: 0.5em; margin-bottom: 0.5em;"><img src="images/inputSubmit.png" alt="送信ボタン"/></div>
ソースコードは次のようになります。
<pre name="code" class="html">
&lt;input type="submit" value="送信" ...
　　　　onclick="this.disabled='disabled';this.form.submit();"/&gt;
</pre>
        </dd>

        <dt>ボタンの <code>VALUE</code> 属性には適切な表現を設定する</dt>
        <dd>
ボタンの <code>VALUE</code> 属性のデフォルト値は「送信」としますが、状況によって適切な表現を設定しま
す。例えば、画面遷移の途中なら「次へ」、何かを作成するフォームでは「作成する」といった表現が適切です。
        </dd>

        <dt>複数のボタンがある場合は主ボタンを強調する</dt>
        <dd>
複数のボタンが存在する場合は、主ボタンを太字で強調して表示します。これにより、使う可能性の高いボタンをより選
択しやすくなります。
<div class="source" style="margin-top: 0.5em;"><img src="images/multipleButton.png" alt="複数ボタン"/></div>
        </dd>

        <dt>リセットボタンは極力使わない</dt>
        <dd>
リセットボタンは通常使いません。リセットボタンは、使う場面がほとんどないにもかかわらず、誤って押してしまったとき
のデメリットが大きいように思います。もし採用する必要がある場合も、<code>FORM</code> タグの
<code>ONRESET</code> 属性を使ってリセットの確認を促すプロンプトを表示させた方が良いでしょう。
        </dd>

        <dt>必要に応じて <code>FIELDSET</code> タグ使う</dt>
        <dd>
フォームの入力項目をいくつかのパートの分割できる場合、 <code>FIELDSET</code> タグを使ってグループ分け
します。
        </dd>

      </dl>

<script type="text/javascript" src="js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

<script type="text/javascript">
var ID='100354378-ui_form';
var AD=1;
var FRAME=0;
</script>
<script src="http://j1.ax.xrea.com/l.j?id=100354378" type="text/javascript"></script>
<noscript>
<a href="http://w1.ax.xrea.com/c.f?id=100354378" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=100354378&amp;url=X" alt="AX" border="0"/></a>
</noscript>

    </section>
  </body>
</document>
