一つ前の章ではテーブル（表）について学習しました。

今回はフォームについて見ていきましょう。

Webページにおいて、フォームはユーザーから情報を入力してもらい、その情報を送信するために使用される重要な機能です。

例えば会員登録フォームやお問い合わせフォーム、検索ボックスなどがこれに該当します。

フォームはHTMLで作成でき、<form>タグ を使ってその範囲を定義します。

さらにテキスト入力やボタンなどの各種入力フィールドを追加することで、ユーザーとのインタラクションを実現します。

本レッスンではフォーム作成に必要な基本構造や主要な要素について学びます。フォームを学ぶことで、よりインタラクティブなWebページを作成できるようになるでしょう。

<<前のページ

記事一覧

次のページ>>

HTMLフォームの基本構造と要素

フォームを作成する際、まずはその範囲を定義する<form>タグについて理解しましょう。

フォームタグは入力されたデータをどのように処理するかを指定するために、いくつかの属性を使用します。

フォームタグの構文と役割

以下は、フォームタグの基本的な構造です。

<form method="POST" action="/submit">
  <!-- フォーム内に配置する入力フィールドやボタンがここに入る -->
</form>

1. method属性
   method属性はフォームデータを送信する方法を指定します。主に以下の2つがあります：
   • GET: データがURLのパラメータとして送信されます。検索フォームなどに適しています。
   • POST: データがリクエストの本文に含まれて送信されます。会員登録フォームやログインフォームなどに使用されます。
2. action属性
   action属性はフォームデータを送信する先のURLを指定します。例えば/submitと記述すると、送信されたデータが/submitというURLに送られます。

シンプルなHTMLフォームの作成例

以下は、ユーザーに「ユーザー名」を入力してもらい、送信ボタンを押すと /submit にデータを送信するフォームの例です。

サーバー側では、username という名前で送られたデータを受け取って処理することになります。

<form method="POST" action="/submit">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username">
  <button type="submit">送信</button>
</form>

• <label>: 入力フィールドにラベル（名前）を付けるためのタグ。for属性で関連付けるidを指定できます。
• <input>: ユーザーがデータを入力する入力欄。type="text"でテキストを入力できるように指定しています。
  またid=””でこの入力欄に識別子を付け、<label>と紐づけています。
  さらにname=””で入力されるデータに名前を付けています。
• <button>: フォームデータを送信するボタン。

もう少し細かい説明をこの先で行っていますので、ここの時点で深く理解できていないくても取り合えず先へ進みましょう^^

入力フィールドとラベルの使い方

フォーム内でユーザーが情報を入力するためには、入力フィールドを適切に使用する必要があります。

入力フィールドは <input>タグ で作成され、その属性を指定することで様々な種類のフィールドを作成できます。

また、入力フィールドにはラベルを関連付けることで、ユーザーにとって使いやすいフォームを実現できます。

<input>タグとtype属性の種類

<input>タグはフォーム内でユーザーから情報を収集するための要素です。以下は主なtype属性の種類とその用途です。

VSCを使い、いろいろなtype属性の<input>タグを作ってブラウザに表示してみましょう。

<label>タグの役割と使い方

ラベルはユーザーが “どの入力フィールド” に “何を入力すればよいか” を明確にするために使用します。

HTMLでは<label>タグを使い、for属性で入力フィールドのid属性と関連付けを行います。

ラベルと入力フィールドの例

以下の例は名前を入力するフォームフィールドを作成したものです。

<form method="POST" action="/submit">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">送信</button>
</form>

• for属性: ラベルと入力フィールドを関連付けます。例えば<label for="name">はid="name"を持つ入力フィールドを指します。
• required属性: この属性を追加すると、ユーザーが必須項目を入力しない限りフォームを送信できません。

複数の入力フィールドを含むフォーム例

複数の入力フィールドを組み合わせて、より複雑なフォームを作成することも可能です。

<form method="POST" action="/submit">
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password" required>
  
  <button type="submit">ログイン</button>
</form>

