コンテンツにスキップ

HTML/フォーム

出典: フリー教科書『ウィキブックス(Wikibooks)』

HTMLフォームは、Webアプリケーションにおけるユーザー入力の収集と送信を実現する重要な機能です。モダンなWeb開発において、フォームは単なるデータ送信手段を超えて、インタラクティブなユーザーエクスペリエンスを提供する重要な要素となっています。

フォームの基本構造

[編集]
<form action="/submit" method="post" enctype="multipart/form-data">
    <!-- フォーム要素群 -->
</form>

主要な属性

[編集]
  • action: データの送信先URLを指定
  • method: HTTPリクエストメソッドを指定(GET/POST)
  • enctype: フォームデータのエンコード方式を指定
  • name: フォームの識別子
  • autocomplete: 自動入力の制御

データ送信方式

[編集]

GETメソッド

[編集]
  • URLパラメータとしてデータを送信
  • 検索やフィルタリングに最適
  • ブックマーク可能なURL生成
  • データ量に制限あり

POSTメソッド

[編集]
  • リクエストボディにデータを格納
  • セキュアなデータ送信に適している
  • 大容量データの送信が可能
  • ファイルアップロードに必須

モダンなフォーム要素

[編集]

テキスト入力

[編集]
<input type="text" name="username"
       placeholder="ユーザー名を入力"
       pattern="[A-Za-z0-9]{3,16}"
       required>

新しい入力タイプ

[編集]
  • email: メールアドレス用
  • tel: 電話番号用
  • url: URL入力用
  • date: 日付選択
  • number: 数値入力
  • range: スライダー
  • search: 検索ボックス

セレクトメニュー

[編集]
<select name="category">
    <optgroup label="商品カテゴリー">
        <option value="electronics">電化製品</option>
        <option value="clothing">衣類</option>
    </optgroup>
</select>

ファイル選択

[編集]
<input type="file"
       accept=".jpg,.png,.pdf"
       multiple>

バリデーションと制約

[編集]

HTML5バリデーション属性

[編集]
  • required: 必須入力
  • pattern: 正規表現パターン
  • minlength/maxlength: 文字数制限
  • min/max: 数値範囲
  • step: 数値増減幅

カスタムバリデーション

[編集]
form.addEventListener('submit', (event) => {
    if (!validateForm()) {
        event.preventDefault();
    }
});

アクセシビリティの考慮

[編集]

ラベルとの関連付け

[編集]
<label for="username">ユーザー名</label>
<input id="username" name="username" type="text">

WAI-ARIAの活用

[編集]
<div role="alert" aria-live="polite">
    <!-- バリデーションメッセージ -->
</div>

セキュリティ考慮事項

[編集]
  • CSRF対策トークンの実装
  • 適切なエンコーディング
  • 入力値の検証
  • HTTPSの使用

フォームデータの処理

[編集]

フォームデータの処理には、サーバーサイドでの適切な実装が必要です:

  • 入力値の検証
  • サニタイズ処理
  • データベースへの安全な保存
  • エラーハンドリング
  • レスポンスの生成

レスポンシブデザイン対応

[編集]
.form-group {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .form-group {
        flex-direction: row;
    }
}

このガイドは、HTMLフォームの基本から現代的な実装方法まで包括的に説明しています。実際の実装では、プロジェクトの要件に応じて適切なアプローチを選択してください。