前回の記事では、「フォームを意味のある HTML として書く」をテーマに記事をお届けしました。HTML フォームでは、フォームコントロール同士の関係を HTML 自身で表現できます。<fieldset> によるグループ化や、<label>・name による関連付けを適切に行うことで、意味のあるフォームを構築できるようになります。

第2回であるこんかいは、UX、すなわち「ユーザーにとって入力しやすいフォームを実現するための、属性」をテーマに、いっしょに学んでゆきましょう。主に「ブラウザによる入力補助」について見てゆきます。

autocomplete 属性

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Attributes/autocomplete

会員登録・会員情報編集ページなど、住所などの長いテキスト入力のあるフォームでは、以前の入力項目をすぐに復帰できると、とくに入力支援を必要とするユーザーにとって便利なケースがあります。その場合、autocomplete 属性が便利です。

<label>姓:
  <input name="family_name" type="text" autocomplete="family-name">
</label>

<label>名:
  <input name="given_name" type="text" autocomplete="given-name">
</label>

<label>住所:
  <input name="address" type="text" autocomplete="street-address">
</label>

フォームコントロールで autocomplete 属性を指定すると、ブラウザに対して「このフォームコントロールにはどのような情報を入力するのか」を伝えられます。ブラウザはその情報をもとに、保存しているユーザー情報などを候補として提示したり、自動入力したりできます。

逆に、その挙動が望ましくないフォームコントロールには、属性の値として off を指定することで、ブラウザに自動補完・自動入力を行わないよう伝えることができます。

autocomplete 属性に設定できる値の一覧は、こちらからご覧ください。

inputmode 属性

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes/inputmode

inputmode はテキスト入力コントロールの属性で、ソフトウェアキーボード、すなわちスマホなどで使われる「キーボード状インターフェースの種類」を指定することができます。例えば次の例でテキスト入力を試みると、数字専用のソフトウェアキーボードを表示させることができます。

<input inputmode="numeric">

「数字だけ入力したいのに、アルファベットのキーが邪魔！」というスマホユーザーのストレスを軽減できます！

注意点

なお、inputmode は入力できる文字を制限する属性ではありません。あくまで、ブラウザに「このような種類の入力を想定しています」と伝え、適切なソフトウェアキーボードを表示してもらうためのヒントです。

enterkeyhint 属性

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes/enterkeyhint

ソフトウェアキーボードの話が出たので、もう一つ。

フォームコントロールでの入力中、わざわざ「送信」ボタンをクリックするのは面倒なので、Enter キーで送信を行う……よくあることですね。特にスマホの小さな画面では、送信したいだけなのに長いフォームをスクロールはしたくないでしょう。

enterkeyhint 属性は、フォームコントロールで Enter を押したときに、どのような操作が行われるのかのヒントを、ソフトウェアキーボード上にラベルやアイコンの形で表示させることができます。

<input type="text" enterkeyhint="go">
<input type="text" enterkeyhint="done">
<input type="text" enterkeyhint="search">

enterkeyhint 属性に設定できる値の一覧は、こちらからご覧ください。

disabled と readonly の違い

これらはどちらも「フォームコントロールをユーザーが編集できない状態」に関係する属性ですが、両者には以下の違いがあります。

「Tabキーで移動できる」「フォーカスできる」ことは、アクセシビリティに関わってきます。また「送信される」のかどうかは、フォームデータの仕様にも関わってきますので、ここはしっかりと区別してください。

この違いは、次回扱う「フォームの送信」を理解するときにも重要になります。

次回は…

次回は、「送信とJavaScript編」と題して、フォームの送信にまつわる部分を、再履修してゆく予定です。お楽しみに！