HTMLのformタグとinput属性の使い方まとめ＋バリデーション入門【初心者向け完全ガイド】

本記事には広告が含まれています

2025/04/16

HTMLのformタグとinput属性の使い方まとめ＋バリデーション入門【初心者向け完全ガイド】

Webアプリでもブログのお問い合わせページでも、フォームはユーザーから情報を受け取る最重要インターフェースです。ところが「<form>と<input>は何となく書いているけれど、属性の意味やバリデーションの仕組みは曖昧」という声をよく耳にします。

この記事では HTMLだけで実装できる標準バリデーション を中心に、formタグとinput要素の基礎から実践的なサンプルまでを一気に整理します。これさえ読めば、まずはHTMLだけで完結する安全で使いやすいフォームを構築できるようになります。さらに必要に応じて、JavaScriptで相関チェックや動的制御を加える方法も紹介します。

formタグとは ― 基本構造と主要属性

役割

<form>タグは 送信対象となる入力要素をまとめ、サーバーへデータを送るコンテナ です。フォーム外の要素は送信対象になりません。

主な属性

属性	役割	よく使う値・注意点
`action`	送信先URL	省略時は「現在のURLと同じパス」へ送信（クエリ文字列は無視される）。ディレクトリ構造が深い場合や静的サイトで疑似パスを使っている場合は、意図しないエンドポイントに送られることがあるため要注意。
`method`	HTTPメソッド	`get` (既定) / `post`
`enctype`	エンコード方式	ファイルアップロード時は `multipart/form-data`
`target`	送信結果の表示先	`_self` / `_blank` など
`autocomplete`	自動補完の可否	`on` / `off`
`novalidate`	検証スキップ	属性を付けるだけで全項目のバリデーションを無効化

ポイント
method="get"はURLにクエリ文字列が露出するため、パスワードや個人情報には必ずpostを使いましょう。

input要素の仕組みと共通属性

<input>は type属性によって機能が変わる万能タグ です。共通して覚えておくべき属性は次のとおりです。

属性	概要	補足
`type`	入力フィールドの種類	`text`, `email`, `number` など
`name`	送信時のキー名	同じ`name`を複数使うと配列送信
`value`	既定値	`checkbox`や`radio`は「送信される値」を定義
`placeholder`	入力例	必ず`label`と併用（アクセシビリティ）
`required`	未入力時に送信ブロック	ブール属性（値は不要）
`pattern`	正規表現パターン	`/`は不要。JavaScriptのRegExpとは構文が一部異なり、先読み／後読みなどは使用不可。 ※`pattern`は空欄をブロックしないため、必須入力としたい場合は`required`も併用してください。
`min` / `max`	数値・日付の下限／上限	`type="number"`, `date`などで有効
`maxlength` / `minlength`	文字数制限	`textarea`でも使用可
`autocomplete`	ブラウザ補完の指定	`"email"`, `"postal-code"`など語彙固定
`disabled` / `readonly`	入力不可	`disabled`は送信もされない

input type一覧と具体例

以下は主要typeと利用シーンです。覚えると開発効率が大幅アップします。

type	UIイメージ	標準バリデーション	代表的な使い方・備考
`text`	一行テキスト	なし	ユーザー名など
`email`	メールアドレス	形式チェック	ログイン・問い合わせ
`url`	URL	形式チェック	SNSリンク収集
`tel`	電話番号	形式チェックなしスマホでは電話用キーボードが開く	連絡先
`number`	スピンボックス	数値・`min`/`max`	年齢、数量
`password`	パスワード	伏せ字表示	認証
`search`	検索ボックス	なし	サイト内検索
`checkbox`	チェックボックス	なし	利用規約同意
`radio`	排他選択	なし	性別など
`file`	ファイル選択	`accept`でMIME制限※MIME spoofingは防げないためサーバー側で必ず再検証	画像アップロード
`date` / `time` / `datetime-local`	カレンダーUI	範囲チェック	予約フォーム
`range`	スライダー	`min`/`max`/`step`	音量調整
`color`	カラーピッカー	16進数カラー	テーマ設定
`hidden`	非表示値	なし	CSRFトークン
`submit` / `reset` / `button`	ボタン	―	送信／リセット

