入力の支援

入力はユーザに負荷をかける操作である。そのため、支援が必要である。入力支援として主に以下の3つの方法がある。

入力を求めないこと
入力を自動補完すること
入力しやすいフォームコントロールにすること

それでは具体例とともに改善方法を見ていく。

必要以上に入力を求めている

ユーザに対して必要以上に入力を求めている場合がある。

一つのフォームに対してフォームコントロールが多すぎる
システム上重要でないフォームコントロール
直ちに入力が必要でない項目

入力に時間が多くかかるユーザにとってこれらのフォームは深刻な問題である。

改善策 -入力項目を最小限に-

まず、入力が必要かどうか検討すべき。不必要な項目は削除すべきであり、後から入力するので良ければ後回しにすべき。
また、必須項目の内容も検討し、出来るだけ任意項目にするべきである。そうすることでユーザ（特に入力に時間のかかる方）が大きな恩恵を受けられる。

一つの入力値を表すフォームコントロールが分割されている

一つの入力値を表すフォームコントロールが分割されている場合がある。

姓と名
メールアドレスの@の前後
電話番号の市外局番・市内局番・加入者番号
クレジットカードのハイフンで区切られた4つのフォーム

これらのような事例があると、様々な場面で障害が発生する。マシンリーダビリティ的視点ではブラウザによる自動補完が効きにくくなる。autoComplete属性が正常に働かないため、自動補完が効きにくい。また、ユーザ視点では、コピー&ペーストをすることが難しくなる。また、ミドルネームを入力するときに姓と名のどちらに含めるべきか分からない。

改善策 -一つの入力値を表すフォームコントロールをまとめる-

以下の入力値を表すフォームコントロールは一つにまとめて、autoComplete属性をつける。

名前
メールアドレス
電話番号
クレジットカード番号

下に実装例を示す

<form action="">
    <div>
        <label for="name">
            名前: <br/>
            <input type="text" id="name" autoComplete="name" name="name"/>
        </label>
    </div>
    <div>
        <label for="email">
            e-mail: <br/>
            <input type="email" id="email" autoComplete="email" name="email"/>
        </label>
    </div>
    <div>
        <label for="tel">
            電話番号: <br/>
            <input type="text" id="tel" autoComplete="tel" name="tel"/>
        </label>
    </div>
    <div>
        <label for="ccnumber">
            クレジットカード番号: <br/>
            <input type="text" id="ccnumber" autoComplete="cc-number" name="ccnumber"/>
        </label>
    </div>
</form>
>

ブラウザによる自動補完が使えない

多くのブラウザはユーザが過去に入力した情報を自動補完する。さらに、周辺の入力欄に対しても自動で入力してくれる。先に自動補完が機能しない悪い例を示す。

悪い例: 自動補完が機能しないフォーム

下に悪い実装例を示す

<form>
    <div>
        <label>
            クレジットカード名義:<input type="text" name="credit-name"/>
        </label>
    </div>
    <div>
        <label>
            クレジットカード番号:<input type="text" name="credit-number"/>
        </label>
    </div>
</form>
>

入力値が自動補完されないと以下のような負荷がかかる。

ユーザが入力値を思い出す負荷
手入力する負荷

改善策 -自動補完できるようにマークアップする-

先ほど同様にautoComplete属性を付ける。ただし、以下の2点に気を付ける。

フォームコントロールをform要素で囲う
autoComplete属性とともにname属性にも適切な値を設定する必要がある

