フォームの作り方：input・textarea・buttonの基本

はじめに

WordPressでのサイト制作に慣れていると、フォームは「Contact Form 7」や「WPForms」といったプラグインに任せてしまうことが多いのではないでしょうか？
私自身もまさにその一人で、これまでフォームの構造に深く踏み込むことはあまりありませんでした。

しかし最近、HTMLやCSS、JavaScriptの基礎をあらためて学び直す中で、「フォームの構造をしっかり理解しておくことの大切さ」に気づきました。
そして、その中でも特に疑問に思ったのが「buttonタグっていつ使うの？」ということです。

普段、リンクの見た目をボタンにするためにaタグをbutton風にスタイリングすることが多く、逆にbuttonタグ自体を使う機会が少なかったという方も多いのではないでしょうか？

この記事では、WordPressユーザーや初学者の方を対象に、フォームの基本タグであるinput、textarea、buttonについて解説しつつ、「そもそもbuttonタグって必要？」という疑問にも答えていきます。

タグ紹介

<input>タグ

<input>タグは、フォームにおけるもっとも基本的な要素のひとつで、さまざまなタイプのデータ入力に対応しています。

<form>
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username" placeholder="ユーザー名" />
  <br /><br />
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" />
</form>

よく使われるtype属性には以下のようなものがあります。

• text：1行のテキスト入力
• email：メールアドレスの入力（バリデーション付き）
• password：パスワード入力（非表示）
• checkbox / radio：選択肢
• submit：送信ボタン
• file：ファイルアップロード
• date：日付入力

<textarea>タグ

複数行のテキストを入力したいときに使用するのが<textarea>タグです。
例えば、お問い合わせフォームの「ご意見・ご感想」欄などに使われます。

<form>
  <label for="message">ご意見・ご感想:</label><br />
  <textarea id="message" name="message" rows="5" cols="40" placeholder="ご自由にご記入ください"></textarea>
</form>

<input type="text">では1行しか入力できませんが、<textarea>は複数行入力可能なため、長文入力が想定される場合に適しています。

<button>タグ

<button>はクリック可能なボタンを作るタグで、type属性によって動作を変えることができます。

<form onsubmit="alert('送信されました'); return false;">
  <button type="submit">送信</button>
  <button type="reset">リセット</button>
  <button type="button" onclick="alert('独立したボタンがクリックされました');">ボタン</button>
</form>

• submit：フォームを送信
• reset：フォームを初期化
• button：独立したボタン（JavaScriptと連携して使う）

よくある質問

Q1. buttonタグって実際いつ使うの？aタグで見た目を整えるのじゃダメ？

見た目だけならaタグでも問題ありません。
しかし、「ボタン」としての意味的な役割を持たせたい場合やフォーム内での動作（送信・リセット）を定義したい場合は、buttonタグを使うべきです。

aタグは本来「リンク（遷移）」を意味するタグなので、JavaScriptなどで無理やりクリックイベントを使って「ボタンのようにする」ことは、アクセシビリティやHTMLの意味論的観点からは避けるべきとされています。

<!-- 悪い例 -->
<a href="#" onclick="submitForm(); return false;" class="btn">送信</a>
 
<!-- 良い例 -->
<button type="submit" class="btn">送信</button>

Q2. input type="submit"とbutton type="submit"はどう違うの？

両者はどちらもフォームを送信しますが、buttonタグの方が中にHTMLを含められるという利点があります。

<!-- inputの例 -->
<input type="submit" value="送信" />
 
<!-- buttonの例 -->
<button type="submit"><img src="icon.png" alt="" /> 送信</button>

Q3. buttonタグを使うときの注意点は？

<button>タグのデフォルトのtypeはブラウザによってsubmitになるため、意図しないフォーム送信が起きる可能性があります。

<button type="button" onclick="doSomething()">実行</button>

また、buttonタグ内にインライン要素（<span>や<img>など）を含める場合は、ボタンのスタイリングが崩れないようにCSS側での調整も必要です。

さいごに

WordPressなどのCMSを使ってWeb制作をしていると、ついつい「フォームはプラグインで済ませるもの」「ボタンは見た目が整っていればいい」と考えがちです。
ですが、HTMLの意味や仕様をきちんと理解しておくことで、より柔軟で信頼性のある実装ができるようになります。

特にbuttonタグは、「どこでどう使うべきか」が意外と曖昧になりやすい部分ですが、フォームの送信・リセット、またはJavaScript連携など、その用途に応じて正しく使い分けることが重要です。

また、今後Figmaなどのデザインデータから静的HTMLを書き起こす機会がある方や、JavaScriptでDOM操作を行う場面が増える方にとっても、buttonタグの正しい使い方は避けて通れません。

最後に、フォームのマークアップは、見た目以上に「意味」と「動き」が伴う要素です。
プラグインに頼るだけでなく、その中身の構造にも関心を持つことで、フロントエンドの理解が一段と深まります。

ぜひ、この記事をきっかけにフォーム周りのHTMLにも少しずつ慣れていってください！