htmlタグ｜form・input・output・label・button・textarea｜フォーム

ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせ、資料請求、商品の購入など、事業の売上や成果（コンバージョン）に直結する非常に重要な役割を担うのが「入力フォーム」です。このフォームを構築するために中心となる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>でフォームの部品を配置します。

フォームに入力されたデータをどこに、どのように送るかを指定する重要な設定項目です。ここが間違っていると、データが正常に送信されません。

action属性による送信先の指定

action属性は、入力されたデータを処理するプログラムの場所を指定します。
通常は、サーバー上に設置したCGIやPHPなどの処理プログラムのURLを指定します。
また、「mailto:」に続けてメールアドレスを記述することで、ユーザーのメールソフトを直接立ち上げる設定も可能ですが、現在のホームページ制作においてはセキュリティや使い勝手の観点から、専用のプログラムへデータを渡す方法が主流です。

method属性による転送方法の指定

method属性は、フォームデータを送信する際の形式、つまり転送方法（HTTP method）を指定します。
指定できる値は「post」と「get」の2種類です。お問い合わせフォームのように、個人情報や長い文章を送信する場合は一般的に「post」を指定します。「get」はサイト内検索など、送信するデータ量が少なく、URLに検索キーワードなどのパラメータを含めても問題ない場合に使用します。

送信するデータの形式を制御する属性

文字データだけでなく、ユーザーから画像や書類ファイルを送信してもらう場合、データ形式の指定が正しく行われていないとサーバー側で正しく処理できません。

enctype属性によるMIMEタイプの指定

enctype属性は、送信時のデータ形式（MIMEタイプ）を指定するための属性です。この属性は「method=”post”」を指定した場合にのみ機能します。
値を指定しない場合の初期値は「application/x-www-form-urlencoded」となり、データは「%」と英数字で構成されるURLエンコード形式で送信されます。
「text/plain」を指定すると、装飾のないプレーンテキストとして送信されます。
ファイル添付機能を持たせる場合や、日本語などの2バイトフォント、バイナリデータを含むフォーム送信の場合は、必ず「multipart/form-data」を指定します。この指定がないと、ファイル自体がサーバーへ送られません。

accept属性とaccept-charset属性

accept属性は、データを受け取るCGIプログラム等の側で、処理可能なMIMEタイプを指定するために使います。
一方のaccept-charset属性は、プログラム側で受付可能な文字セット（文字コード）を指定します。これにより、サーバー側とユーザーのブラウザ間での文字化けを防ぐ役割を持たせることができます。

フォームの識別と結果画面の表示に関する属性

JavaScriptを用いた動的な入力チェックや、送信完了後の画面遷移などに関わる設定項目です。

name属性によるフォームの名前付け

name属性は、そのフォーム自体に名前を付けるために使用します。
一つのページ内に複数のフォーム（例えば、ヘッダーの検索フォームとページ下部の問い合わせフォームなど）がある場合に、スクリプト言語などから特定のフォームを正確に参照し、処理を実行させるために指定します。

target属性による結果画面の表示先指定

target属性は、フォーム送信の結果（送信完了画面やエラー画面など）を表示するフレームやウィンドウの名前を指定します。
別のタブや新しいウィンドウで結果を開きたい場合などに利用しますが、ユーザーにとって画面遷移が分かりにくくなることもあるため、用途に合わせて慎重に設定します。

<form></form>

ホームページ制作・SEOの1ポイント

ホームページ制作でフォームというとメールフォームなどが浮かびますが、アンケートフォームや人気投票などでも多く利用されています。設定によってエラーが出やすい項目ですので、作成時には設定項目にミスがないかよくチェックする必要のあるタグです。

input（インプット）

<input>

ホームページ制作（ウェブサイト制作）の際に使用する<input>タグについてのご説明です。

ホームページ制作において<input>タグ（インプット）は、ホームページ（ウェブサイト）に設置するフォームの部品を作成する際に使用します。

<input>タグは、ユーザーがフォームに入力してアクションを起こす際に使用するタグで、ホームページ制作においてはサイト内検索やメールフォームなどを作る時によく使用されます。

<input> 入力フィールドの定義、フォームの構成部品を作成

