フォームの作り方：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. 見た目だけなら 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" はどう違うの？

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

<!-- inputの例 -->
<input type="submit" value="送信">

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

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

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

JavaScriptでボタンを使うだけの目的なら、必ず type="button" を明記しましょう

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

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

おわりに

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

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

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

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

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

スポンサーリンク