<form>
    <div>
        <label for="name">
            名前: <br/>
            <input type="text" id="name" autoComplete="name" name="name"/>
        </label>
    </div>
    <div>
        <label for="email">
            メールアドレス: <br/>
            <input type="email" id="email" autoComplete="email" name="email"/>
        </label>
    </div>
    <div>
        <label for="username">
            ユーザー名またはアカウント名: <br/>
            <input type="text" id="username" autoComplete="username" name="username"/>
        </label>
    </div>
    <div>
        <label for="new-password">
            新しいパスワード: <br/>
            <input type="password" id="new-password" autoComplete="new-password" name="new-password"/>
        </label>
    </div>
    <div>
        <label for="current-password">
            ユーザーの現在のパスワード: <br/>
            <input type="password" id="current-password" autoComplete="current-password" name="current-password"/>
        </label>
    </div>
    <div>
        <label for="one-time-code">
            ユーザー自身を確認するために使われるワンタイムコード: <br/>
            <input type="text" id="one-time-code" autoComplete="one-time-code" name="one-time-code"/>
        </label>
    </div>
    <div>
        <label for="organization-title">
            職名や組織内の肩書: <br/>
            <input type="text" id="organization-title" autoComplete="organization-title" name="organization-title"/>
        </label>
    </div>
    <div>
        <label for="organization">
            企業または団体の名前: <br/>
            <input type="text" id="organization" autoComplete="organization" name="organization"/>
        </label>
    </div>
    <div>
        <label for="street-address">
            住所: <br/>
            <input type="text" id="street-address" autoComplete="street-address" name="street-address"/>
        </label>
    </div>
    <div>
        <label for="address-level1">
            住所がある都道府県: <br/>
            <input type="text" id="address-level1" autoComplete="address-level1" name="address-level1"/>
        </label>
    </div>
    <div>
        <label for="address-level2">
            市町村や、住所のあるその他の地域: <br/>
            <input type="text" id="address-level2" autoComplete="address-level2" name="address-level2"/>
        </label>
    </div>
    <div>
        <label for="address-level3">
            3段階の行政レベルがある住所において、3番目の行政レベル: <br/>
            <input type="text" id="address-level3" autoComplete="address-level3" name="address-level3"/>
        </label>
    </div>
    <div>
        <label for="address-level4">
            住所が4段階まである場合のもっとも細かい行政レベル: <br/>
            <input type="text" id="address-level4" autoComplete="address-level4" name="address-level4"/>
        </label>
    </div>
    <div>
        <label for="country">
            国コード: <br/>
            <input type="text" id="country" autoComplete="country" name="country"/>
        </label>
    </div>
    <div>
        <label for="country-name">
            国名: <br/>
            <input type="text" id="country-name" autoComplete="country-name" name="country-name"/>
        </label>
    </div>
    <div>
        <label for="postal-code">
            郵便番号: <br/>
            <input type="text" id="postal-code" autoComplete="postal-code" name="postal-code"/>
        </label>
    </div>
    <div>
        <label for="cc-name">
            クレジットカード名義: <br/>
            <input type="text" id="cc-name" autoComplete="cc-name" name="cc-name"/>
        </label>
    </div>
    <div>
        <label for="cc-number">
            クレジットカード番号: <br/>
            <input type="text" id="cc-number" autoComplete="cc-number" name="cc-number"/>
        </label>
    </div>
    <div>
        <label for="cc-exp">
            支払手段の有効期限: <br/>
            <input type="text" id="cc-exp" autoComplete="cc-exp" name="cc-exp"/>
        </label>
    </div>
    <div>
        <label for="bday">
            生年月日: <br/>
            <input type="text" id="bday" autoComplete="bday" name="bday"/>
        </label>
    </div>
    <div>
        <label for="sex">
            性別: <br/>
            <input type="text" id="sex" autoComplete="sex" name="sex"/>
        </label>
    </div>
    <div>
        <label for="tel">
            国番号を含む、完全な電話番号: <br/>
            <input type="tel" id="tel" autoComplete="tel" name="tel"/>
        </label>
    </div>
    <div>
        <label for="url">
            URL: <br/>
            <input type="url" id="url" name="url"/>
        </label>
    </div>
    <div>
        <label for="photo">
            フォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像のURL:<input type="text" id="photo" autoComplete="photo" name="photo"/>
        </label>
    </div>
</form>
>

名前:

メールアドレス:

ユーザー名またはアカウント名:

新しいパスワード:

ユーザーの現在のパスワード:

ユーザー自身を確認するために使われるワンタイムコード:

職名や組織内の肩書:

企業または団体の名前:

住所:

住所がある都道府県:

市町村や、住所のあるその他の地域:

3段階の行政レベルがある住所において、3番目の行政レベル:

住所が4段階まである場合のもっとも細かい行政レベル:

国コード:

国名:

郵便番号:

クレジットカード名義:

クレジットカード番号:

支払手段の有効期限:

生年月日:

性別:

国番号を含む、完全な電話番号:

URL:

フォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像のURL:

入力値の種類に対して適切な入力タイプが選択されていない

フォームコントロールには入力値の種類によって入力タイプに応じたUIを表示できる。入力するときに本来許可されない種類の入力値が入力出来たり、数値の入力が行いやすくなるため、適切な入力タイプを選ぶ必要がある。

改善策 -入力値の種類に応じてタイプを指定する-

入力値の種類に応じてタイプを指定することで入力のしやすさを改善できる．以下がタイプ指定の例である．