<input>タグで、フォーム（<form>）を構成する部品(テキスト入力欄、実行ボタンなど）を作成します。

データが送信時に <input name=””>で付けたデータ名とその値を一組にして、
<form method=””（転送方法）　action=””（指定したサーバー上のファイル）> に送られます。

この仕組みを使って、ウェブサイト上にメールフォームやアンケートなどを設置することができます。

他のプログラムも必要になりますが、検索機能を実装した際、検索ワードの入力や、検索実行ボタンなども、この<input>の仕組みを利用します。

スマートフォンからのアクセスが主流となった現在、ユーザーにとって入力しやすいフォームを用意することは大変重要です。適切な属性を設定することで、入力時のストレスを大きく軽減できます。

inputmode属性による入力モードの最適化

inputmode属性を指定すると、スマートフォンなどで入力欄をタップした際に表示されるソフトウェアキーボードの種類を制御できます。
電話番号の入力欄には inputmode=”tel” と設定します。これにより、ユーザーが入力欄に触れた瞬間に数字キーボードが表示されるようになります。メールアドレスの場合は inputmode=”email” とすることで、英字や「@」が打ちやすいキーボードに切り替わります。
ユーザーが手動でキーボードを切り替える手間を省けるため、事業用の問い合わせフォームなどでは必ず設定しておきたい項目です。

autocomplete属性による自動入力の支援

autocomplete属性は、ブラウザに保存されているユーザーの氏名や住所、電話番号などを自動で入力させるための設定です。
名前の入力欄に autocomplete=”name”、メールアドレスに autocomplete=”email” などと指定します。ユーザーの入力負担が大幅に減るため、フォームからの離脱を防ぐ効果が期待できます。

placeholder属性による入力例の表示

placeholder属性を使うと、入力欄が空のときに薄いグレーの文字で入力例を表示できます。
具体的な形式を示すことで、ユーザーの入力間違いを防ぎます。

type属性による入力部品の使い分け

type属性の値を指定することで、一行テキストボックスやチェックボックス、ラジオボタン、送信ボタンといったさまざまな部品に変化します。用途に合わせて適切な値を設定します。

type=”text”（1行テキストボックス）

氏名や簡単な住所など、通常の短いテキストを入力するためのフィールドです。
文章のような2行以上の長いテキストを入力させたい場合は、inputタグではなく textareaタグを使用します。

type=”email”・type=”tel”・type=”url”（特定形式のテキスト）

それぞれメールアドレス、電話番号、URLの入力に特化したフィールドです。
スマートフォンのキーボードが自動的に適したものへ切り替わるほか、ブラウザによっては入力形式が正しいかどうかの簡易的なチェックを行ってくれます。

type=”checkbox”（チェックボックス）

複数の項目の中から該当するものをすべて選べるようにする部品です。
checked属性を指定しておくと、あらかじめその項目にチェックが付いた状態にできます。

type=”radio”（ラジオボタン）

複数の選択肢の中から一つだけを選ばせるための部品です。
複数のラジオボタンを1つのグループとして認識させるには、それぞれのname属性に同一の名称を付けます。こちらもchecked属性を指定することで、初期状態でチェックの付いた項目を設定できます。

type=”submit”・type=”reset”・type=”button”（各種ボタン）

type=”submit” は、フォームに入力した情報をサーバーへ送信する実行ボタンです。
type=”reset” は、それまでに入力した情報をキャンセルして初期状態に戻すリセットボタンになります。
type=”button” は、汎用的なボタンです。JavaScriptなどのプログラムと組み合わせて、何らかの処理を実行させる際に使います。

type=”password”（パスワード入力ボックス）

パスワードを入力するためのボックスです。入力したテキストが「*」や「●」などに置き換えて表示されます。
ただし、画面上で見えなくなるだけでデータそのものが暗号化されるわけではないため、ホームページのSSL化（通信の暗号化）が別途必要です。

type=”file”（ファイル送信）

ファイル名の入力フィールドと参照ボタンが表示されます。
ユーザーの端末から画像や文書ファイルを選んでもらい、サーバーへファイルを送信する時に使います。

type=”hidden”（隠しデータ）

隠しデータをサーバーに送信するための設定です。
画面上には表示されませんが、value属性で指定した値がサーバーへ送信されます。ユーザーに見せる必要はないものの、裏側で処理に必要なデータを渡す際に利用します。

type=”image”（画像ボタン）

画像を送信ボタンとして使用します。
使用する画像ファイルはsrc属性で指定し、alt属性で代替テキストを必ず設定します。

name属性の役割とデータの識別

サーバー側にデータを送信した際、どの項目に入力されたデータなのかを判別するためにname属性を使用します。

name属性による名前付け

すべての入力部品には適切な name=”” を付与します。
これにより、送信された値が何のデータであるかをサーバー側が正確に把握し、正しい処理を進めることができます。

<input>

ホームページ制作・SEOの1ポイント

ホームページ作成時にこのインプットタグを利用すると、ホームページ内に、メールフォーム・問い合わせフォームなどを設置することができます。雑誌であれば、「編集部あてのはがき」ページを生成する際に使用するといった印象です。インプットの仕組みは検索ボックスの作成にも応用することができるため、サイト内検索にも利用されます。フォームの動作自体はSEOに影響を与えないと考えられますが、肝心要のホームページからの問い合わせなどに影響を与えますので、動作確認はしっかりと行う必要があります。

output（アウトプット）

<output></output>

ホームページ制作（ウェブサイト制作）の際に使用する<output>タグについてのご説明です。

ホームページ制作において<output>（アウトプット）タグは、計算結果を示す際に使用するタグです。

<output>  計算結果

ホームページ制作でページに<output>タグを使用することで、該当箇所が計算結果であることを示します。アウトプット。

何かの計算やユーザによる操作の結果である計算結果を示す場合に使用します。

HTMLのoutputタグを使用することで、該当箇所が「何らかの計算結果」であることをブラウザやシステムに対して明確に示すことができます。ホームページ上に料金シミュレーターや見積もり計算ツールを設置する場合、ユーザーが入力した数値をもとにリアルタイムで計算結果を表示する仕組みを作ることがあります。このような、何かの計算やユーザーによる操作の結果を表示する部分にoutputタグを使用します。より専門的には、ただ単に文字として数値を表示するだけでなく、それが「計算によって導き出された値である」という意味を持たせることが、正しいHTML構造の構築につながります。

計算結果の意味を明確にするoutputタグの役割

outputタグは、デザインを変えるためのものではなく、そこにあるデータが何を表しているのかを定義するためのタグです。事業用のホームページでは、ユーザーの利便性を高めるために動的な計算機能を設ける場面が多くあります。

ユーザーの操作に対する計算結果を示す

例えば、複数の商品を選択した際の合計金額や、購入数に応じた単価の変動、ローンの月々のお支払い額を算出するシミュレーション機能などで活躍します。ユーザーが入力欄に数値を打ち込んだり、スライダーを動かしたりした結果として画面に表示される数値を、outputタグで囲んで設定します。

アクセシビリティへの配慮

JavaScriptなどのプログラムを使って計算結果を画面に表示させる際、単なるdivタグやspanタグで数値を表示させることも技術的には可能です。しかし、outputタグを正しく使用することで、音声読み上げソフトなどを利用しているユーザーに対しても、それが単なるテキストではなく「計算された結果のアウトプットであること」を適切に伝えることができます。誰にとっても使いやすいホームページを作る上で大変重要です。

outputタグに付与する3つの主要な属性

outputタグ単体でも使用できますが、いくつかの属性を組み合わせることで、どの入力欄から計算された結果なのかをプログラムやブラウザへ正確に伝えることができます。

for属性による入力元との関連付け

for属性（for=””）は、計算結果の値と、その計算の元になった入力欄が何を表しているのかを明確に関連付けるために使用します。計算の元となるinputタグなどに割り当てられたID名を指定することで、どの入力項目の結果であるかを示します。計算に必要な要素が複数ある場合は、半角スペースで区切って複数のIDを指定することも可能です。

form属性による対象フォームの指定

form属性（form=””）は、そのoutputタグがどのform要素（フォーム全体）と関連しているのかを明確に示すために使います。通常、outputタグはformタグの中に配置しますが、ホームページのデザインやレイアウトの都合上、formタグの外に配置しなければならない場合もあります。そのような時に、関連付けたいformタグのID名を指定することで、正しくフォームの構成部品として機能させることができます。

name属性による要素の名前付け

name属性（name=””）は、output要素自体に識別用の名前を付けるための設定です。JavaScriptなどのスクリプト言語から要素を特定して新しい計算結果を書き換えたり、入力された他のデータとあわせて関連する処理を実行したりする際に、参照するための名前として利用します。

<output></output>

ホームページ制作・SEOの1ポイント

このアウトプットも計算結果を示すためのタグとして、HTMLの一つですが、ほとんどのウェブページではこのような正規のマークアップが施されていないことが実情です。SEO内部対策として、コンテンツのオリジナル性を高めるため、しっかりとタグを指定する内部SEOを心がけましょう。

label（ラベル）

<label></label>

ホームページ制作（ウェブサイト制作）の際に使用する<label>タグについてのご説明です。

ホームページ制作において<label>（ラベル）タグは、フォーム部品のラベルとして、フォーム部品と項目名を関連付ける際に使用します。

<label> フォーム部品のラベル、フォーム部品と項目名を関連付ける

<label>タグはフォームの構成部品と、 その項目名（ラベル）を関連付けるための要素です。ラベル。

<input>をlabel要素で関連付けることでチェックボックスやラジオボタンは、項目名のテキストをクリックしても項目が選択できるようになります。

<label>
<input>
</label>

HTMLのlabelタグは、フォーム部品（inputタグなど）とその項目名となるテキストを関連付けるために使用します。特にチェックボックスやラジオボタンを使用する際、label要素で適切に関連付けることで、小さなボタン部分だけでなく項目名のテキストをクリックしても項目が選択できるようになります。事業用のホームページに設置するお問い合わせフォームにおいて、ユーザーの入力しやすさを大きく高める設定です。より専門的には、単にテキストを並べるのではなく、for属性を用いて部品同士を明確に紐付けることが正しいHTML構造の構築につながります。今回は、このlabelタグの役割とfor属性の設定について解説します。

labelタグによる入力しやすさの向上とfor属性の役割

お問い合わせフォームなどを作成する際、labelタグとfor属性を組み合わせることで、ユーザーにとって直感的で操作しやすい画面を作ることができます。スマートフォンのように画面が小さく指で操作する環境では、特に重要な設定項目です。

for=””

テキストクリックによる選択操作の実現

アンケートの選択肢などに見られるチェックボックスやラジオボタンは、標準の状態では四角や丸の小さな入力部品そのものをクリック（タップ）しないとチェックを入れることができません。しかし、label要素で関連付けを行うと、その横に書かれた「はい」「いいえ」といった項目名のテキストをクリックするだけでも部品が選択されるようになります。操作できる範囲が広がるため、ユーザーの入力時のストレスを大きく軽減できます。

for属性を用いた関連付けの方法

テキストと入力部品を関連付ける際、for属性（for=””）を使用します。具体的には、対象となるinputタグにid属性で任意の部品名称（ID名）を付け、labelタグのfor属性に同じID名を指定します。これにより、デザインの都合で離れた場所に配置されているテキストと入力部品であっても、ブラウザやプログラムはそれらが一つのセットであると正確に認識します。

labelタグ内にinputタグを入れ込む方法

for属性を使用せずに関連付ける記述方法もあります。labelタグの開始タグと終了タグの間に、関連付けたいテキストとinputタグの両方を直接含める方法です。この記述によっても、ブラウザはテキストと入力部品が関連していると判断し、テキストをクリックして項目を選択させることが可能です。用途やホームページのデザイン要件に合わせて、for属性を使った明示的な紐付けと使い分けます。

音声読み上げソフトへの対応

for属性を使って正しく関連付けを行うことは、見た目の操作性向上だけでなく、アクセシビリティの観点からも重要です。視覚に障害を持つ方が音声読み上げソフトを利用してホームページ（ウェブサイト）を閲覧する際、入力フォームに進むと、関連付けられたlabelのテキストが読み上げられます。これにより、ユーザーは今どの項目を選択しているのかを正確に把握することができます。誰にとっても使いやすい入力フォームにするために、必ず設定しておきたい属性です。
<label></label>

ホームページ制作・SEOの1ポイント

「フォーム部品のラベル」という表現は、ホームページ制作に馴染みのある方なら意味がわかるかもしれませんが、一般的にはわかりにくい表現です。

例えば、メールフォームの中の「名前」の項目に、「この部分は名前」という付箋を付けて、プログラムを利用して他のページでその部分を使用する時に、「あのページの入力フォームの『名前』の属性が付けられた文字列を呼び出してください」というようなケースにこのような「フォーム部品のラベル」という概念が使用されます。

select（セレクトボックス）

<select>（セレクト）タグは、ホームページ（ウェブサイト）の中に、セレクトボックス（回答選択メニュー）を作成して設置する際に使用します。

select（セレクト）

button（ボタン）

<button></button>

ホームページ制作（ウェブサイト制作）の際に使用する<button>タグについてのご説明です。

ホームページを制作する時に<button>（ボタン）タグを使うことでホームページ（ウェブサイト）の中にボタンを作成することができます。

<button> ボタン

<button>タグは、ホームページ制作においてボタンを作成するためのタグです。 基本的には<input type=”button”> と同様の機能を持ったタグです。

ボタン上に表示させる画像の指定、テキスト表示ができます。

buttonタグとinputタグの決定的な違いとデザインの自由度

inputタグでも送信ボタンや汎用ボタンを作成できますが、buttonタグを使うことでホームページのデザインの幅が大きく広がります。具体的にどのような違いがあるのかを解説します。

画像やアイコンをボタン内に自由に配置できる

inputタグの場合、ボタンに表示させる文字はvalue属性で指定するため、基本的にはプレーンな文字しか表示できません。一方、buttonタグは開始タグと終了タグの間に、imgタグを使って画像を配置したり、文字の一部だけ色を変えたり、改行を入れたりすることができます。これにより、アイコンとテキストを組み合わせた分かりやすいボタンや、CSSを用いてより視覚的に優れたボタンをホームページ上に設置しやすくなります。

buttonタグを設置する際は、そのボタンがどのような役割を果たすのかをtype属性で指定します。これを正しく設定しないと、意図しない動作を引き起こすことがあります。

type=”submit”（送信ボタン）

フォームに入力されたデータをサーバーへ送信するための設定です。お問い合わせフォームの「送信する」ボタンなどに使用します。注意点として、formタグの中でbuttonタグを使用し、type属性の指定を省略した場合、多くのブラウザではこの「submit（送信）」として扱われます。そのため、送信以外の目的でボタンを設置する場合は特に注意が必要です。

type=”reset”（リセットボタン）

ユーザーがフォームに入力した内容を取り消し、初期状態に戻すためのボタンです。入力項目が非常に多いフォームなどで、すべて最初から入力し直したい場合に利用します。

type=”button”（汎用ボタン）

ボタン自体にはデータの送信やリセットといった特定の機能を持たない、汎用的なボタンの役割を指定する初期値です。そのままでは何も機能しないため、JavaScriptなどのプログラムと組み合わせて使用します。例えば、ホームページ（ウェブサイト）上で「もっと見る」ボタンを押してコンテンツを追加で表示させたり、特定の計算処理を実行させたりする際に、この値を指定します。

<button></button>

ホームページ制作・SEOの1ポイント

ホームページの強みの一つは、ユーザーがその場ですぐにアクションを起こすことができる点です。そしてメールフォームなど、ユーザーが入力したデータが運営者側へと送信された場合、項目の転記などの手間が省けるという強みもあります。CVR向上にはボタンの工夫も良いでしょう。

textarea（テキストエリア）

<textarea></textarea>

ホームページ制作（ウェブサイト制作）の際に使用する<textarea>タグについてのご説明です。

ホームページ制作において<textarea>（テキストエリア）タグは、フォーム入力欄において、複数行の入力フィールド（テキスト入力欄）を設置する場合に使用します。

ホームページ制作において、お問い合わせフォームなどフォームを利用する場合に使用します。

<textarea> 複数行の入力フィールド（テキスト入力欄）を作成

<textarea>タグを使用することで、複数行の入力フィールドを作成します。

一般的にはフォームの部品として扱われ、サイト内のメールフォームの任意記述欄（お問い合わせ本文）などによく用いられます。テキストエリア。

記述されたテキストは、入力フィールドの初期値として表示されます。inputタグのtype=”text”が1行だけの入力欄であるのに対し、textareaタグは改行を含む長い文章を扱うことができます。

ホームページ制作においては、お問い合わせフォームの本文入力欄やコメント欄に用いられることがほとんどです。

textarea要素の基本とフォームへの紐付けに関する属性

textareaタグを設置し、そのデータを正しくサーバーへ送信するために設定する基本的な属性です。他の入力部品と同様に、データに名前を付けたり、特定のフォームと関連付けたりする役割を持ちます。

name属性による入力フィールドの名前付け

name属性（name=””）は、入力されたテキストデータが何であるかを示す名前を指定します。例えば「お問い合わせ内容」の欄であれば、name=”message” や name=”inquiry” のように設定します。サーバー側はこの名前を頼りにデータを受け取るため、必ず設定します。

form属性によるフォームとの関連付け

form属性（form=””）は、そのtextareaがどのform要素に属しているかを示すために使います。通常、textareaタグはformタグの中に配置しますが、ホームページのデザイン構成上、formタグの外に配置せざるを得ない場合があります。そのような時に、対象となるformタグに付けたID名を指定することで、離れた場所にあってもフォームの一部として正しく送信させることができます。

入力欄のサイズや文字数を制御する属性

入力欄の見た目の大きさや、入力できる文字の制限に関する設定です。現代のウェブ制作ではCSSによるレイアウト調整と併用しつつ、使い勝手を向上させます。

cols属性とrows属性による表示サイズ指定

cols属性は一行あたりの最大文字数の目安（幅）を指定し、rows属性は表示行数（高さ）を指定します。初期値は概ねcolsが20、rowsが2です。ただし、現代のホームページ制作においては、スマートフォンやパソコンなど画面幅の異なる端末に柔軟に対応するため、CSSを使って幅や高さをパーセントなどで指定するのが一般的です。HTML側では基本的な目安として設定しておきます。

maxlength属性による最大文字数の制限

maxlength属性（maxlength=””）は、ユーザーが入力できる最大文字数を指定します。データベースの保存容量の都合や、あまりに長文のスパム送信を防ぐために設定することがあります。設定した文字数を超えて入力しようとしても、それ以上は打ち込めなくなります。

wrap属性によるテキストの改行ルール

wrap属性（wrap=””）は、入力されたテキストの改行の扱いを指定します。「hard」を指定すると、表示上の折り返し位置に実際の改行コードが挿入されてサーバーに送信されます。「soft」を指定する（あるいは初期値のままにしておく）と、表示上は折り返されていても、送信されるデータにはユーザーが自らエンターキーなどで入力した改行コードのみが反映されます。通常は初期値のままで問題ありません。

ユーザーの入力補助と操作制限に関する属性

ユーザーが迷わず入力できるようにサポートしたり、状況に応じて入力を制限したりするための属性です。これらを適切に使うことで、より親切で迷いにくいフォームになります。

placeholder属性による入力ヒントの表示

placeholder属性（placeholder=””）は、入力欄が空のときに薄いグレーなどの文字で入力例を表示します。「例：現在お困りの症状や、ご希望の納期についてお書きください」などのヒントを短いテキストで示すことで、ユーザーは何を書けばよいのか直感的に理解しやすくなります。

required属性による必須項目の指定

required属性（required）を指定すると、その入力欄を必須項目にすることができます。空欄のまま送信ボタンを押そうとすると、ブラウザが自動的にエラーメッセージを表示して送信を止めてくれます。JavaScriptを用いた入力チェックと併用して設定します。

autofocus属性による自動選択

autofocus属性（autofocus）を指定すると、ホームページ（ウェブサイト）を読み込んだ直後に、自動的にその入力欄にカーソルが合い、すぐに入力できる状態になります。検索ページなど、ユーザーがページを開いて最初に行う動作が決まっている場所で活用します。

readonly属性とdisabled属性による操作制限

readonly属性は、ユーザーによるテキストの編集を不可にして読み取り専用にします。テキストの選択やコピーは可能で、送信時にもデータとして送られます。入力内容の確認画面などで使用します。一方、disabled属性は、要素そのものの操作を完全に無効にします。テキストの選択もできなくなり、送信時にもデータは送られません。特定の条件を満たすまで入力できないようにするなど、プログラムの制御に合わせて利用します。

<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の編集で行います。

ホームページのHTML編集方法