formタグ・とは？初心者にやさしいHTMLの基本と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

formタグ・とは？

ウェブサイトを作るとき、ユーザーから情報を集めるための入口になるのが form です。日本語では「フォーム」と呼ばれ、formタグ はその入口を作るための土台です。フォームの中にはテキストを入力する欄、ボタン、チェックボックスなど、使いたい入力部品を並べ、ユーザーがデータを送信できるようにします。

実際には <form> 要素を使って<input>や<button>を組み合わせ、サーバーへデータを送る仕組みを作ります。ここで大切なのは action と method です。

action属性は、データをどこへ送るかを決めます。通常はサーバー上のスクリプトのURLを入れます。

method属性はデータを送る方法を決めます。GET はデータをURLに付けて送ります。POST はデータを本文に送るので、長い文字列や機密情報にも向いています。

実際のコード例を文字で説明します。例: <form action="submit.php" method="post"> ここに入力部を並べて </form> でした。

フォームの入力部品の例

テキストを1行で入力する欄は <input type="text" name="name"> のように書くのが基本形です。メールアドレス用には <input type="email" name="mail">、パスワード用には <input type="password" name="pwd"> を使います。チェックボックスには <input type="checkbox" name="agree"> など、ラジオボタンには <input type="radio" name="gender" value="male"> もよく使われます。送信ボタンには <input type="submit" value="送信"> を置きます。

以下はフォームの構成を表にした例です。実際のページでは、入力部品を適切に並べ、ラベルと組み合わせて使います。ここでは基本的な要素だけを列挙します。

属性	説明
action	送信先のURL。データを受け取るサーバー側の処理を指定します。
method	送信方法。GET か POST。
enctype	ファイルを送るときなどに使う形式。multipart/form-data など。
name	フォームに名前を付ける。複数のフォームがあるときに区別します。
autocomplete	入力候補を自動補完するかどうか。

入力部品を組み合わせるとき、アクセシビリティを意識して、画面読み上げソフトでも分かりやすい順番で並べることが大切です。ラベルを使って説明を添えるのが理想ですが、ここでは基本概念だけを押さえます。実務では validation や CSRF対策 なども学ぶと、より安全で使いやすいフォームになります。

フォームはウェブの窓口です。ユーザーが安心して情報を入力できるよう、入力欄を読みやすく、ボタンの文言を分かりやすくする工夫が大切です。スマートフォンでも使いやすいデザインを心がけ、必須項目には必須の表示をつけ、送信前に内容を確認できるようにするとよいでしょう。

使い方のヒント

最初はシンプルなフォームから始めましょう。名前とメールアドレスだけの2つの入力欄と、送信ボタンだけを作る練習をすると理解が深まります。慣れてきたら、チェックボックスやラジオボタン、ファイルのアップロード機能などを追加していきます。

まとめ

formタグはHTMLの基本の1つで、ユーザーから情報を集める入口を作る役割を果たします。actionとmethodを正しく設定し、入力部品を適切に並べることが大切です。表形式の属性説明や、コード風の説明を通じて、初心者でも理解できるように工夫しました。

formタグの関連サジェスト解説

html formタグとは: html formタグとは、Webページ上でユーザーから情報を集めてサーバーへ送る仕組みを作るための要素です。formタグは、入力欄やボタンなどの要素を一つにまとめてデータを送信する役割を持ちます。送信されるデータは、input や textarea などの name 属性をキーとしてサーバーに渡されます。action 属性にはデータの送信先 URL を、method 属性には GET か POST のどちらかを指定します。GET はURLのクエリとしてデータを付けて送る方法で、データ量が少ない場合に使われます。POST はデータを本文として送る方法で、セキュリティや容量の点で多く使われます。初心者にはまず POST を使い、必要に応じて GET を選ぶと良いでしょう。アクセシビリティを高めるには label タグと input タグを結びつけ、id と for を対応させると読み上げソフトにも伝わりやすくなります。さらに form の送信を制御したい場合は JavaScript で検証を加えることも可能です。以下は基本的な例です。
名前メール

formタグの同意語

