【HTML】レッスン1-06：フォームを作成しよう

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

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

Lesson1-0：HTML/CSSの開発環境を無料で整備しよう
Lesson1-1：HTML学習の入り口｜Webページの基本構造を理解しよう
Lesson1-2：基本的なHTMLタグを理解しよう
Lesson1-3：Webページにリンクや画像を挿入しよう
Lesson1-4：３種類のリストを理解しよう
Lesson1-5：テーブル（表）の基礎を理解しよう
Lesson1-6：フォームを作成しよう◁今回はココ
Lesson1-7：セクションタグとメタタグを知ろう

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

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

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

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

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

このページで紹介するのはHTMLにてWebページにフォームを表示するところまでです。

実際の処理を行うためにはJavaScriptやPHPなど別の言語の知識が必要となります。

<<前のページ HTML/CSSの記事一覧 次のページ>>

フォームの基本構造

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

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

フォームタグの構文

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

<form method="POST" action="/submit">
  <!-- フォーム内に配置する入力フィールドやボタンがここに入る -->
</form>
  1. method属性
    method属性はフォームデータを送信する方法を指定します。主に以下の2つがあります：

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

簡単なフォーム例

以下は、ユーザー名を入力して送信する簡単なフォームの例です。

<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"でテキスト入力フィールドを指定しています。
  • <button>: フォームデータを送信するボタン。

このコードは以下のようにブラウザ表示されます。（※送信ボタンを押してもデータは送信されないように変更しています。）



 

入力フィールドとラベル

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

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

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

<input>タグの基本

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

type属性 説明 使用例
text テキスト入力フィールド 名前、ユーザー名など
email メールアドレス入力フィールド メールアドレスを収集する際
password パスワード入力フィールド パスワード入力
number 数値入力フィールド 年齢、数量など
checkbox チェックボックス 複数選択が可能な場合
radio ラジオボタン 単一選択が必要な場合
submit フォーム送信ボタン フォームを送信する

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

ラベルの役割

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

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 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ページの重要な要素であり、正しく設計することでユーザー体験を向上させることができます。

学んだ内容のポイント

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

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

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

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

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

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

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

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

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

サイトのタイトルは「HTML/CSSの情報まとめ」

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

Lesson1-6の学習内容をまとめよう

VSCを使ってlesson1フォルダの中に「MyWebsite1-6.html」というファイルを作ってください。

その後、MyWebsite1-6.htmlにこのLesson1-6で学習した内容をまとめてみましょう。

自分で記事を見直してまとめることを推奨しますが、模範解答も用意しましたので必要な方はこちらを活用して下さい。

模範解答（ブラウザ表示）

※本サイトにはCSSが適用されているため、多少デザインが入っています。

Lesson1-6：フォームの作成（h1タグ）

１．フォームタグ（h2タグ）

  • 入力フォームを作成するタグ：<form>
  • action属性：フォーム送信先のURLを指定
  • method属性：データの送信方法（getまたはpost）

例：
<form action=”submit.php” method=”post”>
<input type=”text” name=”username”>
</form>

２．入力要素（h2タグ）

  • テキスト入力：<input type=”text”>
  • パスワード入力：<input type=”password”>
  • チェックボックス：<input type=”checkbox”>
  • ラジオボタン：<input type=”radio”>
  • 送信ボタン：<input type=”submit”>
  • リセットボタン：<input type=”reset”>
  • 隠し入力：<input type=”hidden”>

３．テキストエリアタグ（h2タグ）

  • 複数行の入力：<textarea>
  • rows属性：行数の指定
  • cols属性：列幅の指定

４．注意点（h2タグ）

  • labelタグを適切に使用し、アクセシビリティを向上。
  • method=”post”を使用すると、送信データがURLに表示されない。
  • 入力のバリデーション（検証）を実施し、不正なデータ入力を防止。
  • <form>タグの外に配置しないこと。

トップページへ戻る

模範解答（htmlコード）
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lesson1-6：フォームの作成</title>
</head>
<body>
    <h1>Lesson1-6：フォームの作成</h1>
    <img src="../image/Lesson1-6 フォームを作ろう.jpg" alt="Lesson1-6 フォームを作ろう">

    <h2>１．フォームタグ</h2>
    <ul>
        <li>入力フォームを作成するタグ：&lt;form></li>
        <li>action属性：フォーム送信先のURLを指定</li>
        <li>method属性：データの送信方法（getまたはpost）</li>
    </ul>
    <p>
        例：<br>
        &lt;form action="submit.php" method="post"><br>
        &lt;input type="text" name="username"><br>
        &lt;/form>
    </p>

    <h2>２．入力要素</h2>
    <ul>
        <li>テキスト入力：&lt;input type="text"></li>
        <li>パスワード入力：&lt;input type="password"></li>
        <li>チェックボックス：&lt;input type="checkbox"></li>
        <li>ラジオボタン：&lt;input type="radio"></li>
        <li>送信ボタン：&lt;input type="submit"></li>
        <li>リセットボタン：&lt;input type="reset"></li>
        <li>隠し入力：&lt;input type="hidden"></li>
    </ul>

    <h2>３．テキストエリアタグ</h2>
    <ul>
        <li>複数行の入力：&lt;textarea></li>
        <li>rows属性：行数の指定</li>
        <li>cols属性：列幅の指定</li>
    </ul>

    <h2>４．注意点</h2>
    <ul>
        <li>labelタグを適切に使用し、アクセシビリティを向上。</li>
        <li>method="post"を使用すると、送信データがURLに表示されない。</li>
        <li>入力のバリデーション（検証）を実施し、不正なデータ入力を防止。</li>
        <li>&lt;form>タグの外に配置しないこと。</li>
    </ul>

    <p>トップページへ<a href="../MyWebSite.html">戻る</a></p>
</body>
</html>

このコードをコピーしてMyWebsite1-6.htmlに張り付けてください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

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

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

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






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