HTMLのinputタグ完全ガイド：ステップバイステップで学ぶフォーム入力の基本

<input>タグは、ユーザーがデータを入力するための入力フィールドを作成するHTML要素です。テキストフィールド、チェックボックス、ラジオボタン、メールアドレス入力欄など、さまざまな種類の入力欄を作成できます。また、inputタグには<label>タグを使ってラベルを付けるのが推奨されています。

HTMLフォームとは

フォームは、ユーザーがWebサイトとやり取りするための重要な要素です。フォームを使うことで、ユーザーはサイトにデータを送信できます。送信されたデータは、クライアント側、あるいはバックエンドのサーバーやデータベースで処理されます。

HTMLでは、Webフォームは<form>要素の中で宣言します。<form>要素の基本構文は以下の通りです。

<form>
  ... フォーム要素 ...
</form>

<form>タグの中に、フォームを構成する要素を記述します。フォーム要素には、テキストフィールド、送信ボタン、ラジオボタン、複数行テキストボックスなど、HTMLで受け付けられるさまざまな入力データが含まれます。

HTML inputタグの基本

<input>要素は、訪問者がデータを入力・送信するためのフォームフィールドを定義します。日付ピッカー、チェックボックス、ボタン、ファイルアップローダーなど、多彩なフィールドをサポートしています。

<input>要素の基本構文は以下の通りです。

<input type="inputType">

<input>要素は多数の属性を受け付けますが、必ず指定すべき主要な属性はtype属性です。type属性を指定しない場合、<input>要素はWebページ上に表示されません。これは、<input>要素がデフォルトでは空の要素だからです。

それでは、いくつかの例を通して、HTMLの<input>タグの動作を確認していきましょう。

ここでは、地元のサンドイッチ・サラダ店「Sue's Salads」のためにフォームを作成する場面を想定します。このフォームは、店舗での体験に基づくフィードバックを顧客から送信してもらうためのもので、以下の入力を受け付ける必要があります。

• 顧客の名前（テキスト）
• 店舗のポイントプログラムの会員かどうかを示すチェックボックス
• 店舗での体験に対する1〜5の評価（数値）

HTML inputタイプの種類

<input>タグは、さまざまな入力タイプを受け付けます。入力タイプはtype属性で指定します。よく使われる入力タイプには、ボタン、日付ピッカー、パスワードフィールド、テキストフィールドなどがあります。

<input>タグで使われる主なフォームコントロールの入力タイプは以下の通りです。

• button（ボタン）
• file（ファイル）
• checkbox（チェックボックス）
• password（パスワード）
• number（数値）
• radio（ラジオボタン）
• submit（送信ボタン）
• text（テキスト）
• url（URL）
• date（日付・時刻ピッカー）
• image（画像）
• email（メールアドレス）

inputタイプの実装例

それでは、<input>タグを使って、いくつかのフォームフィールドを実際に作成してみましょう。

テキストフィールド

<input type="text">要素は、HTMLでテキストフィールドを作成するために使います。顧客に名前を尋ねるテキストフィールドを作成したい場合は、次のようなコードを書きます。

<input type="text" placeholder="お名前を入力してください">

このコードでは、2つの属性を持つテキストフィールドを作成しています。type属性はtextに設定されており、フォームがテキスト入力を受け付けられることを意味します。placeholder属性には「お名前を入力してください」という値が割り当てられています。

このテキストは、ユーザーがフィールドに入力を始めるまで、プレースホルダーとして表示されます。

チェックボックス

HTMLでは、チェックボックスはtype="checkbox"のinputとしてマークアップします。

<input type="checkbox" id="loyalty" name="loyalty" value="Yes">
<label for="loyalty">ポイントプログラムの会員ですか？</label>

このコードは、チェックボックスを作成します。チェックボックスをクリックすると、ハイライト表示されます。

チェックボックスには「ポイントプログラムの会員ですか？」というラベルが付いています。ラベルをクリックしてもチェックボックスが切り替わるため、ユーザビリティが向上します。label要素は、スクリーンリーダーのユーザーがフォームの内容を簡単に把握できるようにするなど、アクセシビリティの観点からも非常に重要です。

チェックボックスには、いくつかの関連属性があります。

• type属性： inputタイプはcheckboxに設定する必要があります。
• id： idはファイル内で一意である必要がある点に注意しましょう。
• nameとvalue： フォーム送信後に収集されたデータを処理できるよう、nameとvalueを設定しておくと便利です。
• checked： checked属性は値を割り当てないことからブール属性と呼ばれます。checkedを指定すると自動的にtrueに設定されます。デフォルトはfalseなので、初期状態でチェックを入れておきたい場合にのみ指定します。

ラジオボタン

<input type="radio">要素は、HTMLでラジオボタンを作成するために使います。

「ラジオボタン」という名称は、意外にも自動車業界に由来します。かつてのカーステレオには物理的なボタンが付いており、一度に押せるボタンは1つだけでした。別のボタンを押すと、前のボタンの選択が解除される仕組みです。

チェックボックスとラジオボタンの違いは、ラジオボタンでは1つしか選択できない点です。1つを選択すると他のボタンは無効化され、複数選択はできません。一方、チェックボックスは複数選択が可能です。

チェックボックスをラジオボタンに変更するには、2つの作業が必要です。まず、inputタイプをradioに変更します。次に、すべてのラジオボタンでname属性の値を揃えます。これにより、1つを選択したときに他のボタンが無効化されるようになります。

例として、ユーザーがSue's Saladsのポイントプログラムの会員かどうかを尋ねるフィールドを作成してみましょう。次のようなコードを使います。

<label for="yes">はい</label>
<input type="radio" value="yes" id="yes" name="loyalty">
<label for="no">いいえ</label>
<input type="radio" value="no" id="no" name="loyalty">

このコードでは、2つのラジオボタンを作成しています。1つ目のラジオボタンには「はい」というラベルが付き、値はyesです。2つ目のラジオボタンには「いいえ」というラベルが付き、値はnoです。

数値フィールド

<input type="number">要素は、フォームで数値入力を受け付けるために使います。

例えば、Sue's Saladsの顧客に店舗での体験を評価してもらうフォームを作成したいとします。顧客には1〜5の数値で評価してもらいます。このデータを収集するWebフォームは、次のようなコードで作成できます。

<label>Sue's Saladsでの体験はいかがでしたか（1〜5で評価）？</label>
<input type="number" min="1" max="5">

このコードでは、1〜5の間の数値を受け付けるフォームフィールドを作成しています。このフィールドは数値のみを受け付けます。ユーザーがテキストを入力しようとしても、そのテキストは処理されません。

また、このフォームフィールドはnumberタイプのため、ボックス内に小さな矢印が2つ表示されます。上矢印をクリックするとフィールドの値が1増え、下矢印をクリックすると1減ります。

まとめ

HTMLの<input>タグは、フォームでユーザー入力を受け付けるために使われます。<input>タグを使えば、数値、テキスト、日付、はい/いいえの回答など、さまざまな種類のデータを受け付けられます。

このチュートリアルでは、例を交えながらHTMLの<input>タグの使い方と、利用できる主な属性について解説しました。これで、プロのように<input>タグを使ってフォームフィールドを作成できるようになったはずです。

HTMLについてさらに学びたい方は、HTML学習の完全ガイドもぜひチェックしてみてください。