フォーム入力の使用

フォーム入力は、ユーザーが情報を入力する主な方法。HTML では、必要なデータに応じてさまざまな入力タイプが用意されている。

一般的な入力タイプ

テキスト入力

ユーザー名、メールアドレス、短いメッセージなど、短いテキストデータの入力に適した設計。

<input type="text" />

パスワード入力

セキュリティのために文字がマスクされるパスワード入力用。

<input type="password" />

メールアドレス入力

ユーザーからメールアドレスを収集するために使用。入力値がメール形式として有効かどうかをクライアント側で検証。

<input type="email" />

電話番号入力

ユーザーから電話番号を収集するために使用。

<input type="tel" />

数値入力

ユーザーから数値データを収集するために使用。モバイルデバイスでは数値キーパッドを提供。

<input type="number" />

チェックボックス

ユーザーが選択肢リストから1つ以上のオプションを選択できる入力。複数選択が可能な場面、例えばリストから複数項目を選ぶ場合や利用規約への同意などに適用。

<input type="checkbox" />

ラジオボタン

ユーザーが相互に排他的な選択肢リストから1つのオプションのみを選択できる入力。性別選択や支払い方法の選択など、1つだけ選ぶ必要がある場面に適用。

<input type="radio" />

ファイル入力

ユーザーが自分のデバイスからファイルをアップロードし、ローカルファイルシステムから選択してフォームデータと一緒に送信できる機能。ドキュメントや画像の添付に特に便利。

<input type="file" />

日付入力、時刻入力、日時入力

ユーザーが日付、時刻、またはその両方を入力できる機能。日付や時刻を選択するためのユーザーフレンドリーなインターフェースを提供。

<input type="date" />
<input type="time" />
<input type="datetime-local" />

各フィールドに何か入力すると、さまざまな候補が表示されます。データは収集されませんのでご安心ください。

各フィールドで何が求められているのか分からないと、フォームの入力はあまり便利ではありません。そのため、ラベルが役立ちます。