<form>
    <div>
        <label for="button">
            button:<input type="button" id="button" style="width:3rem"/>
        </label>
    </div>
    <div>
        <label for="checkbox">
            checkbox:<input type="checkbox" id="checkbox"/>
        </label>
    </div>
    <div>
        <label for="date">
            date:<input type="date" id="date"/>
        </label>
    </div>
    <div>
        <label for="datetime-local">
            datetime-local:<input type="datetime-local" id="datetime-local"/>
        </label>
    </div>
    <div>
        <label for="email">
            email:<input type="email" id="email"/>
        </label>
    </div>
    <div>
        <label for="file">
            file:<input type="file" id="file"/>
        </label>
    </div>
    <div>
        <label for="hidden">
            hidden:<input type="hidden" id="hidden"/>
        </label>
    </div>
    <div>
        <label for="image">
            image:<input type="image" id="image"/>
        </label>
    </div>
    <div>
        <label for="month">
            month:<input type="month" id="month"/>
        </label>
    </div>
    <div>
        <label for="number">
            number:<input type="number" id="number"/>
        </label>
    </div>
    <div>
        <label for="password">
            password:<input type="password" id="password"/>
        </label>
    </div>
    <div>
        <label for="radio">
            radio:<input type="radio" id="radio"/>
        </label>
    </div>
    <div>
        <label for="range">
            range:<input type="range" id="range"/>
        </label>
    </div>
    <div>
        <label for="reset">
            reset:<input type="reset" id="reset"/>
        </label>
    </div>
    <div>
        <label for="submit">
            submit:<input type="submit" id="submit"/>
        </label>
    </div>
    <div>
        <label for="text">
            text:<input type="text" id="text"/>
        </label>
    </div>
    <div>
        <label for="time">
            time:<input type="time" id="time"/>
        </label>
    </div>
    <div>
        <label for="url">
            url:<input type="url" id="url"/>
        </label>
    </div>
    <div>
        <label for="week">
            week:<input type="week" id="week"/>
        </label>
    </div>
</form>
>

ここからはまにあいませんでした。。。。。。

<div>
    <form>
        <div>
            <label for="inputTypeText">
            text</label>
            <br/>
            <input type="text" id="inputTypeText"/>
        </div>
        <div>
            <label for="inputTypeEmail">
            email</label>
            <br/>
            <input type="email" id="inputTypeEmail"/>
        </div>
        <div>
            <label for="inputTypeNumber">
            numeric</label>
            <br/>
            <input type="number" id="inputTypeNumber"/>
        </div>
        <div>
            <label for="inputTypeSearch">
            search</label>
            <br/>
            <input type="search" id="inputTypeSearch"/>
        </div>
        <div>
            <label for="inputTypeTel">
            tel</label>
            <br/>
            <input type="tel" id="inputTypeTel"/>
        </div>
        <div>
            <label for="inputTypeUrl">
            url</label>
            <br/>
            <input type="url" id="inputTypeUrl"/>
        </div>
    </form>
</div>
>

<div>
    <form>
        <div>
            <label for="inputModeDecimal">
            decimal</label>
            <br/>
            <input id="inputModeDecimal" inputMode="decimal"/>
        </div>
        <div>
            <label for="inputModeEmail">
            email</label>
            <br/>
            <input id="inputModeEmail" inputMode="email"/>
        </div>
        <div>
            <label for="inputModeNumeric">
            numeric</label>
            <br/>
            <input id="inputModeNumeric" inputMode="numeric"/>
        </div>
        <div>
            <label for="inputModeSearch">
            search</label>
            <br/>
            <input id="inputModeSearch" inputMode="search"/>
        </div>
        <div>
            <label for="inputModeTel">
            tel</label>
            <br/>
            <input id="inputModeTel" inputMode="tel"/>
        </div>
        <div>
            <label for="inputModeUrl">
            url</label>
            <br/>
            <input id="inputModeUrl" inputMode="url"/>
        </div>
    </form>
</div>
>

<div>
    <input type="range" min="10" max="100" step="10"/>
</div>
>

選択肢のある入力値に対して適切なフォームコントロールが選択されていない

入力値が限定された値のうちの一つであるにもかかわらず，自由入力形式のフォームコントロールが使われている場合がある．例えば以下のような例がある．

<label>
    商品の色（青・緑・黄・赤のいずれかを入力してください）<input type="text"/>
</label>
>

商品の色（青・緑・黄・赤のいずれかを入力してください）

上記の例のように値を自由に入力出来てしまうと想定された選択肢以外の値を入力出来たり，入力ミスが起きたりする．視線の動きや頭部の動きによって操作を行う運動障害のあるユーザにとっては手入力が大きなコストになる．障害のあるユーザを含めて多くのユーザが正しい選択肢を選びやすくなるように適切なフォームコントロールを選ぶ必要がある．

<div>
    <label>
        都道府県<select>
            <option value="" selected="">
            未選択</option>
            <option value="北海道">
            北海道</option>
            <option value="青県森">
            青森県</option>
            <option value="秋田県">
            秋田県</option>
            <option value="山形県">
            山形県</option>
            <option value="岩手県">
            岩手県</option>
            <option value="福島県">
            福島県</option>
        </select>
    </label>
</div>
>

都道府県

<div>
    <label>
        都道府県<input type="text" list="prefecture-list"/>
        <datalist id="prefecture-list">
            <option value="北海道">
            北海道</option>
            <option value="青県森">
            青森県</option>
            <option value="秋田県">
            秋田県</option>
            <option value="山形県">
            山形県</option>
            <option value="岩手県">
            岩手県</option>
            <option value="福島県">
            福島県</option>
        </datalist>
    </label>
</div>
>

都道府県