直前の記事では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からある全てのブラウザーで利用できる、オリジナルのフォームコントロールを見ていきます。
前提条件: | 基本的なコンピューターリテラシーと、基本的な HTML の理解。 |
---|---|
目的: | データを収集するためにブラウザーで使用できるネイティブフォームウィジェットの種類と、それらを HTML を使用して実装する方法を理解する。 |
<form>
, <fieldset>
, <legend>
, <textarea>
, <label>
, <button>
, <input>
といったフォーム要素については既に見てきました。この記事では次を網羅します:
- button, checkbox, file, hidden, image, password, radio, reset, submit, and textといったよくある入力タイプ
- すべてのフォームコントロールに共通する属性のいくつか
注: この記事で説明されている機能のほとんどは、ブラウザー間で幅広くサポートされています。これに対する例外に注意しましょう。より正確な詳細が必要な場合は、HTML フォーム要素のリファレンス、特に広範囲にわたる <input> 型の参照を参照してください。
テキスト入力フィールド
テキスト 入力 フィールドは最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。
注: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使ってリッチエディット (太字、斜体など) を実行することはできません。見かけるすべてのリッチテキストエディタは、HTML、CSS、および JavaScript で作成されたカスタムウィジェットです。
すべてのテキストフィールドに共通する動作があります:
readonly
(ユーザーは入力値を変更できないが他のフォーム値とともに送信される) あるいはdisabled
(入力値は編集できず、値も他のフォームデータとともに送られません) とすることができます。placeholder
を設定することができます。これは、ボックスの目的を簡単に説明する、ボックス内に表示されるテキストです。size
(ボックスの物理的なサイズ) やmaxlength
(ボックスに入力できる最大文字数) による制限が可能です。- ブラウザーがサポートしていれば、(
spellcheck
属性を用いて) スペルチェックの恩恵を受けられます。
単一行のテキストフィールド
単一行のテキストフィールドは、type
属性値が text
に設定されている <input>
要素を使用するか、type
属性を指定しない場合( text
がデフォルト値になり)に作成されます。type
属性に指定した値がブラウザーに認識されない場合 (たとえば type="color"
を指定してブラウザーがネイティブの色ピッカーをサポートしていない場合)、この属性の値のテキストは代替値になります。
注: GitHub の single-line-text-fields.html に、すべての単一行テキストフィールドタイプの例があります (こちらも参照してください)。
これは基本的な単一行のテキストフィールドの例です。
<input type="text" id="comment" name="comment" value="I'm a text field">
単一行のテキストフィールドは、ひとつだけ厳密な制約があります: 改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。
下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたテキスト入力を示しています。
HTML5 では type
属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり <input>
要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。
パスワードフィールド
このタイプのフィールドは、type
属性の値 password
を使用して設定できます:
<input type="password" id="pwd" name="pwd">
password
の値は入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。
これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティには良くありません — 悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。ユーザーからこれを保護するためにはフォームを含むあらゆるページをセキュア通信でホストし (つまり https://
... アドレスにて) 、データ送信前に暗号化することです。
最近のブラウザーは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザーが安全でないフォームを使用しないように警告を実装しています。Firefox が実装しているものの詳細については、安全でないパスワードをご覧ください。
隠しコンテンツ
もう1つのオリジナルなテキストコントロールは hidden
入力タイプです。これは他のフォームデータとともにサーバー送信されるがユーザーからは見えないデータを持つのに使われています — 例えば命令を発行するときにサーバーにタイムスタンプを送りたい場合。これは隠れているので、ユーザーが見ることも、意図せずに値を編集することもなく、フォーカスを得ることもないしスクリーンリーダーが気づくこともありません。
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
このような要素を作成する場合は、name
属性と value
属性の設定が必要です。この値は JavaScript にて動的にセットできます。hidden
入力タイプには関連したラベルはありません。
その他のテキストタイプ、search, url, とtel, は HTML5 で追加されました。これは次のチュートリアルの「HTML5 入力タイプ」にて網羅されます。
チェック可能アイテム:チェックボックスとラジオボタン
チェック可能アイテムは、そのものや、関連したラベルをクリックすることで状態を変更できるコントロールです。チェック可能アイテムは 2 種類あります: チェックボックスとラジオボタンです。どちらもデフォルトでチェックするかを示すために、checked
属性を使用します。
これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。ほとんどのフォームウィジェットではフォームを送信すると、name
属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。チェックされていない場合は、name も含めて何も送信しません。チェックされているが値がない場合、name が on という値で送信されます。
注: このセクションの例は、checkable-items.html として GitHub にあります (こちらも参照してください)。
最大限のユーザービリティ/アクセシビリティを実現するために、関連項目の各リストを <fieldset>
で囲み、リストの全体的な説明を示す <legend>
で囲むことをお勧めします。<label>
/<input>
要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。関連した <label>
はラジオボタンやチェックボックスの直後に、<legend>
の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。
チェックボックス
チェックボックスは、type
属性を checkbox に設定した <input>
要素で作成します。
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
checked
属性を含んだチェックボックスはページ読み込み時に自動的にチェックされます。チェックボックスまたはその関連ラベルをチェックするとチェックボックスのオン/オフがトグルされます。
下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたチェックボックスを示しています。
ラジオボタン
ラジオボタンは、type
属性を radio
に設定した <input>
要素で作成します。
<input type="radio" checked id="soup" name="meal">
いくつかのラジオボタンをまとめることができます。name
属性で同じ値を共有すると、それらのラジオボタンは同じボタングループに属するとみなされます。グループ内でボタンは同時に 1 つだけチェックできます。つまり、あるラジオボタンをチェックすると、他のラジオボタンは自動的にチェックが外れます。フォームを送信するときは、チェックしているラジオボタンのみの値を送信します。何もチェックしていない場合はラジオボタンの集まり全体が未知の状態であるとみなし、フォーム送信時は値を送信しません。
<fieldset>
<legend>What is your favorite meal?</legend>
<ul>
<li>
<label for="soup">Soup</label>
<input type="radio" checked id="soup" name="meal" value="soup">
</li>
<li>
<label for="curry">Curry</label>
<input type="radio" id="curry" name="meal" value="curry">
</li>
<li>
<label for="pizza">Pizza</label>
<input type="radio" id="pizza" name="meal" value="pizza">
</li>
</ul>
</fieldset>
下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、チェックなしとチェックされたラジオボタン、フォーカスされた、また無効でチェックなしとチェックされたラジオボタンを示しています。
ボタン
ラジオボタンはその名に反して、実際のボタンではありません。実際のボタンを見てみましょう! ボタンを生成するには、3 種類の入力タイプがあります:
- 送信 (Submit)
- フォームデータをサーバーに送信します。
<button>
要素の場合、type
属性 (またはtype
の無効な値) を省略すると、送信ボタンが表示されます。 - リセット (Reset)
- すべてのフォームウィジェットをデフォルト値にリセットします。
button
- 自動的な効果のないボタンで、JavaScript コードを用いてカスタマイズできるもの。
それから、<button>
要素それ自体もあります。これは値が submit
、reset
または button
である type
属性をとり、上記の 3 つの <input>
種別を模倣できます。この 2 つの主な違いは実際の <button>
要素の方が多くのスタイル設定できることです。
注: image
入力タイプもボタンとしてレンダリングされます。それはあとで見ます。
注: このセクションの例は button-examples.html として GitHub にあります (こちらも参照してください)。
ボタンは <button>
要素か <input>
要素で作成します。どの種類のボタンを表示するかを指定するのは、type
属性の値です:
送信
<button type="submit">
This a <br><strong>submit button</strong>
</button>
<input type="submit" value="This is a submit button">
リセット
<button type="reset">
This a <br><strong>reset button</strong>
</button>
<input type="reset" value="This is a reset button">
無名
<button type="button">
This an <br><strong>anonymous button</strong>
</button>
<input type="button" value="This is an anonymous button">
ボタンは <button>
要素でも <input>
要素でも、常に同じ動作になります。上記のサンプルでわかるように、<button>
要素はラベルとして HTML コンテンツを使用できて、これは開始と終了の<button>
タグの間に挿入されます。一方で<input>
要素は空要素です。つまり value
属性の中にラベルが挿入され、このためプレーンテキストのコンテンツのみ使用できます。
下記の例は macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効なボタンを示しています。
画像ボタン
画像ボタンコントロールは <img>
要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン (前述) のように動作します。
画像ボタンは、type
属性を image
に設定した <input>
要素で作成します。
この要素は <img>
要素とまったく同じ属性をサポートして、さらにフォームボタンがサポートする属性もすべてサポートします。
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
画像ボタンをフォームの送信に使用する際にこのウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 0, 0 になります)。座標は 2 つのキーと値の組として送信されます。
サンプルをご覧ください。フォームの画像上の座標 (123, 456) でクリックすると、 get
メソッド経由で送信されて、以下のような値の追加された URL が送信されます:
http://foo.com?pos.x=123&pos.y=456
これは "hot map" を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、フォームデータの送信の記事で詳しく説明します。
ファイルピッカー
初期のHTMLであった最後の <input>
タイプがあります: ファイル入力タイプです。フォームで、ファイルをサーバーに送信できます。この特定操作については以下の記事で詳しく説明します: フォームデータの送信。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択できます。
ファイルピッカーウィジェットを作成するには、type
属性を file
に設定した <input>
要素を使用します。accept
属性を使用して、受け入れるファイルの種類を制限できます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、multiple
属性を付加します。
例
以下の例では、画像ファイルを要求するファイルピッカーを作成しています。ユーザーは複数のファイルを指定できます。
<input type="file" name="file" id="file" accept="image/*" multiple>
いくつかのモバイルデバイスでは、ファイルピッカーは、次のようにキャプチャー情報を accept
属性に追加することで、端末のカメラやマイクでキャプチャーされた写真、動画、オーディオにアクセスできます:
<input type="file" accept="image/*;capture=camera"> <input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">
共通属性
フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。ただし、すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。共通属性のリストは以下のとおりです。
属性名 | 既定値 | 説明 |
---|---|---|
autofocus |
false | この真偽値属性を使用すると、ユーザーがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の 1 つのフォーム関連要素だけです。 |
disabled |
false | この真偽値属性は、ユーザーが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば <fieldset> ) からその設定を継承します。disabled 属性が設定されている包含要素がない場合は、その要素が有効になります。 |
form |
ウィジェットが関連付けられている <form> 要素。属性の値は、同じ文書内の <form> 要素の id 属性でなければなりません。理論的には、フォームウィジェットを <form> 要素の外側に設定できます。しかし実際には、その機能をサポートするブラウザーはありません。 |
|
name |
要素の名前。これはフォームデータとともに送信されます。 | |
value |
要素の初期値 |
スキルをテストしましょう!
この記事の最後に到着しましたが、最も大事な情報を覚えていますか? 次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Basic controls を見てください。
まとめ
上で見たように、利用可能なフォーム要素には多くの異なるタイプがあります。一度にこれらの詳細の全てを覚えておく必要はありません。詳細について調べるために好きなだけこの記事に戻ることができます 。
この記事では古い入力タイプをカバーしてきました — これは HTML の初期の頃に導入されたオリジナルで、すべてのブラウザーでよくサポートされます。次のセクションでは、HTML 5 で追加された新しい type
属性の値を見ていきます。