【HTML Living Standard】form要素の使い方

form要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月25日

基本的な使い方

formオブジェクトは、ユーザーからの情報入力を受け付け、サーバーへ送信するための領域を定義するHTML要素を表すオブジェクトです。Webサイトにおいて、お問い合わせフォーム、ログインフォーム、検索フォームなど、ユーザーがデータを入力し、それをWebサーバーに送る際に必ず使用されます。

この要素の内部には、テキスト入力欄の<input type="text">、パスワード入力欄の<input type="password">、複数行テキスト入力欄の<textarea>、選択肢を提供する<select>、そしてデータを送信する<button type="submit">といった様々なフォームコントロール要素を配置します。

formオブジェクトにはいくつかの重要な属性があります。action属性は、フォームが送信されたときにデータが送られるサーバー側のURLを指定します。method属性は、データの送信方法を定義し、主にHTTPのGETまたはPOSTメソッドを使用します。GETはURLのクエリパラメータとしてデータを渡し、POSTはHTTPリクエストのボディにデータを埋め込んで送信します。enctype属性は、データのエンコード形式を指定するもので、特にファイルアップロードを行う際にはmultipart/form-dataを設定する必要があります。その他、target属性でフォーム送信後に結果を表示する場所を指定したり、autocomplete属性でブラウザの自動入力機能の有効・無効を制御したり、novalidate属性でブラウザによる標準のフォーム検証機能を無効にしたりできます。

formオブジェクトは、ユーザーとWebアプリケーション間の重要な接点であり、入力されたデータを安全かつ効率的にサーバーへ送信するための基盤となります。Webサービス開発において、ユーザーからの入力を受け付けるための必須の要素です。

公式リファレンス: <form>: The Form element

構文(syntax)


1<form action="/submit-data" method="post">
2  <input type="text" name="exampleInput">
3  <button type="submit">送信</button>
4</form>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTMLフォームでユーザー入力を送信する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>シンプルなHTMLフォーム</title>
7</head>
8<body>
9    <!--
10        formタグは、ユーザーからの入力を収集し、サーバーへ送信するための領域を定義します。
11        action属性はデータの送信先URLを指定し、method属性はHTTPメソッド（GETまたはPOST）を指定します。
12    -->
13    <form action="/submit-data" method="post">
14        <!-- ラベルは入力フィールドが何であるかを示すためのもので、for属性で関連付ける入力フィールドのidを指定します。 -->
15        <label for="userName">ユーザー名:</label><br>
16        <!--
17            inputタグは様々な種類の入力フィールドを作成します。
18            type="text"は一行のテキスト入力フィールドを作成します。
19            idは要素を一意に識別するためのもので、labelのfor属性と関連付けられます。
20            nameはフォームデータが送信される際に、その入力フィールドの値のキーとして使用されます。
21            required属性は、このフィールドが必須であることを示します。
22        -->
23        <input type="text" id="userName" name="userName" required><br><br>
24
25        <label for="userEmail">メールアドレス:</label><br>
26        <!-- type="email"はメールアドレス形式の入力を求め、基本的な検証を提供します。 -->
27        <input type="email" id="userEmail" name="userEmail" required><br><br>
28
29        <!--
30            type="submit"は、フォームのデータをaction属性で指定されたURLに送信するためのボタンを作成します。
31            value属性はボタンに表示されるテキストです。
32        -->
33        <input type="submit" value="送信">
34    </form>
35</body>
36</html>

HTMLのformタグは、ウェブページ上でユーザーからの入力を収集し、そのデータをサーバーへ送信するための領域を定義する重要な要素です。このタグ自体に直接的な引数や戻り値はありませんが、内部に配置する入力関連要素と連携することで、ユーザーとの対話を可能にします。

フォームの動作を制御するため、formタグにはいくつかの属性が用意されています。action属性は、ユーザーが入力したデータが送信されるサーバーのURLを指定します。method属性は、データを送信する際のHTTPメソッド（主にGETまたはPOST）を決定します。

サンプルコードでは、labelタグを使用して入力フィールドの項目名を表示し、そのfor属性で対応するinputタグのidと関連付けています。inputタグは、type属性を変えることで多様な入力形式を提供します。例えば、type="text"は一行のテキスト入力、type="email"はメールアドレス形式の入力を促し、基本的な書式検証も行われます。各inputタグにはname属性を指定し、これがフォームデータとしてサーバーに送信される際のキーとなります。required属性を付与すると、そのフィールドが必須入力であることを示し、未入力のまま送信しようとした場合にブラウザが警告を表示します。

