HTML/フォーム
表示
< HTML
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フォームの基本から現代的な実装方法まで包括的に説明しています。実際の実装では、プロジェクトの要件に応じて適切なアプローチを選択してください。