知識を取り込み、そして発信する
Webページでユーザーに入力してもらい、その内容を送信する仕組みがフォームです。
お問い合わせ、ログイン、検索、会員登録など、ほとんどのWebサービスで使われています。
その中に、1行入力やメール・パスワード・チェックボックスなど多用途なinput、各入力欄に説明を結びつけるlabel、複数行の文章を入力するためのtextarea、そしてプルダウン形式で選択肢を用意できるselect（＋option）を配置して構成します。
特にinput は、type属性を変えるだけで多様なフォームパーツを作れる重要なタグです。
フォームの枠組み（大枠）を作るタグです。
action属性で送信先、method属性で送信方法を指定します。
構文
<form 属性="属性値">
</form>
formタグはブロック要素で、フォーム専用の属性と属性値が存在します。
ここでは代表的な属性のみに触れます。
| 属性名 | 属性値 | 用途 |
|---|---|---|
| action | 任意のパス | フォームの送信先を指定します。 |
| method | get | 入力データをURLの末尾にクエリ文字として付加して送信します。 検索フォームなどの短いデータ向きでブラウザの履歴に残ります。 |
| post | 入力データをHTTPリクエストの本文に含めて送信します。 パスワードやファイル送信など、長いデータや機密情報向きで、URLには表示されません。 | |
| autocomplete | on | 入力履歴やブラウザに保存された情報を使って自動補完を有効にします。 ユーザーが以前入力した内容を簡単に再入力できます。 |
| off | 自動補完を無効にして、入力欄を常に空の状態から入力されるようにします。 セキュリティやプライバシー上の理由で使用します。 |
コード例
<form action="send.php" method="post">
<!--フォーム部品タグが入ります。-->
</form>formタグはあくまで土台で、単独では機能しないので、複数の入力フォーム部品を組み合わせて作ることが必須となります。
inputタグはtype属性によって形が変わるとても多用途なタグです。
また、フォーム送信時に必要なname属性も重要です。
構文
<input type="属性値" name="属性値">inputタグはインラインブロック要素であり置換要素で、一覧表ではわかりにくいので、属性値ごとに説明していきます。
1行分の文字を入力できるテキストボックスを作成できます。
ユーザー名や住所、タイトルなど、自由に文字を入力してもらいたい場面で最もよく使われる基本の入力欄です。
<input type="text" name="username">出力例
text型は特に形式の制限がないため、数字だけにしたい場合や、文字数を制限したい場合などは、属性にmaxlengthやpatternなどの属性を組み合わせて制御します。
また、どのような情報を入力してほしいかが分かるように、labelタグやplaceholder と併用するのが一般的です。
メールアドレス用の入力欄を作成できます。
アットマークが含まれているかなど、メールアドレスとして妥当かどうかをブラウザが簡易的にチェックしてくれます。
<input type="email" name="email">出力例
email型は、書式が明らかにおかしい場合に送信時にエラーを出してくれるため、入力ミスをある程度防ぐことができます。
ただし、このチェックはあくまで簡易的なものであり、すべての誤りを防げるわけではありません。
重要なフォームでは、サーバー側でもメールアドレスの妥当性を確認するようにしましょう。
スマートフォンではメール入力向けのキーボードが表示されるため、使い勝手の面でも有利です。
入力した文字が伏せ字で表示されるパスワード入力欄を作成できます。
ログインフォームなど、他人に見られたくない情報を入力してもらう際に使います。
<input type="password" name="pwd">出力例
password型は、画面上の見た目だけを隠しているものであり、通信内容そのものが暗号化されるわけではありません。
安全に扱うためには、必ず HTTPSでページを公開する必要があります。
また、入力内容の確認のために「パスワードを表示」チェックボックスなどを用意しておくと、ユーザーが入力ミスに気付きやすくなります。
数値だけを扱うための入力欄を作成できます。
矢印ボタンや数値用のキーボードが表示されるため、年齢や個数などの入力に向いています。
<input type="number" name="age" min="0" max="120">出力例
number型では、最小値や最大値、刻み幅などを指定するための属性も用意されています（min / max / step など）。
これらの属性の詳しい使い方は、後述の「inputのその他の属性」でまとめて説明します。
また、ブラウザによっては数字以外の入力ができてしまう場合もあるため、最終的なチェックはサーバー側でも行うようにすると安全です。
電話番号の入力に適したテキストボックスを作成できます。
スマートフォンでは数字を入力しやすいキーボードが表示されるため、電話番号入力のユーザビリティが向上します。
<input type="tel" name="tel">出力例
tel型は見た目こそ電話番号専用ですが、ブラウザが書式を厳密にチェックするわけではありません。
ハイフンの有無や桁数などを揃えたい場合は、後述する pattern 属性などを組み合わせて、形式を明示的に指定する必要があります。
また、「連絡先電話番号」などラベルで用途をはっきり示しておくと、ユーザーにも分かりやすくなります。
カレンダーから日付を選択できる入力欄を作成できます。
ユーザーに年月日を正確に指定してもらいたい場面で利用します。
<input type="date" name="birthday">出力例
date型は、日付の書式をユーザーが気にしなくてもよいという利点がありますが、ブラウザやOSによって表示されるカレンダーUIや日付のフォーマットが異なる場合があります。
非常に古いブラウザではdate型に対応していないこともあるため、その場合にどう表示させるかを事前に確認しておくと安心です。
オン・オフを切り替えられるチェックボックスを作成できます。
複数の項目を同時に選択してもらいたいときに使います。
<input type="checkbox" name="hobby" value="movie"> 映画
<input type="checkbox" name="hobby" value="music"> 音楽
<input type="checkbox" name="hobby" value="animation"> アニメ出力例
checkbox型は、チェックされている項目だけが送信され、チェックされていない項目は送信されません。
そのため、サーバー側では「値が送られてこなかった＝チェックされていなかった」という前提で処理する必要があります。
また、小さなチェックボックスはクリックしづらいので、labelと組み合わせて説明文全体をクリックできるようにすると、操作性が大きく向上します。
複数の候補から1つだけ選んでもらうためのラジオボタンを作成できます。
同じnameを持つラジオボタン同士が1つのグループとして扱われます。
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性出力例
radio型は、グループ内で必ず1つだけ選択させたい場合に適しています。
「はい／いいえ」や「男性／女性」のように、排他的な選択肢を表現できます。
チェックボックスとの違いは「複数選べるかどうか」ですので、設計時に混同しないよう注意しましょう。
こちらもlabelと組み合わせて、説明文をクリックして選択できるようにしておくと親切です。
フォームの内容を送信するための送信ボタンを作成できます。
クリックすると、そのフォーム全体のデータがサーバーへ送られます。
<input type="submit" value="送信">出力例
submit型のボタンには、value属性でボタンに表示する文字列を指定します。
1つのフォーム内に複数の submit ボタンを用意し、送信先や処理を分けることも可能ですが、初心者向けフォームでは「送信ボタンは1つ」にしておく方が分かりやすくなります。
ボタンの見た目を細かく整えたい場合は、buttonタグを使う方法もあります。
送信ボタンとしての基本的な動作は、type="submit" と同じあり、type="button" は押してもフォーム送信を行わない汎用ボタンです。
JavaScript と組み合わせて任意の処理を実行したいときに使います。
ただし、buttonタグはボタン内にアイコンや強調用のタグを入れやすく、複数行のテキストも扱えるため、デザインや表現の自由度を高めたい場合に向いています。
<input type="button" value="ボタン">出力例
button型のinputは、フォーム送信とは無関係な操作用ボタンとして利用できます。
例えば「計算する」「入力内容を確認する」など、ページ内で何か処理を行いたいときに役立ちます。
ただし、JavaScriptが無効な環境では機能しないため、重要な処理にはsubmitボタンによる通常のフォーム送信を用意しておくと安心です。
ボタン要素を作成するためのタグで、内部にテキストやHTML要素（spanやimgなど）を入れられるのが特徴です。
フォームの送信やリセットなどにも利用できますが、type属性の指定によって役割が変わるため、用途に応じて正しく使い分ける必要があります。
構文
<button>...</button>buttonタグは、インラインブロック要素で、もっともシンプルな書き方は、type属性を省略してボタンを作る方法です。
コード例
<button>送信</button>出力例
type属性を指定しない場合、フォームの中ではsubmit（送信ボタン）として扱われます。
意図せず送信ボタンになってしまうことを避けるためにも、実際の制作ではtype属性を明示的に指定することをおすすめします。
フォームの内容を送信するためのボタンを作ります。
formタグの内側に配置すると、クリックしたタイミングでaction属性で指定した宛先へデータが送信されます。
コード例
<form action="send.php" method="post">
<input type="text" name="username">
<button type="submit">送信する</button>
</form>出力例
送信ボタンを作るだけであれば、inputタグのtype="submit"でも同じ動作をします。
ただし、buttonタグの方がボタン内に複数行のテキストやアイコン画像を入れやすく、デザインの自由度が高いという利点があります。
フォームに入力された値をすべて初期状態に戻すためのボタンを作ります。
クリックすると、そのフォーム内の各入力欄が読み込み直後の状態にリセットされます。
コード例
<form>
<input type="text" name="user">
<textarea name="message"></textarea>
<button type="reset">入力内容をリセット</button>
</form>出力例
resetボタンは、押した瞬間に内容が消えてしまうため、誤操作によるトラブルを招きやすいという面があります。
実務では、どうしても必要な場合を除いて設置を控えたり、配置場所やデザインを工夫して誤クリックを防ぐことが重要です。
フォーム送信やリセットなどの決まった動作を持たない「汎用ボタン」を作ります。
クリック時の動作は自動では決まらず、主にJavaScriptと組み合わせて独自の処理を実行したい場合に使用します。
コード例
<button type="button">確認ダイアログを表示</button>出力例
上記のように、HTMLだけでは見た目のボタンが表示されるだけで、実際の処理は何も行われません。
実際にクリック時の動きを与えたい場合は、JavaScriptと組み合わせて処理を記述します。
なお、何らかの理由でフォーム送信させたくないボタンを作る場合は、必ずtype="button"を明示的に指定するようにしましょう。
フォーム入力欄と説明文（ラベル）を結び付けるためのタグです。
ラベルと入力欄を関連付けることで、フォームの読みやすさが向上し、クリック操作やアクセシビリティの面でも非常に重要な役割を果たします。
構文
<label>...</label>labelタグはインライン要素で、もっとも基本的な書き方は、labelタグの内側にinputタグを直接入れる方法です。
コード例
<label>
ユーザー名：
<input type="text" name="username">
</label>出力例
このように書くと、ラベル文字（「ユーザー名：」）をクリックしたときにも入力欄がアクティブになります。
入力欄が小さい場合でも操作しやすくなるため、スマートフォンなどタッチ操作の環境で特に効果を発揮します。
また、labelタグでは、for属性を使って離れた場所の入力欄と結び付けることもできます。
input側にはid属性を指定し、対応するfor属性に同じ値を入れます。
コード例
<label for="mail">メールアドレス：</label>
<input type="email" id="mail" name="mail">出力例
この方法では、ラベルと入力欄をHTMLの構造上離れた場所に配置できるため、デザインの自由度が高まります。
特に、表形式のフォームや、横並びレイアウトなどでよく使われる書き方です。
labelタグを使用することで、フォームの操作性とアクセシビリティを大きく向上させることができます。
読み上げソフト（スクリーンリーダー）では、labelと結び付いていない入力欄は「何を入力する欄か」が正しく伝わらない場合があります。
そのため、入力欄には必ず適切なlabelタグを付けることが推奨されます。
ユーザーが複数行の文章を入力できる入力欄を作るタグです。
お問い合わせフォームやコメント欄など、長めの文章を入力する場面で使用します。
inputタグと異なり、textareaは開始タグと終了タグを持つため、入力欄の中身を初期値として直接書くこともできます。
構文
<textarea 属性="属性値">...</textarea>
textareaタグはインラインブロック要素で、ユーザーが複数行の文章を入力できる入力欄を作るタグです。
<textarea name="message" rows="5" cols="40">
ここにメッセージを入力してください。
</textarea>
rows属性は縦方向の行数、cols属性は横方向の文字幅を設定します。
ただし、最近のWebサイトではCSSで幅や高さを調整することがほとんどのため、rowsとcolsは最低限の初期サイズを指定する用途で使われることが多いです。
textareaは、inputタグでは実現できない「複数行入力」を担当する唯一のフォーム要素です。
自由記述のフィードバック欄や、住所入力欄などにも利用されます。
なお、ユーザーが入力する量に応じて自動で高さが伸びるわけではないため、CSSで高さを調整したり、必要に応じてJavaScriptで自動リサイズを実装することもあります。
また、textarea内の初期テキストは、開始タグと終了タグのあいだに直接書く方式になっており、HTMLの構造上、改行や空白を入れるとそのまま表示に反映される点に注意が必要です。
さらに、textareaにもplaceholder属性やmaxlength属性を付けられるため、入力のヒント表示や文字数制限も行うことができます。
ただし、inputとは異なり、value属性は使わないため、初期値は必ずタグ内部に記述します。
selectタグは、複数の選択肢の中からひとつ、または複数を選ばせたいときに使用するフォーム要素です。
ドロップダウン形式のフォームを作る最も標準的な方法です。
構文
<select 属性="属性値">
<option 属性="属性値">...</option>
</select>
selectタグはインラインブロック要素で、選択肢そのものはoptionタグとしてselectの中に記述し、ユーザーはその選択肢から必要な項目を選ぶことができます。
selectタグおよびoptionタグには属性値があります。
| 属性名 | 属性値 | 用途 |
|---|---|---|
| name | 任意の文字 | サーバーに送信される項目名 |
| multiple | なし | 複数選択を可能にします。 |
| size | 任意の数値 | 表示する行数を指定します。 |
| required | なし | 必須入力項目に設定します。 |
| disabled | なし | 無効化します。 |
| autofocus | なし | 自動フォーカスを有効にします。 |
| form | フォームのID | 別のformと関連付けします。 |
| 属性名 | 属性値 | 用途 |
|---|---|---|
| value | 任意の文字 | サーバーに送信される値 |
| label | 任意の文字 | 表示ラベルを別指定します。 |
| selected | なし | 初期選択状態にします。 |
| disabled | なし | 選択できないようにします。 |
<select name="pref">
<option value="">選択してください</option>
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
<option value="fukuoka">福岡</option>
</select>出力例
どのoption が選ばれたかは、value属性の値としてフォーム送信時にサーバーへ渡されます。
valueを指定しなかった場合は、optionタグ内のテキストがそのまま送信されます。
selectタグは、選択肢が多い場合でもフォームの見た目が崩れにくく、省スペースで情報をまとめられるという特長があります。
また、初期表示の選択肢として「選択してください」のような空の値を入れておくことで、ユーザーが選択した内容を正確に取得しやすくなります。
初期状態で特定の項目を選択済みにしたい場合は、optionにselected属性を付けることで実現できます。
さらに、selectタグにはmultiple属性を付けることにより、複数選択を許可することも可能ですが、その場合はCtrl（MacではCommand）キーを押しながら選ぶ必要があるため、ユーザーにとって直感的ではない場面もあります。
用途によっては、チェックボックスを並べたほうがわかりやすいケースもあります。
inputタグには、type属性以外にも「入力を補助したり、入力内容を制限したりするための属性」がいくつか用意されています。
これらの属性を適切に使うことで、ユーザーの入力ミスを防ぎ、扱いやすいフォームを作ることができます。
placeholder属性は、入力ボックスの中に“入力例”や“案内文”を薄い文字で表示するための属性です。
ユーザーが入力を始めると自動的に消えるため、入力を迷わせたくない場面でよく使われます。
<input type="text" name="username" placeholder="名前を入力">出力例
placeholderはあくまで補助説明であり、正式なラベルの代わりにはなりません。
薄い色で表示されるため、視認しにくい環境もあることから、重要な入力欄ではlabel属性と併用するのが望ましい使い方です。
また、読み上げソフトによっては正しく扱われない場合があります。
required属性を付けると、その入力欄が“必須入力”となり、空欄のままではフォームを送信できなくなります。
JavaScriptを使わなくてもブラウザが自動でチェックしてくれるため、最もよく使用される入力制御のひとつです。
<input type="email" required>出力例
requiredを設定すると、未入力のまま送信した場合にブラウザが標準のエラー表示を行います。
エラーメッセージの内容はブラウザ依存で統一されていませんが、CSSと合わせて視覚的な改善を行うこともできます。
pattern属性は、正規表現を使って入力形式を細かく制御するための属性です。
郵便番号や電話番号のように「桁数や記号の位置が決まっている」入力で、“この形だけを許可したい”ときに効果を発揮します。
<input type="text" pattern="[0-9]{3}-[0-9]{4}" placeholder="000-0000">出力例
正規表現の形式が間違っていると動作せず、入力チェックも行われません。
また、requiredと組み合わせない場合は空欄を許容します。
ブラウザによって正規表現の対応範囲が異なるため、特殊な表現を使いすぎないことがポイントです。
maxlength属性は、入力できる文字数の上限を設定するための属性です。
名前欄、短めのメッセージ入力、ID項目など、必要以上に長文が入らないよう制御したい場合に使われます。
<input type="text" maxlength="20">出力例
maxlengthを指定すると、ブラウザが自動的に入力数を制限するため、ユーザーはそれ以上の文字をタイプすることができません。
textareaでも同様に使用できます。
ただし、コピー＆ペースト時にも制限されるため、入力仕様に応じた値を設定する必要があります。
minlength属性は、入力文字数の“最低ライン”を設定するための属性で、特にパスワードのように一定以上の文字数を求める入力欄でよく使われます。
<input type="password" minlength="8">出力例
minlengthはあくまで「送信時」にチェックされる属性のため、入力途中では短い文字数でも問題ありません。
requiredと併用することで、未入力および文字数不足の両方に対応できます。
ブラウザ標準のエラー表示が行われますが、文言はブラウザによって異なります。
min属性とmax属性は、主に数値や日付を扱う入力欄で使用し、入力できる値の範囲を制限するための属性です。
数量入力や年齢、日時設定など、許容範囲を明確にしたい場面に適しています。
<input type="number" min="1" max="10">出力例
範囲外の値を入力して送信しようとするとエラーになります。
ただし、ブラウザによっては入力そのものはできてしまうため、送信チェックが基本となります。
日付入力（type="date"）でも利用できますが、利用者の環境によって日付ピッカーの表示が異なる点に注意が必要です。
step属性は、数値入力欄で使用する“刻み幅”を設定する属性です。
0.5刻みや0.1刻みなど、より細かい入力制御を行いたい場合に適しています。
<input type="number" step="0.5">出力例
stepを設定すると、ブラウザの数値入力UI（▲▼ボタン）も指定した刻み幅に合わせて動作します。
小数値を扱う場合は、min・maxと組み合わせることで入力範囲の誤りを減らすことができます。
name属性は、フォームの入力欄に「データの名前」を付けるための属性です。
送信された内容は、このnameに設定した値を“キー”としてサーバーへ渡されるため、フォームの仕組みの中でも特に重要な属性のひとつです。
<form>
<label>お名前：
<input type="text" name="name" />
</label>
<label>メッセージ：
<textarea name="message"></textarea>
</label>
<button type="submit">送信</button>
</form>出力例
フォームが送信されると、入力された内容はname属性の値＝入力した内容という形式でまとめられ、サーバーやメールフォームへ渡されます。
上記の埋め込み例では、JavaScriptによりname属性が正しく設定されている場合のメール本文と、name属性が設定されていない場合のメール本文が疑似的に表示されます。
nameがない入力欄は、ユーザーが何を入力しても“無名のデータ”として扱われ、送信内容に含まれなくなります。
また、複数の入力欄が同じnameを持つ場合は、チェックボックスなどに見られるように、同じ名前のデータとしてまとめて送信されます。
そのため、name属性はフォーム構造を正しく理解する上で欠かせない「識別子」といえるでしょう。
フォームを扱う際は、name属性は必ず設定するという点を強く意識しておくと、サーバー側やメールフォームサービスとの連携がスムーズになります。