最後に、type="submit"を持つinputタグは、フォーム内の入力データをaction属性で指定されたURLに送信するためのボタンとして機能します。このようにformタグは、ユーザーインターフェースとサーバーサイドの処理を橋渡しする役割を担っています。

formタグは、ユーザーからの入力をサーバーへ安全に送信するために用いる重要な要素です。action属性でデータの送信先URLを、method属性で送信方法（GETまたはPOST）を指定しますが、機密情報を含む場合はHTTPS環境下でPOSTメソッドを利用してください。inputタグのname属性は、サーバー側でデータを受け取る際のキーとなるため必須です。また、labelタグのfor属性とinputタグのid属性を一致させると、ユーザーの利便性とアクセシビリティが向上します。requiredなどの属性はあくまでブラウザでの簡易的な入力チェックであり、安全なシステム構築のためには、サーバー側での厳格な入力値検証が不可欠であることに留意してください。

HTMLフォームでデータを送信する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>フォーム送信の基本</title>
7</head>
8<body>
9
10    <!--
11        form要素は、ユーザーからの入力を収集し、指定されたサーバーに送信するために使用します。
12        action属性は、フォームデータが送信されるURLを指定します。
13        method属性は、HTTPリクエストのメソッド（GETまたはPOST）を指定します。
14        ここでは、セキュリティとデータ量の観点からPOSTを推奨します。
15    -->
16    <form action="/submit-form" method="post">
17        <h2>ユーザー情報入力</h2>
18
19        <!--
20            label要素は、フォームコントロール（inputなど）に説明を提供します。
21            for属性とinputのid属性を一致させることで、関連付けが行われます。
22        -->
23        <label for="username">ユーザー名:</label>
24        <!--
25            input要素は、ユーザーがデータを入力するためのフィールドを作成します。
26            type="text"は一行のテキスト入力を示します。
27            name属性は、送信時にサーバーに送られるデータのキー（名前）になります。
28            id属性は、label要素との関連付けやJavaScriptからのアクセスに利用します。
29        -->
30        <input type="text" id="username" name="username" required>
31        <br><br>
32
33        <label for="password">パスワード:</label>
34        <!--
35            type="password"は、入力された文字を伏せ字で表示します。
36        -->
37        <input type="password" id="password" name="password" required>
38        <br><br>
39
40        <!--
41            input type="submit"は、フォームデータをサーバーに送信するためのボタンを作成します。
42            value属性は、ボタンに表示されるテキストを指定します。
43        -->
44        <input type="submit" value="送信">
45    </form>
46
47</body>
48</html>

HTMLのform要素は、ウェブページでユーザーからの入力を収集し、そのデータをサーバーへ送信するために使用する重要な要素です。このサンプルコードは、ユーザー名とパスワードの入力から送信までの基本的な流れを示しています。

form要素には、データが送信されるサーバーのURLを指定するaction属性と、HTTPリクエストの送信方法を定義するmethod属性があります。methodにはGETとPOSTがあり、通常はセキュリティや送れるデータ量の観点からPOSTメソッドが推奨されます。

フォーム内の具体的な入力欄はinput要素で作成します。input要素のtype属性は、テキスト入力（text）、パスワード入力（password）など、入力形式を指定します。name属性は、送信時にサーバーへ送られるデータのキー（名前）となり、id属性はlabel要素との関連付けやJavaScriptからのアクセスに利用します。label要素は、for属性とinputのid属性を一致させることで、入力フィールドに説明を提供します。

ユーザーが入力したデータをサーバーへ送信するには、input type="submit"で作成する「送信」ボタンを利用します。このボタンの表示テキストはvalue属性で指定します。

form要素自体は特定の引数や戻り値を持たず、フォーム内の各要素の属性を通じてデータの収集と送信という重要な役割を果たします。

HTMLのform要素を利用する際は、action属性にフォームデータを受け取るサーバーのURLを正確に指定することが重要です。method属性は、パスワードのような秘匿性の高い情報や大量のデータを送る際にはPOSTを推奨します。GETでは送信データがURLに表示されるため注意が必要です。

各input要素には、サーバー側でデータを受け取る際にキーとなるname属性を必ず設定してください。また、label要素とinput要素をforとid属性で関連付けることで、ユーザーの操作性を向上させ、アクセシビリティを高めます。

フォームのセキュリティはHTML側だけでなく、送信された入力値に対するサーバー側での適切なバリデーション（入力値検証）とサニタイズ（無害化）が不可欠です。これらを組み合わせて安全なシステムを構築してください。