フォームタグ: HTMLでフォームを作るためのタグ。
要素として文書内に配置し、ユーザー入力を送信する枠組みを提供します。
フォーム要素: 要素の呼び方のひとつ。フォームを構成する基本的な要素そのものを指します。
HTMLの要素: HTML仕様で定義された、フォームを表す要素名。タグの正式名称です。
HTMLフォーム: HTMLで作られる入力フォーム全体のこと。要素と内部の入力コントロールを含みます。
フォームエレメント: 英語の“form element”の日本語表現。要素を指す言い回しです。
FORM要素: 大文字表記の「FORM要素」。要素を指す技術文書で使われます。
フォームコンテナ: フォーム全体を包み込む容れ物としての意味で使われる表現。要素を指す場合に用いられます。
フォーム本体: フォームそのもの、すなわち入力を受け付ける領域を指す言い方です。

formタグの対義語・反対語

静的表示要素: フォームはユーザー入力を受け取りデータを送信する機能を持ちますが、静的表示要素は情報を表示するだけで入力を受け付けません。例として、divやspanを用いて文章や画像を表示する場面があります。
非入力要素: 入力を受け付けないHTML要素。フォームの入力部ではなく、情報の表示やレイアウト用に使われるdiv・spanなどを指します。
表示専用セクション: データを収集せず、情報を表示することに特化したセクション。フォームで集めるデータを伴いません。
読み取り専用表示: 編集ができない表示。入力欄とは異なり、ユーザーが値を変更して送信する機能を持ちません。
サーバー送信不要の要素: データをサーバーへ送信する目的を持たないUI要素。動的な更新はあっても送信は発生しません。
クライアントサイドのみのUI: 主にブラウザ内（クライアント）で処理され、サーバーへの送信を伴わないインタラクション。
divやspanなどの非入力要素: 日常的に使われる非入力要素の代表。テキスト表示やレイアウト調整に使用します。
入力を受け付けない領域: フォームの反対概念として、質問やデータ入力を受け付けない領域。説明文や見出しを置く場所に使われます。

formタグの共起語

formタグ: HTMLの入力をまとめて送信するための容れ物。フォーム全体を囲み、送信先や送信方法を指定します。
action: フォーム送信先のURLを指定する属性。サーバー上の処理を呼び出します。
method: データを送信するHTTPメソッド。GETかPOSTが主に使われます。
enctype: 送信データのエンコーディング形式。ファイル送信時は multipart/form-data、通常は application/x-www-form-urlencoded です。
novalidate: ブラウザ側の自動検証を無効にします。サーバー側で検証を行う場合に使います。
autocomplete: 入力補完の挙動を制御します。オン/オフや個別フィールド名ごとの設定があります。
input: テキスト入力、パスワード、メールなど、ユーザーがデータを入力する要素の総称です。
label: 入力欄の説明テキストを表示し、アクセシビリティを高める要素。for属性と組み合わせると紐づきます。
textarea: 複数行のテキストを入力するための要素です。
select: 候補の中からひとつを選ぶドロップダウンリストを作る要素です。
option: select要素の中にある選択肢を表す要素です。
button: クリックして送信や他の動作を実行するボタンを作る要素です。
fieldset: 関連する入力をグループ化して見やすくする要素です。
legend: fieldsetのグループ名を表示する見出し要素です。
required: 入力を必須にする属性。空欄を送信できなくします。
pattern: 正規表現で入力値を検証する属性。
minlength: 入力文字数の最小値を設定します。
maxlength: 入力文字数の最大値を設定します。
name: 送信時にデータのキーとして使われる属性。
id: 要素を文書内で一意に識別する識別子。JSやCSSのターゲットにも使われます。
placeholder: 入力欄に表示されるヒントテキスト。
aria-label: スクリーンリーダー向けの説明を提供する属性。視覚障害者の支援につながります。
aria-describedby: 補足説明を別の要素と関連付ける属性。
csrf_token: サーバー側のCSRF対策としてフォームに含めるトークン。悪意のある投稿を防ぎます。
validation: 入力値の正しさを検証する仕組み。クライアント・サーバー双方で行われます。
client-side-validation: ブラウザ側で行う検証。入力のタイミングで即座にフィードバックします。
server-side-validation: サーバー側で行う検証。セキュリティを保つために必須です。
form-data: 送信されるデータの総称。name=value の組み合わせとして送信されます。

formタグの関連用語

