HTML 入門

HTML <input> タグ

<input> タグは、ユーザーがデータを入力し、ウェブサイトへ送信することを可能にします。

本章では、<input> タグについて深掘りし、最も頻繁に使用される 3 つの入力タイプ：text（テキスト）、password（パスワード）、email（メールアドレス）に焦点を当てます。それぞれの機能、属性、および実際の活用シーンを探求し、それらがデータバリデーションとユーザー体験（UX）をどのように向上させるかを理解していきましょう。

1. <input> タグ：HTML フォームの基盤

<input> タグは非常に柔軟な HTML 要素であり、ウェブベースのフォームインタラクションを構築するために設計されています。テキスト、パスワード、メールアドレスなど、多種多様なデータの入力をユーザーに許可します。

中でも type 属性はその動作を決定する中核的な役割を果たし、入力ボックスがどのような形式で表示されるかを定義します。もし type 属性を指定しなかった場合、ブラウザはデフォルトで標準的なテキストボックス（text）として扱います。

1.1 基本構造

標準的な <input> タグの構造は以下の通りです。

<input type="入力タイプ" id="一意の識別子" name="データ名" value="デフォルト値">
  • type: 表示する入力ボックスのタイプを指定します。動作と外観を直接決定する最も重要な属性です。
  • id: 現在の HTML ドキュメント内でこの入力要素を一意に識別するための ID を提供します。CSS でスタイルを適用したり、JavaScript で要素を操作したりするために不可欠です。
  • name: 入力要素の名前を指定します。フォームデータをサーバーに送信する際、サーバー側はこの name 属性を通じて、どのデータを受け取ったかを識別します。
  • value: 入力ボックスの初期値（デフォルトで入力されているテキスト）を定義します。この属性はオプションであり、フォームのプリセットやデフォルトオプションの提供によく使われます。

2. 入力タイプ：text（テキスト入力）

text タイプは、ユーザーが任意のテキストを入力できる一行のテキストボックスを作成します。これは最も基本的かつ汎用的な入力タイプです。

2.1 text タイプ固有の便利な属性

id、name、value といった共通属性に加え、text タイプでは以下の 3 つの属性が頻繁に併用されます。

  • maxlength: この入力ボックスに入力できる最大文字数を厳格に制限します。
  • size: 画面上の入力ボックスの表示幅を文字数単位で定義します。これはあくまでブラウザに対する「視覚的なヒント」であり、実際に入力可能な文字数を制限するものではありません（文字数制限には maxlength を使用します）。
  • placeholder: プレースホルダー。入力ボックスが空の時に、何を記入すべきかをユーザーに伝える薄い色のヒントテキストを表示します。ユーザーが入力を開始すると、このテキストは自動的に消えます。

コード例：

<label for="firstName">名：</label><br>
<input type="text" id="firstName" name="firstName" placeholder="名前を入力してください" maxlength="50" size="30"><br><br>

<label for="lastName">姓：</label><br>
<input type="text" id="lastName" name="lastName" placeholder="苗字を入力してください" maxlength="50" size="30">

この例では、「名」と「姓」の 2 つのテキストボックスを作成しています。placeholder は親切な入力ガイドを提供し、maxlength は名前が極端に長くなるのを防ぎ、size はページ上で十分な入力スペースを確保しています。

3. 入力タイプ：password（パスワード入力）

password タイプは、パスワードなどの機密情報を入力するために特別に設計されています。

その核心的な機能はマスキング（Masking）です。入力された文字を隠し、通常はアスタリスク（*）や黒丸（•）を表示することで、周囲の人からの覗き見を防止します。

3.1 セキュリティ上の重要な注意点

誤解してはならないのは、password タイプ自体がデータを暗号化するわけではないという点です。これはあくまで画面上の文字を「遮蔽」しているに過ぎません。フォーム送信時、データは依然としてプレーンテキスト（平文）形式でサーバーへ送信されます。真にデータセキュリティを保護するためには、ウェブサイトが HTTPS 安全接続を使用している必要があります。

3.2 サポートされている属性

password タイプは、id、name、value、maxlength、size、placeholder など、text タイプと同じ属性をサポートしています。

コード例：

<label for="password">パスワード：</label><br>
<input type="password" id="password" name="password" placeholder="パスワードを入力してください" maxlength="20" size="30">

4. 入力タイプ：email（メールアドレス入力）

email タイプは、メールアドレスの入力に特化しています。

これを使用する最大のメリットは、モダンブラウザに備わっている標準のバリデーション（形式チェック）機能です。フォームを送信しようとした際、入力内容が標準的なメールアドレス形式（例：@ 記号の欠落など）に適合しない場合、ブラウザが自動的に送信をブロックし、警告を表示します。

ただし、このフロントエンドバリデーションは万能ではありません。実務においては、常にサーバーサイドでも再度バリデーションを行う必要があります。

4.1 固有属性：multiple

email タイプはすべての標準属性をサポートするほか、非常にユニークなブール属性である multiple をサポートしています。

  • multiple: この属性を追加すると、ユーザーはカンマ（,）区切りで複数のメールアドレスを一つの入力ボックスに入力できるようになります。

コード例：

<label for="email">個人用メールアドレス：</label><br>
<input type="email" id="email" name="email" placeholder="メールアドレスを入力してください" size="30"><br><br>

<label for="ccEmail">CC用メールアドレス（複数入力可）：</label><br>
<input type="email" id="ccEmail" name="ccEmail" placeholder="複数の場合はカンマで区切ってください" size="30" multiple>

この例では、最初の入力ボックスは一つのアドレスのみですが、2 つ目のボックスは multiple 属性があるため、CC 用のアドレスを一気に複数入力することが可能です。

5. 極めて重要な共通属性

前述の 3 つのタイプ（text, password, email）に共通し、フォームの機能とユーザー体験に決定的な影響を与える属性がいくつかあります。

5.1 id と name の黄金則

id と name は全く異なる役割を担っており、初心者が最も混同しやすい部分です。

  • id: フロントエンドで使用されます（CSS でスタイルを適用したり、JavaScript で要素を取得して動的なインタラクションを実装したりするため）。
  • name: バックエンド（サーバー）で使用されます。送信ボタンをクリックすると、ブラウザは name をデータのラベルとしてパッケージ化し、サーバーへ送信します。

ベストプラクティス: すべての <input> ボックスに id と name の両方の属性を付与する習慣をつけましょう。

5.2 placeholder（プレースホルダー）

前述の通り、入力ボックス内に薄い色のヒントを表示します。複雑なフォームにおいて、ユーザーがどのような形式のデータを入力すべきか迷わせないための、UX 向上における絶好のツールです。

5.3 required（必須項目バリデーション）

required はブール属性です（記述するだけで有効になり、値を代入する必要はありません）。これは、フォームを送信する前に、その入力ボックスの内容が必須であることを規定します。

もし必須項目が空のまま送信しようとすると、モダンブラウザは送信を直接インターセプトし、ユーザーに対して警告メッセージを表示します。

required を使用したコード例：

<label for="username">ユーザー名：</label><br>
<input type="text" id="username" name="username" placeholder="ユーザー名を入力してください" required><br><br>

<label for="password">パスワード：</label><br>
<input type="password" id="password" name="password" placeholder="パスワードを入力してください" required>

このログインフォームでは、ユーザー名とパスワードの両方が required に設定されています。いずれか一方が未入力の場合、フォームは決して送信されません。