• emailとpasswordフィールド: メールアドレスとパスワードを入力するために使用されます。
• バリデーション: required属性を使用することで、空欄での送信を防ぎます。

<textarea>タグでテキストエリアを作成しよう

フォームの中で長い文章や複数行のテキストを入力する場合は <textarea>タグ を使用します。

このタグはユーザーが自由にテキストを入力できる “大きな入力フィールド” を作成できます。

<textarea>タグの基本構文と属性

<textarea>タグは入力フィールドの大きさや初期値を設定できる柔軟な要素です。以下は基本的な構文です。

<textarea name="message" rows="4" cols="50"></textarea>

• name属性: フィールドの名前を指定します。サーバーにデータを送信するときに使用されます。
• rows属性: テキストエリアの行数を指定します。
• cols属性: テキストエリアの幅（列数）を指定します。

テキストエリアを活用した実用的なフォーム例

以下はお問い合わせフォームでメッセージを入力するためのテキストエリアの例です。

<form method="POST" action="/submit">
  <label for="message">お問い合わせ内容:</label><br>
  <textarea id="message" name="message" rows="5" cols="40" placeholder="ここにご記入ください"></textarea><br>
  <button type="submit">送信</button>
</form>

• placeholder属性: 入力例やヒントを表示します。ユーザーが入力を始めると消えます。
• 改行タグ（<br>）: レイアウトを整えるために使用します。

テキストエリア使用時の注意点

初期値の設定

テキストエリア内に初期値（最初から書かれている文章）を設定したい場合は、<textarea>タグの開始タグと終了タグの間に文字列を記述します。

<textarea name="message" rows="4" cols="50">ここに初期値を入力してください。</textarea>

サイズの調整

rowsとcolsを調整することでテキストエリアの見た目をカスタマイズできます。

また、Lesson2以降で学習するCSSを使用すればスタイルをより細かく指定することも可能です。

必須入力の指定

テキストエリアもrequired属性を使って必須項目にすることができます。

<textarea name="message" rows="4" cols="50" required></textarea>

<textarea>タグは長い文章や詳細な情報を入力してもらう際に非常に便利な要素です。

行数や幅を指定して使いやすい入力フィールドを提供し、placeholderやrequired属性を活用することで、ユーザーにとってより直感的で便利なフォームを作成できます。

まとめと重要ポイント

今回のレッスンではフォームの作成に必要な基本的な知識を学びました。

フォームはユーザーとの情報交換を実現するWebページの重要な要素であり、正しく設計することでユーザー体験を向上させることができます。

HTMLフォーム作成で学んだ重要なポイント

1. フォームの基本構造
   • <form>タグを使ってフォームの範囲を定義。
   • methodやaction属性を活用して、データ送信方法と送信先を指定。
2. 入力フィールドとラベル
   • <input>タグで多様な入力フィールドを作成（例：テキスト、メール、パスワード）。
   • <label>タグで入力フィールドに説明を付加し、ユーザーが直感的に操作できるフォームを作成。
3. テキストエリアの使用
   • 長文入力には<textarea>タグを使用し、行数や列数をカスタマイズ可能。
   • placeholderやrequired属性でユーザーへの入力ガイドを提供。

フォーム作成の基本をしっかりと理解し、実際に使ってみることで、より良いWebページを作成できるようになります。

次のステップとして今回学んだ内容を使って、自分でログインフォームやお問い合わせフォームを作ってみてください。

フォームの役割や仕組みを実践的に深めていきましょう！

練習問題1-6：お問い合わせフォームを作ろう

VSCで「training1-6.html」というファイルを作って保存してください。

そのファイルにhtmlコードを書き、ブラウザに以下のように表示させましょう。

初めてのWebサイトを作ろう1-6

このサイトの Lesson1-1（HTML学習の入り口）  から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

<<前のページ

記事一覧

次のページ>>

FAQ｜HTMLフォーム作成に関するよくある質問

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。

HTML/CSSのテキスト＆問題集トップへ戻る
トップページへ戻る