formタグ: フォーム全体を定義する要素で、入力要素をまとめてサーバへデータを送信する窓口となる。
action属性: 送信先のURLを指定する属性。
method属性: データの送信方法を決定する属性。主に GET または POST。
enctype属性: 送信データのエンコード形式を指定する属性。代表的には application/x-www-form-urlencoded、multipart/form-data、text/plain。
novalidate属性: ブラウザ側の入力検証を無効にして送信するようにする属性。
autocomplete属性: ブラウザが入力補完を行うかどうかを制御する属性。
target属性: 送信結果を開くウィンドウやフレームを指定する属性。
name属性: フォームに名前を付けて識別する属性。
id属性: DOM上で一意のIDを付与する属性。
input要素: テキストなどの単一データを入力させる基本要素。type属性で具体的な型を決定。
textarea要素: 複数行のテキスト入力を受け付ける要素。
select要素: ドロップダウンなどの選択肢を表示する要素。
option要素: select要素の1つの選択肢を表す要素。
optgroup要素: 複数のoptionをグループ化して整理する要素。
label要素: 入力要素の説明テキストを表示・関連付ける要素。
fieldset要素: フォームを論理的にグループ化する枠組み要素。
legend要素: fieldset内のグループ名を表示する見出し要素。
required属性: 入力が必須であることを示す属性。
pattern属性: 入力値を正規表現で制限する検証ルール。
minlength属性: 入力文字数の最小長を指定する属性。
maxlength属性: 入力文字数の最大長を指定する属性。
min属性: 数値・日付の最小値を指定する属性。
max属性: 数値・日付の最大値を指定する属性。
step属性: 数値や日付の増分間隔を指定する属性。
autofocus属性: ページ読み込み時に自動でフォーカスを当てる属性。
formnovalidate属性: 特定の送信時だけ検証を行わないようにする属性（主にボタン・入力で使用）。
formmethod属性: フォームの送信メソッドを上書きする属性（button/inputに適用）。
formaction属性: 送信先URLを一時的に上書きする属性（button/inputに適用）。
inputタイプ: text: 1行の文字列を入力する基本的なタイプ。
inputタイプ: password: 入力文字を隠して表示するタイプ。
inputタイプ: email: メールアドレス形式を自動検証するタイプ。
inputタイプ: tel: 電話番号の入力に適したタイプ。
inputタイプ: number: 数値のみを受け付けるタイプ。
inputタイプ: date: 日付を選択するタイプ。
inputタイプ: time: 時刻を選択するタイプ。
inputタイプ: datetime-local: 日付と時刻をローカルで選択するタイプ。
inputタイプ: color: 色を選ぶカラー・ピッカーを表示するタイプ。
inputタイプ: search: 検索語を入力するための型。
inputタイプ: url: URL形式を検証する型。
inputタイプ: file: ファイルを選択してアップロードする型。
inputタイプ: hidden: 画面には表示されず、データを送信する型。
inputタイプ: checkbox: 複数選択のON/OFFを表す型。
inputタイプ: radio: 同じグループ内で1つだけ選択させる型。
inputタイプ: submit: フォームを送信するボタン型。
inputタイプ: reset: フォームの入力を初期化するボタン型。
inputタイプ: image: 画像として表示され、クリックで送信を行うボタン型。
aria-label: 視覚的ラベルが表示されない要素にも意味を伝えるラベルを付与するARIA属性。
aria-labelledby: 別の要素をラベルとして参照して紐づけるARIA属性。
aria-describedby: 補足説明を関連付けるARIA属性。
CSRFトークン: CSRF対策として、サーバ側で検証するトークンをフォームに埋め込む仕組み。
GETとPOST: HTTPの送信方法。GETはURLにデータを付与して送信、POSTはボディで送信。
multipart/form-data: ファイルのアップロードを含む送信時に使われるエンコード形式。
application/x-www-form-urlencoded: デフォルトのエンコード形式。座標・文字列をURLエンコードして送信。
text/plain: プレーンテキストとして送信するエンコード形式。
HTML5検証機能: required、pattern、minlength、maxlength、min、max、stepなどを用いたクライアントサイド検証の総称。
デフォルト送信動作: formをサブミットすると、actionに指定されたURLへデータが送信される。