フォームの基本

よくできたフォームでは、入力欄の横の「Email」という語をクリックすると、カーソルが入力欄に移ります。この小さな工夫は、label要素がきちんとはたらいている証拠です。

フォームのはたらき

検索ボックス、登録ページ、購入画面はどれもフォームです。<form> 要素が入力部品をまとめ、訪問者が送信すると、ブラウザーは各部品の name と値の組を、フォームの action 属性のアドレスに送ります。method 属性は送り方を示します。get はデータをアドレスに入れるので、ブックマークしたくなる検索に向いています。post はリクエストの本体に入れて送るので、注文のようにデータを変えるものに向いています。HTMLはフォームをつくり、届いたものをどうするかはサーバーのプログラムが決めます。

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

どの入力部品にもラベルを

<label> 要素は入力部品に名前をつけます。二つを結びつけるには、inputに id を、labelに同じ値の for 属性をつけるか、inputをlabelの中に入れます。結びつけると二つのことが起こります。入力欄にフォーカスが移ったときスクリーンリーダーがラベルを読むので、利用者にはただの「テキスト入力」ではなく「Email、テキスト入力」と聞こえます。また、ラベルをクリックすると入力欄にフォーカスが移ったりチェックボックスにチェックが入ったりするので、だれにとっても、特にスマートフォンを使う人にとって、押せる範囲が広がります。placeholder（入力欄の中の灰色のヒント文字）はラベルではありません。入力を始めるとすぐに消え、コントラストが低いことが多く、無視する支援技術もあります。

入力の種類

<input> の type 属性で入力部品が変わります。text は初期設定の一行の入力欄です。email、tel、url は見た目は似ていますが、スマートフォンではそれに合ったキーボードを表示し、ブラウザーはメールアドレスの形が正しいかを確かめます。number は数字を受けつけ、min と max を指定できます。password は入力した文字を隠し、date はカレンダーを表示し、checkbox と radio はチェックを入れる部品です。長い文章には <textarea> を、一覧から選ぶには中に <option> 要素を入れた <select> を使います。

選択肢をまとめる

一つの質問に属するラジオボタンは同じ name をもち、一度に一つしか選べません。グループを <fieldset> で囲み、質問を <legend> に入れましょう。するとスクリーンリーダーは、各選択肢といっしょに質問も読み上げます。「Loaf size、Small、ラジオボタン、1/2」のようにです。それでも、ラジオボタン一つ一つにラベルをつけます。

ボタンと組みこみのチェック

フォームの中の <button> は、初期設定ではフォームを送信します。type="submit" と書けばそれがはっきりし、type="button" と書けば、JavaScriptが役割を与えるまで何もしないボタンになります。送信する前に、ブラウザーが入力欄を確かめてくれます。required は入力欄が空ならフォームを止め、type="email" は@のない文字を受けつけず、minlength、min、max は制限を決めます。こうしたチェックは訪問者が早めにまちがいを直すのに役立ちますが、訪問者のブラウザーで動くので回避できます。そのため、サーバーでもう一度データを確かめなければなりません。autocomplete 属性に email や name などの値をつけると、ブラウザーが保存された情報を入力できるので、だれにとっても入力の手間が省け、とくに運動や記憶に困難のある人の助けになります。