はじめに
HTML フォームはウェブの基本的な要素であり、ユーザーが情報を入力することでウェブサイトと対話することを可能にします。これは、シンプルな検索ボックスから複雑な登録ページまで多岐にわたります。この実験では、テキストフィールド、ラベル、送信ボタンの追加方法を含む、HTML フォーム作成の基本を学びます。簡単な問い合わせフォームを段階的に作成していきます。
実験環境では、すでにウェブサーバーが起動しています。index.html ファイルに HTML コードを記述し、左上隅の Web 8080 タブをクリックすることでライブプレビューを確認できます。
action 属性を持つ form タグを作成する
このステップでは、フォーム要素のコンテナを作成することから始めます。<form>タグは、ユーザー入力のための HTML フォームを作成するために使用されます。テキストフィールド、ボタン、チェックボックスなどのすべてのフォーム要素は、<form>タグ内に配置する必要があります。
action属性は、フォームが送信されたときにフォームデータをどこに送信するかを指定します。この実験では、バックエンド処理ではなく HTML 構造に焦点を当てているため、空のままにします。
左側のファイルエクスプローラーからindex.htmlファイルを開き、以下のコードを追加してください。
<form action=""></form>
コードを追加した後、Web 8080タブに切り替えてページをプレビューできます。フォームは現在空なので、まだ何も表示されません。
テキストフィールド用の type text を持つ input タグを追加する
このステップでは、ユーザーがテキストを入力するためのフィールドを追加します。<input>タグは、フォーム要素の中で最もよく使用されるものの一つです。type属性に応じて、さまざまな方法で表示できます。
一行のテキスト入力フィールドを作成するには、type="text"を使用します。これは、ユーザー名、氏名、メールアドレスなどの入力に最適です。
それでは、index.htmlファイル内の<form>タグ内に、テキスト入力フィールドを追加しましょう。
<form action="">
<input type="text" />
</form>
ファイルを保存し、Web 8080タブに切り替えてください。ページ上に、文字を入力できる小さなテキストボックスが表示されているはずです。
ボタン用の type submit を持つ input タグを挿入する
このステップでは、ユーザーがフォームを送信できるようにボタンを追加します。再び<input>タグを使用し、今回はtype="submit"を指定することで、送信ボタンを作成できます。
ユーザーがこのボタンをクリックすると、フォームのデータは<form>タグのaction属性で指定されたサーバーに送信されます。ボタンに表示されるテキストは、value属性を使用して設定できます。
index.htmlのフォームに送信ボタンを追加しましょう。
<form action="">
<input type="text" />
<br /><br />
<input type="submit" value="Submit" />
</form>
レイアウトを改善するために、テキストフィールドとボタンの間に垂直方向の間隔を作成するために<br><br>タグも追加しました。ファイルを保存し、Web 8080タブを確認して、新しい「Submit」ボタンを表示してください。
label タグと for 属性を使用してラベル付けを行う
このステップでは、テキストフィールドにラベルを追加します。<label>タグは、多くのフォーム要素のラベルを定義します。ラベルをクリックすると対応する入力フィールドにフォーカスが当たるため、ユーザビリティとアクセシビリティが向上します。
<label>を<input>に接続するには、<label>のfor属性と<input>のid属性を同じにする必要があります。
index.htmlで、テキスト入力にidを追加し、それに対応する<label>を追加しましょう。
<form action="">
<label for="username">Name:</label><br />
<input type="text" id="username" name="username" />
<br /><br />
<input type="submit" value="Submit" />
</form>
「Name:」というラベルを追加し、id="username"とfor="username"を使用して入力フィールドにリンクしました。また、入力にname属性を追加しました。これは、フォームが送信されたときにデータを識別するために重要です。
ファイルを保存し、Web 8080タブで変更を確認してください。これで、「Name:」というテキストをクリックすると、カーソルが自動的にテキストボックスに移動します。
複数行入力用の textarea タグを追加する
このステップでは、ユーザーがメッセージを記述するためのより大きなテキストエリアを追加します。<input type="text">が一行のテキスト用であるのに対し、<textarea>タグは複数行の入力に使用されます。
<textarea>のサイズは、それぞれ表示される行数と 1 行あたりの文字数を指定するrows属性とcols属性で制御できます。
メッセージ用の<textarea>を、それ自身の<label>と共にフォームに追加しましょう。index.htmlファイルを以下の最終コードで更新してください。
<form action="">
<label for="username">Name:</label><br />
<input type="text" id="username" name="username" />
<br /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message" rows="4" cols="30"></textarea>
<br /><br />
<input type="submit" value="Submit" />
</form>
これで、フォームには名前フィールドとメッセージエリアができました。ファイルを保存し、Web 8080タブで完成したフォームを確認してください。これで、機能的で構造化された HTML フォームが完成しました。
まとめ
おめでとうございます！基本的な HTML フォームの構築に成功しました。この実験（Lab）では、以下の方法を学びました。
- フォーム要素のコンテナとして
<form>タグを使用する方法。 <input type="text">で一行のテキストフィールドを作成する方法。<input type="submit">で送信ボタンを作成する方法。for属性とid属性を使用して<label>を入力フィールドに関連付けることで、アクセシビリティとユーザビリティを向上させる方法。<textarea>タグで複数行のテキストエリアを追加する方法。
これらは、Web 上でインタラクティブなフォームを作成するための基本的な構成要素です。今後は、他の入力タイプやフォーム属性を探求して、より複雑で強力なフォームを構築することができます。