HTML5標準バリデーションのしくみ

ブラウザは送信前に「制約付き検証（Constraint Validation）」を自動実行します。以下のすべてを満たさないと送信はブロックされ、エラーメッセージが表示されます。

required：未入力禁止
type依存チェック：emailなら「@」を含む等
pattern：正規表現一致
min / max / step：範囲・刻み値
minlength / maxlength：文字数
multiple：emailやfileで複数可否

<label for="user_email">メールアドレス</label>
<input type="email"
       id="user_email"
       name="user_email"
       placeholder="example@example.com"
       required
       maxlength="254">

カスタムバリデーション ― JavaScript連携

標準機能だけで足りない場合は Constraint Validation API を使います。

<script>
document.querySelector('form').addEventListener('submit', e => {
  const pass  = document.getElementById('password');
  const pass2 = document.getElementById('password2');

  if (pass.value !== pass2.value) {
    pass2.setCustomValidity('パスワードが一致しません');
  } else {
    pass2.setCustomValidity('');
  }

  if (!e.target.reportValidity()) e.preventDefault();
});
</script>

setCustomValidity() で独自メッセージを付与
reportValidity() でフォーム全体を再チェック
エラー要素には aria-invalid="true" と説明用IDを紐付けるとスクリーンリーダーで分かりやすくなります。

実践サンプル：会員登録フォームを作る

以下はフロントエンドだけで完結する会員登録フォーム例です。標準属性だけで多くのバリデーションが実現できる点に注目してください。

<form action="/signup" method="post" enctype="multipart/form-data" novalidate>
  <h2>会員登録フォーム</h2>

  <label for="username">ユーザー名</label>
  <input type="text" id="username" name="username"
         required minlength="3" maxlength="20"
         placeholder="3〜20文字の半角英数字">

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email"
         required autocomplete="email">

  <label for="password">パスワード</label>
  <input type="password" id="password" name="password"
         required minlength="8" pattern="^[A-Za-z0-9]+$"
         placeholder="英数字8文字以上">

  <label for="password2">パスワード（確認）</label>
  <input type="password" id="password2" required>

  <label for="birthday">生年月日</label>
  <input type="date" id="birthday" name="birthday" required>

  <label for="avatar">プロフィール画像（JPEG/PNG, 2MBまで）</label>
  <input type="file" id="avatar" name="avatar"
         accept="image/jpeg,image/png" required>

  <button type="submit">登録する</button>
</form>

<script>
/* 18歳未満をブロックする動的max値 */
const birthday = document.getElementById('birthday');
const today = new Date();
today.setFullYear(today.getFullYear() - 18);
birthday.max = today.toISOString().split('T')[0];

document.querySelector('form').addEventListener('submit', e => {
  const p1 = document.getElementById('password');
  const p2 = document.getElementById('password2');

  p2.setCustomValidity(p1.value === p2.value ? '' : 'パスワードが一致しません');
  if (!e.target.reportValidity()) e.preventDefault();
});
</script>

解説ポイント

labelとinputをfor＋idで明示的に紐付け、アクセシビリティを強化。
生年月日のmaxは 「現在日−18年」をJavaScriptで自動設定 し、時間経過に強い実装に（”18歳以上か”の判定）。
ファイルアップロードはacceptで一次フィルタ、サーバー側でMIME／拡張子チェックを必ず実施。

チェックリスト＆まとめ

チェック項目	確認しましたか？
送信先URL（`action`）はHTTPSか	✅
個人情報送信は`method="post"`	✅
すべての入力に`label`を`for`属性で紐付け	✅
必須項目には`required`	✅
文字数・範囲は`min/max/length`で制御	✅
メールやURLは専用`type`で自動検証	✅
正規表現が必要なら`pattern`活用（JSと構文差異に注意）	✅
ファイルはサーバー側でMIME再検証	✅
カスタム検証は`setCustomValidity()`	✅
アクセシビリティ属性(`aria-＊`)	✅