ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせ、資料請求、商品の購入など、事業の売上や成果（コンバージョン）に直結する非常に重要な役割を担うのが「入力フォーム」です。このフォームを構築するために中心となるHTMLタグが、「form」「input」「label」「select」「button」「textarea」です。
「form」タグは、ユーザーが入力したデータをサーバーへ送信するための全体を囲む大枠として機能します。この「form」の中に、実際にユーザーが文字を入力したり選択したりする各種の部品を配置していきます。
名前やメールアドレスなど、1行の短いテキストを入力させる際によく使われるのが「input」タグです。このタグは属性（type）を変更することで、チェックボックスやラジオボタン、パスワード入力欄など、さまざまな形式に変化する非常に汎用性の高いタグです。一方、お問い合わせの具体的な内容や詳細なメッセージなど、複数行にわたる長い文章を入力してもらうためには「textarea」タグを使用します。
また、それぞれの入力欄が「何の項目なのか」をユーザーに分かりやすく伝えるために「label」タグを使用します。この「label」タグを入力欄と正確に紐づけることで、テキスト部分をタップしても入力状態になるなど、特にスマートフォンでの操作性が大きく向上します。そして、入力が完了したデータを送信するために「button」タグや、type属性をsubmitにした「input」タグを使用します。
さらに、ユーザーがフォームに入力した数値の計算結果などをリアルタイムで画面に表示させる際には、HTML5から新たに追加された「output」タグを使用します。例えば、商品の選択に合わせて動的に変化する見積もり金額や、スライダーを動かした際の数値を即座に提示する場面で機能します。このタグを適切に組み込むことで、ユーザーは自身の操作結果を直感的に確認できるようになり、事業用ホームページ（ウェブサイト）におけるフォームの操作性が大きく向上します。
これらのタグを意味論的（セマンティック）に正しく配置し、ユーザーが迷わずに操作できるフォームを設計することは、Webアクセシビリティの確保において重要です。入力途中でユーザーがストレスを感じて離脱してしまうことを防ぎ、事業の機会損失を最小限に抑えることができます。
本ページでは、それぞれのタグの基本的な記述ルールから、ユーザビリティを高め、集客と成果につながるフォーム構築のポイントについて詳しく解説します。
form（フォーム）
<form></form>
ホームページ制作（ウェブサイト制作）の際に使用する<form>タグについてのご説明です。
ホームページを制作する際<form>（フォーム）タグを使用することで、ホームページ（ウェブサイト）内に設置する「フォーム」を定義し、ユーザーが入力することのできる「入力フォーム」を設置することができます。
<form> フォームの定義、入力フォームをつくる
<form>タグで、フォームの全体を定義します。ホームページ制作で入力・送信フォームを作成する場合に使用します。
<form>で囲った間に、 <input> <select> <button> <textarea>でフォームの部品を配置します。
<form>タグを使用することによりフォームが設置できるため、お問い合わせフォームなどのユーザー入力フォームをウェブサイト内に設置することができます。
action
action=””
メールアドレス
mailto:
続けてメールアドレスを指定
CGIなどの処理プログラム
送信先プログラムのURLを指定
method
method=””
フォームデータの送信形式、送信時の転送方法（HTTP method）を指定
post
get
一般的にはpost
enctype
enctype=””
送信時のデータ形式（MIMEタイプ）を指定
method=”post”を指定した場合に使用
enctype属性値
application/x-www-form-urlencoded
初期値（無指定）
%と英数字で構成されるURLエンコード形式
text/plain
プレーンテキスト
multipart/form-data
マルチパートデータ。ファイル、日本語など2バイトフォント、
バイナリデータを含むフォーム送信の場合に指定
accept
accept=””
CGIプログラム等のデータの受け側で、処理可能なMIMEタイプを指定
accept-charset
accept-charset=””
CGIプログラム等のデータの受け側で、受付可能な文字セットを指定
name
name=””
スクリプト言語などから参照できるよう名前を指定
target
target=””
フォーム送信の結果を表示するフレーム、ウィンドウの名前を指定
<form></form>
ホームページ制作・SEOの1ポイント
ホームページ制作でフォームというとメールフォームなどが浮かびますが、アンケートフォームや人気投票などでも多く利用されています。設定によってエラーが出やすい項目ですので、作成時には設定項目にミスがないかよくチェックする必要のあるタグです。
input（インプット）
<input>
ホームページ制作（ウェブサイト制作）の際に使用する<input>タグについてのご説明です。
ホームページ制作において<input>タグ（インプット）は、ホームページ（ウェブサイト）に設置するフォームの部品を作成する際に使用します。
<input>タグは、ユーザーがフォームに入力してアクションを起こす際に使用するタグで、ホームページ制作においてはサイト内検索やメールフォームなどを作る時によく使用されます。
<input> 入力フィールドの定義、フォームの構成部品を作成
<input>タグで、フォーム（<form>）を構成する部品(テキスト入力欄、実行ボタンなど）を作成します。
データが送信時に <input name=””>で付けたデータ名とその値を一組にして、
<form method=””（転送方法） action=””（指定したサーバー上のファイル）> に送られます。
この仕組みを使って、ウェブサイト上にメールフォームやアンケートなどを設置することができます。
他のプログラムも必要になりますが、検索機能を実装した際、検索ワードの入力や、検索実行ボタンなども、この<input>の仕組みを利用します。
type
type属性の値の指定で、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品になる。
type=”text”
1行テキストボックス。
通常のテキストを入力するフィールド。2行以上は、<textarea>を使用する。
type=”checkbox”
チェックボックス。チェックボックスは複数選択が可能。
checked属性を指定で、その項目についてはあらかじめチェックの付いた状態となる。
type=”radio”
ラジオボタン。複数の中から一つしか選択できない。
複数を1つのグループとして認識させるには、name属性で同一名を付ける。
checked属性を指定で、その項目についてはあらかじめチェックの付いた状態となる。
type=”submit”
送信ボタン。
type=”reset”
リセットボタン。
それまでに入力した情報をキャンセルして初期状態に戻す。
type=”button”
汎用ボタン。
type=”password”
パスワード入力ボックス。入力したテキストが「*」などに置き換えて表示される。
ただし、データが暗号化されるわけではない。
type=”file”
ファイル名の入力フィールドと参照ボタンが表示され、サーバーへファイルを送信する時に、送信するファイルを選択する。
type=”hidden”
隠しデータをサーバーに送信する。
このタイプのデータは、画面上には表示されないが、value属性で指定した値がサーバーへ送信される。
type=”image”
画像のボタン。使用する画像ファイルはsrc属性で指定。alt属性必須。
name
name=””
<input>
ホームページ制作・SEOの1ポイント
ホームページ作成時にこのインプットタグを利用すると、ホームページ内に、メールフォーム・問い合わせフォームなどを設置することができます。雑誌であれば、「編集部あてのはがき」ページを生成する際に使用するといった印象です。インプットの仕組みは検索ボックスの作成にも応用することができるため、サイト内検索にも利用されます。フォームの動作自体はSEOに影響を与えないと考えられますが、肝心要のホームページからの問い合わせなどに影響を与えますので、動作確認はしっかりと行う必要があります。
output（アウトプット）
<output></output>
ホームページ制作（ウェブサイト制作）の際に使用する<output>タグについてのご説明です。
ホームページ制作において<output>（アウトプット）タグは、計算結果を示す際に使用するタグです。
<output> 計算結果
ホームページ制作でページに<output>タグを使用することで、該当箇所が計算結果であることを示します。アウトプット。
何かの計算やユーザによる操作の結果である計算結果を示す場合に使用します。
for
for=””
計算結果の値とそれが何を表しているのかを、ＩＤ名で明確に関連付けます
form
form=””
どのform要素と関連しているのかを明確に示します
name
name=””
要素に名前を付けます
<output></output>
ホームページ制作・SEOの1ポイント
このアウトプットも計算結果を示すためのタグとして、HTMLの一つですが、ほとんどのウェブページではこのような正規のマークアップが施されていないことが実情です。SEO内部対策として、コンテンツのオリジナル性を高めるため、しっかりとタグを指定する内部SEOを心がけましょう。
label（ラベル）
<label></label>
ホームページ制作（ウェブサイト制作）の際に使用する<label>タグについてのご説明です。
ホームページ制作において<label>（ラベル）タグは、フォーム部品のラベルとして、フォーム部品と項目名を関連付ける際に使用します。
<label> フォーム部品のラベル、フォーム部品と項目名を関連付ける
<label>タグはフォームの構成部品と、 その項目名（ラベル）を関連付けるための要素です。ラベル。
<input>をlabel要素で関連付けることでチェックボックスやラジオボタンは、項目名のテキストをクリックしても項目が選択できるようになります。
<label>
<input>
</label>
for
for=””
部品の名称
<label></label>
ホームページ制作・SEOの1ポイント
「フォーム部品のラベル」という表現は、ホームページ制作に馴染みのある方なら意味がわかるかもしれませんが、一般的にはわかりにくい表現です。
例えば、メールフォームの中の「名前」の項目に、「この部分は名前」という付箋を付けて、プログラムを利用して他のページでその部分を使用する時に、「あのページの入力フォームの『名前』の属性が付けられた文字列を呼び出してください」というようなケースにこのような「フォーム部品のラベル」という概念が使用されます。
select（セレクトボックス）
<select>（セレクト）タグは、ホームページ（ウェブサイト）の中に、セレクトボックス（回答選択メニュー）を作成して設置する際に使用します。
button（ボタン）
<button></button>
ホームページ制作（ウェブサイト制作）の際に使用する<button>タグについてのご説明です。
ホームページを制作する時に<button>（ボタン）タグを使うことでホームページ（ウェブサイト）の中にボタンを作成することができます。
<button> ボタン
<button>タグは、ホームページ制作においてボタンを作成するためのタグです。 基本的には<input type=”button”> と同様の機能を持ったタグです。
ボタン上に表示させる画像の指定、テキスト表示ができます。
type
初期値はtype=”button”
submit
送信
type=”submit”
reset
リセット
type=”reset”
button
汎用ボタン
type=”button”
<button></button>
ホームページ制作・SEOの1ポイント
ホームページの強みの一つは、ユーザーがその場ですぐにアクションを起こすことができる点です。そしてメールフォームなど、ユーザーが入力したデータが運営者側へと送信された場合、項目の転記などの手間が省けるという強みもあります。CVR向上にはボタンの工夫も良いでしょう。
textarea（テキストエリア）
<textarea></textarea>
ホームページ制作（ウェブサイト制作）の際に使用する<textarea>タグについてのご説明です。
ホームページ制作において<textarea>（テキストエリア）タグは、フォーム入力欄において、複数行の入力フィールド（テキスト入力欄）を設置する場合に使用します。
ホームページ制作において、お問い合わせフォームなどフォームを利用する場合に使用します。
<textarea> 複数行の入力フィールド（テキスト入力欄）を作成
<textarea>タグを使用することで、複数行の入力フィールドを作成します。
一般的にはフォームの部品として扱われ、サイト内のメールフォームの任意記述欄（お問い合わせ本文）などによく用いられます。テキストエリア。
記述されたテキストは、入力フィールドの初期値として表示されます。
ホームページ制作においては、お問い合わせフォームの本文入力欄やコメント欄に用いられることがほとんどです。
autofocus
autofocus=””
自動フォーカスを指定
cols
cols=””
一行当たりの最大文字数の目安を指定。初期値 20
disabled
disabled=””
操作を無効にする
form
form=””
どのフォームと関連付けるかを<form id=””>で指定
maxlength
maxlength=””
入力可能な最大文字数を指定
name
name=””
入力フィールドの名前を指定
placeholder
placeholder=””
ユーザー入力に関するヒントを短めのテキストで指定
readonly
readonly=””
ユーザーによるテキスト編集を不可にして読み取り専用にする
required
required=””
入力必須を指定
rows
rows=””
表示行数を指定。初期値 2
wrap
wrap=””
入力テキストの改行ルールを指定
<textarea></textarea>
レイアウト崩れを防ぐためのリサイズ制御
textareaタグをそのまま設置するだけでは、ユーザーがブラウザの機能を使って入力エリアのサイズを自由に変更できてしまうため、意図したデザインが崩れるリスクがあります。
特に横方向への拡大は、スマートフォンなどの狭い画面でレイアウトを大きく損なう原因となります。そのため、私たちWeb制作の現場では、CSS（スタイルシート）の resize プロパティを使用して resize: vertical; （縦方向のみ許可）や resize: none; （変更不可）を指定し、ユーザーの利便性とデザインの整合性を両立させるのが標準的な実装です。
プレースホルダーに頼らないアクセシビリティの確保
入力欄の中に薄い文字でヒントを表示する placeholder 属性は便利ですが、これをラベル（項目名）の代わりとして使用することは推奨されません。入力し始めると文字が消えてしまうため、ユーザーが「何を入力すべき欄だったか」を忘れてしまう可能性があるからです。
また、視覚障害者が利用するスクリーンリーダーは、placeholderを正しく読み上げない場合があります。必ず
iPhoneなどのモバイル端末における入力体験の最適化
スマートフォン、特にiPhone（iOS）でフォームに入力する際、文字サイズが16px未満に設定されていると、ブラウザが勝手に画面をズームしてしまう仕様があります。これはユーザーにとって予期せぬ挙動であり、入力の妨げになります。
そのため、textareaタグやinputタグに対しては、PC向けのデザインであっても、CSSで font-size: 16px; 以上を指定しておくことが、モバイルユーザーのストレスを軽減するための重要なテクニックとなります。細かな部分ですが、こうした積み重ねが「使いやすいホームページ」という評価につながり、事業の信頼性を高めることになります。
ホームページ制作・SEOの1ポイント
textareaなどを利用してホームページに設置するメールフォームは、「お問い合わせ」を獲得する際に重要なパーツです。ホームページへのお問い合わせ率向上のために、こうしたエントリーフォームの最適化を検討してみても良いでしょう。
また、メールフォームなどのプログラムを利用したページは、サーバーのphpバージョン変更などで機能しなくなることもまれにありますので注意が必要です。こうしたエラーはお問い合わせ自体を止めてしまう事になりかねませんので特に注意が必要です。
フォーム要素の適切な組み合わせとCVR改善
お問い合わせフォームをより使いやすく、かつ事業の成果（CVR：コンバージョン率）に結びつけるためには、これまで紹介したタグに加えて、プルダウンメニューを作成する「select」タグなどを適切に組み合わせる必要があります。ユーザーの入力負担をいかに軽減するかが、フォーム最適化における重要課題です。
inputとselectの使い分けによる入力負担の軽減
ユーザーに情報を選択してもらう場面では、項目の数に応じて「input」タグ（ラジオボタンやチェックボックス）と「select」タグ（プルダウンメニュー）を使い分けることが求められます。選択肢が2〜4個程度と少ない場合は、すべての選択肢が最初から見えているラジオボタンを使用するほうが、ユーザーは一目で全体像を把握でき、操作の手間も減ります。
一方で、都道府県の選択や多数のサービス一覧など、選択肢が非常に多い場合は「select」タグを使用し、画面の占有面積を抑えつつ整理された形で提示します。状況に応じた最適なタグの選択が、ユーザーの離脱を防ぐことにつながります。
labelタグによる操作範囲の拡大とアクセシビリティ向上
スマートフォンが主流となった現在のホームページ（ウェブサイト）において、「label」タグの適切な使用は特に重要です。ラジオボタンやチェックボックスの小さな枠を指で正確にタップすることは、ユーザーにとって大きなストレスになります。
「label」タグを用いてテキストと入力部品（inputやselect、textarea）を正しく関連付けることで、テキスト部分をタップしてもチェックが入るようになり、操作範囲が大幅に広がります。より専門的には、この実装は音声読み上げソフト（スクリーンリーダー）が入力項目を正確に読み上げるためにも必須であり、あらゆるユーザーに優しいフォーム設計を実現します。
buttonタグと送信完了までのスムーズな導線設計
すべての入力が完了した後にユーザーが押す送信ボタンは、「button」タグを用いて実装します。この送信ボタンは、ユーザーが次に行うべきアクションを明確にするため、視覚的に目立たせ、タップしやすい十分な大きさを確保することが重要です。
ボタンのテキストも、単に「送信」とするのではなく、「無料で資料を請求する」「この内容で問い合わせる」など、ユーザーがこれから起こす行動と得られる結果を具体的に記載することで、送信に対する心理的なハードルを下げることができます。各HTMLタグが持つ本来の役割を活かし、ユーザーに寄り添ったフォームを構築することが、事業の成長を後押しします。
入力フォーム最適化（EFO）によるコンバージョン改善
HTMLタグを正しく設定することは、フォーム作成の第一歩に過ぎません。事業の売上や問い合わせ数を最大化するためには、ユーザーがフォームに入力する際の心理的な負担を極限まで減らす「EFO（入力フォーム最適化）」の施策が非常に重要です。
入力項目の数を必要最小限に絞り込んだり、全角と半角の自動変換機能を導入したりするなど、より専門的にはアクセスデータに基づいた細やかな調整が求められます。せっかくホームページ（ウェブサイト）へ集客した見込み顧客を途中で離脱させないための具体的な改善手法については、「EFO（入力フォーム最適化）」のページで詳しく解説しています。
isindex（廃止）
<isindex>
ホームページ制作（ウェブサイト制作）の際に使用する<isindex>タグについてのご説明です。
ホームページ制作において<isindex>タグは、検索キーワードの入力欄を作る際に使用します。
<isindex> 検索キーワードの入力欄を作る
<isindex>タグは、クエリを送信するURLを示しながら、サイト内検索などで使用する検索キーワードの入力欄を作ります。ただし、ホームページ制作では一般的に<input>が使用されるため、あまり使われることはないかもしれません。
action
クエリを送信するURLを指定 アクション
action=””
URL
廃止。
<isindex>代替タグ
<isindex>は、廃止されたため、<input>を使用します。
<input>
<isindex>
ホームページ制作・SEOの1ポイント
isindexなどホームページ制作で使用するHTMLタグの中で、同じような機能を持つタグは、シンプルな一つのタグに統一されることがよくあります。一つのことを実装するために、方法論が複数あったものの、やり方が統一されたという印象です。HTMLの仕組みは、求める結果が同じでも様々なやり方があり、手順の少なさなどの面で甲乙はありますが、どの方法を使っても特に問題はありません。なお、見出しタグのように論理構造を示すようなHTML以外はSEOに直接的な影響を与えないと考えられます。
ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
ホームページ（ウェブサイト）のHTML編集方法
ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページ制作・SEO・Webマーケティングなら京都のWeb制作会社 株式会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成（ウェブサイト制作）、SEO・Webマーケティング」
ホームページ制作 京都のWeb制作会社（ホームページ制作会社）株式会社ファンフェアファンファーレは、Web集客・Webマーケティングを意識したWordPressサイト制作を中心にSEO・LLMO・GEO・AIO対策やコンテンツ制作に特化した制作会社です。ホームページ制作やリニューアル、修正はもちろん、技術的SEOからセマンティックHTMLを含めたSEO（SEO対策）やAI検索対策、コンテンツマーケティング、WebマーケティングにかかるWebコンサルティングなど様々なサービスを提供しています。
WordPressサイト制作
WordPressサイト制作やカスタマイズもおまかせください！サイト構造の再設計・セマンティックHTML・AI対応を含めたWordPressのSEOやホームページをWordPressサイトへと変更する「WordPress化」、オウンドメディア構築も可能です！
ホームページ修正・更新
ホームページの修正やページ更新、ページ追加、サイト内部の様々な修正など、各種ホームページの修正・更新の代行に対応しております。エラー修正やページ内容の変更など、ホームページの修正や更新にかかる単発のご依頼で対応させていただいておりますので、HTMLの修正をはじめ、軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
Related page
-
ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせや資料請求を獲得するための「入力フォーム」は、事業の成果に直結する非常に重要な要素です。そのフォーム内で、都道府県の選択や、希望するサービス内容の選択など、複数の選択肢を提示する際に使用されるのが、HTMLの「select」「datalist」「option」「optgroup」といったタグで
-
ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせや商品の注文を受け付ける「入力フォーム」は、事業の売上や成果に直結する非常に重要な役割を持っています。この入力フォームをより使いやすく、整理された状態にするために活躍するHTMLタグが、「fieldset」と「legend」です。 「fieldset」タグは、フォーム内にある複数の入力項目（i
-
ホームページ（ウェブサイト）を構成するHTML文書の中には、ブロック要素とインライン要素という、ホームページを構成する要素の分類があります。これは要素の属性として、スペースをどのように取るかという属性の違いとなります。 このブロック要素とインライン要素にはそれぞれ配置のルールがあり、ウェブページを生成する際には、意図せず文書の論理構造がおかしくなったり、ブラ
-
現在のホームページ（ウェブサイト）制作において、動画や音声、PDFなどの外部コンテンツをページ内に表示させる技術は大きく進化しています。かつて、これらのリッチメディアや双方向性のあるコンテンツを表示するために頻繁に使用されていたのが、HTMLの「object」「embed」「noembed」「param」「applet」といったタグです。 インターネットの普
-
ホームページ（ウェブサイト）制作において、ページに動きをつけたり、ユーザーの行動を分析したりするために、JavaScriptをはじめとするプログラムは非常に重要な役割を果たしています。このプログラムをホームページ（ウェブサイト）内に組み込むために使用されるのが、HTMLの「script」タグです。また、これと対になって使用されることが多い「noscript」
