HTML - formタグ

概要

<form>タグは、Webページでユーザから情報を収集して、サーバに送信するための仕組みを提供するものである。

<form>タグは、オンラインショッピングの注文フォームやお問い合わせフォーム、ログインフォーム等、Webサイトには不可欠な要素である。
ユーザが入力した情報は、サーバサイドで処理されて、データベースへの保存やメール送信等の処理が行われる。

HTML5の登場により、フォームの機能は大きく進化しており、
最新のWebブラウザでは、JavaScriptを使用せずともフォームのバリデーション (入力値の検証) が可能になっている。
例えば、メールアドレスの形式チェックやテキストの必須入力等が実装できる。

また、古いWebブラウザでも適切にフォールバック (代替動作) するよう設計されているため、段階的な実装が可能である。

スマートフォンやタブレット等のモバイルデバイスでは、入力項目の種類に応じて最適なキーボードが自動的に表示される。
例えば、メールアドレス入力時には@マークが表示されたキーボード、電話番号入力時には数字キーパッドが表示される等、ユーザの入力をサポートする。

HTML5では、日付選択や色選択等の専用インターフェースが提供され、ブラウザネイティブのUI要素を活用できる。
これにより、より直感的で使いやすいユーザ入力を実現できる。

フォームデータの送信方法には、主にGETとPOSTがある。
GETはURLにデータを含めて送信するため、ブックマーク可能な検索フォーム等に適している。
POSTはデータを非表示で送信するため、パスワード等の機密情報を扱うフォームに適している。

適切なマークアップとフォーム要素の使用により、スクリーンリーダー等の支援技術を使用するユーザにも配慮したフォームを作成できる。
HTML5の新しい属性を活用することにより、多くのユーザにとって理解しやすいフォームを提供することができる。

formタグ

<form>タグは、Webページ上でユーザからデータを収集して、サーバに送信するためのHTMLタグである。

 <!-- 基本的な使用例 -->
 <form action="/submit" method="post" name="contactForm">
   <!-- ここにフォーム要素を配置 -->
 </form>

※注意

• ネストして使用することは推奨されない。
• JavaScriptでフォームの送信を制御する場合は、onsubmitイベントが使用可能である。

属性

デフォルト値

• action属性

  デフォルトは現在のページのURL

  つまり、action属性を指定しない場合はフォームは同じページに送信される。

  
  

• method属性

  デフォルトは"get"

  
  

• target属性

  デフォルトは_self

  同じウインドウ / タブで結果を表示する。

これらの属性は明示的に指定することが推奨されるが、省略した場合でもデフォルト値によって正常に動作する。

action属性

フォームのデータを送信する先のURLを指定する。

 <form action="/submit">

method属性

データの送信方法を指定する。

• GET

  URLにデータを付加して送信する。(データはURLに表示)

• POST

  HTTPリクエストのボディにデータを含めて送信する。(データは非表示)

 <form method="post">

enctype属性

フォームデータのエンコード方式を指定する。

• application/x-www-form-urlencoded (デフォルト値)
• text/plain

  プレーンテキストとして送信する。

• multipart/form-data

  ファイルアップロード時に使用する。

 <form enctype="multipart/form-data">

name属性

JavaScript等で参照する場合、フォームの名前を指定する。

 <form name="loginForm">

target属性

フォーム送信後の結果をどこに表示するかを指定する。

• _self

  同じウィンドウ、同じタブ (デフォルト)

• _blank

  新しいタブ、新しいウィンドウ

• _parent

  親フレーム

• _top

  最上位フレーム

 <form target="_blank">

autocomplete属性

フォームの自動補完機能の有効 / 無効を指定する。

• 値

  on または off

 <form autocomplete="off">

novalidate属性

Webブラウザのデフォルトの検証機能を無効にする。

 <form novalidate>

accept-charset属性

フォームの文字エンコーディングを指定する。

 <form accept-charset="UTF-8">

role属性

role属性は、role属性はタグの役割を明確に示し、Webページのアクセシビリティを向上させるためのものである。
role属性およびaria属性を活用することにより、支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。

formタグに関連する主なrole値

• role="form"

  フォームセクションであることを明示的に示す。

  formタグ自体にはデフォルトでこの役割があるため、通常は省略可能である。

  
  

• role="group"

  関連する入力項目をグループ化する。

  例: 住所や個人情報等、関連性の高いフィールドをまとめる場合に使用する。

aria属性

aria属性およびrole属性を活用することにより、スクリーンリーダー等の支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。

• スクリーンリーダー向け
  • aria-label

    要素の説明ラベルを提供する。

    視覚的なラベルがない場合に有効である。

    例: aria-label="会員登録フォーム"

    
    

  • aria-labelledby

    別の要素のIDを参照してラベルとして使用する。

    <h2 id="form-title">お問い合わせ</h2>
    <form aria-labelledby="form-title">
    

    
    

  • aria-describedby

    補足説明を提供する要素との関連付け

    <input aria-describedby="email-hint">
    <div id="email-hint">会社のメールアドレスを入力してください</div>
    

    
    

  • aria-live

    動的なコンテンツの更新を通知する。

• 支援技術全般向け (スクリーンリーダー以外も含む)
  • aria-required

    aria-required属性を"true"に指定する場合、スクリーンリーダー等の支援技術に対して、入力が必須であることを伝える。

    視覚的な表示には影響しない。

    
    

    HTML5のrequired属性は、Webブラウザに対して入力を必須として、フォーム送信時のバリデーションを行う。

    また、視覚的なUI表示にも影響する。

    したがって、aria-required属性とrequired属性を有効にすることにより、支援技術のユーザへのアクセシビリティを確保して、一般ユーザへのバリデーションも確保することができる。

    そのため、aria-required属性とrequired属性は同時に併用することが推奨される。

    例: aria-required="true"

    
    

  • aria-expanded

    展開可能な要素の状態を示す。

    アコーディオン形式のフォームで使用する。

    例: aria-expanded="false"

    
    

  • aria-hidden

    支援技術から要素を隠す。

  • aria-disabled

    無効状態を示す。

    
    

  • aria-errormessage

    エラーメッセージを示す要素との関連付け

    <input aria-errormessage="email-error">
    <div id="email-error">正しいメールアドレスの形式で入力してください</div>
    

• 状態管理
  • aria-invalid

    入力値が無効であることを示す。

    バリデーションエラー時に使用する。

    例: aria-invalid="true"

    
    

  • aria-checked

    チェックボックスの状態

    
    

  • aria-selected

    選択状態

    
    

  • aria-pressed

    ボタンの押下状態

• セマンティクス (意味構造) の補完
  • aria-controls

    制御対象となる要素のIDを示す。

    <button aria-controls="address-fields">住所を入力</button>
    <div id="address-fields">
      <!-- 住所入力フィールド -->
    </div>
    

    
    

  • aria-role

    要素の役割を定義する。

    
    

  • aria-controls

    制御対象の要素を指定する。

    
    

  • aria-owns

    要素間の所有関係を示す。

aria属性は、支援技術だけでなく、アプリケーションの状態管理やテスト自動化のためにも使用されることがある。
また、WAI-ARIAの仕様に沿って実装することにより、アクセシビリティの向上だけでなく、コードの保守性や再利用性も高まる。

※注意

• role属性とaria属性は適切に組み合わせて使用することで効果を発揮する。
• 過剰な指定は逆に混乱を招く可能性がある。
• ネイティブのHTML要素が提供する機能を優先的に使用する。
• スクリーンリーダーでの動作確認が推奨される。

使用例 : アクセシブルなフォーム

以下の例では、WAI-ARIAの属性を活用しながら、アクセシブルなフォームを作成している。

アクセシビリティ対応のポイントを以下に示す。

• role="form"属性およびaria-label属性で、フォームの目的を明確に示している。
• labelタグおよびinputタグを、id属性とfor属性で関連付けている。
• 必須項目には、aria-required="true"属性を設定している。
• エラー状態は、aria-invalid="true"属性で示し、エラーメッセージをaria-errormessageで関連付けている。
• 補足説明は、aria-describedbyで関連付けている。

これにより、スクリーンリーダーユーザは、フォームの目的、各入力項目の意味や必須 / 任意項目、エラーが発生した場合のフィードバックを得ることができる。
また、入力項目に関する補足説明を確認できる。

 <form role="form" aria-label="お問い合わせフォーム">
   <!-- フォームの各セクションをグループ化 -->
   <div role="group" aria-labelledby="personal-info">
     <h2 id="personal-info">個人情報</h2>
 
     <!-- ラベルとフォーム要素を明確に関連付け -->
     <div class="form-field">
       <label for="fullname" id="name-label">
         氏名
         <span aria-label="必須" class="required">*</span>
       </label>
       <input type="text" id="fullname" name="fullname" aria-required="true" aria-describedby="name-help" required>
       <div id="name-help" class="help-text">
         氏名をフルネームで入力してください
       </div>
     </div>
 
     <!-- エラーメッセージの適切な関連付け -->
     <div class="form-field">
       <label for="email">
         メールアドレス
         <span aria-label="必須" class="required">*</span>
       </label>
       <input type="email" id="email" name="email" aria-invalid="true" aria-errormessage="email-error" required>
       <div id="email-error" class="error" role="alert">
         有効なメールアドレスを入力してください
       </div>
     </div>
   </div>
 
   <!-- 送信ボタン -->
   <button type="submit" aria-label="フォームを送信">送信する</button>
 </form>

ラジオボタン

ラジオボタンの基本

ラジオボタンは、複数の選択肢から1つだけを選べる入力要素である。

基本的な実装を以下に示す。

• inputタグのtype属性を"radio"に指定する。
• 各選択肢には固有のvalue属性を設定する。
• checked属性で初期選択状態を設定できる。

また、アクセシビリティのためにlabelタグと組み合わせて使用する。

 <form>
   <div>
     <input type="radio" id="male" name="gender" value="male">
     <label for="male">男性</label>
 
     <input type="radio" id="female" name="gender" value="female">
     <label for="female">女性</label>
   </div>
 </form>

 <!-- checked属性は初期選択を指す -->
 <input type="radio" name="gender" value="male" checked>
 
 <!-- disabled属性は選択不可を指す -->
 <input type="radio" name="gender" value="female" disabled>

グループ化

ラジオボタンをグループ化するには、同じname属性値を設定する。

各ラジオボタンには個別のid属性値とvalue属性値を設定する。

labelタグを使用して、ラジオボタンにラベルを付ける。
labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。

 <form>
   <div>
     <p>好きな色を選んでください：</p>
 
     <input type="radio" id="red" name="color" value="red">
     <label for="red">赤</label>
 
     <input type="radio" id="blue" name="color" value="blue">
     <label for="blue">青</label>
 
     <input type="radio" id="green" name="color" value="green">
     <label for="green">緑</label>
   </div>
 </form>

グループ化を視覚的にも明確にする場合は、fieldsetおよびlegendを使用する。
これにより、グループに枠線が付き、legendでグループのタイトルが表示される。

 <form>
   <fieldset>
     <legend>好きな色を選んでください：</legend>
 
     <input type="radio" id="red" name="color" value="red">
     <label for="red">赤</label>
 
     <input type="radio" id="blue" name="color" value="blue">
     <label for="blue">青</label>
 
     <input type="radio" id="green" name="color" value="green">
     <label for="green">緑</label>
   </fieldset>
 </form>

テキストボックス

Eメール

emailは、メールアドレス入力用のテキストボックスである。

 <input type="email" name="email">

URL

urlは、URL入力用ののテキストボックスである。

 <input type="url" name="website">

数値入力

numberは、数値入力用のテキストボックスである。

 <input type="number" min="0" max="100" step="1">

数値入力 (rangeの使用)

rangeは、スライダーによる数値入力するものである。

 <!-- JavaScriptの関数を分離して記述する場合 -->
 <input type="range" min="0" max="100" value="50" oninput="updateValue(this.value)">
 <input type="text" id="rangeValue" value="50" readonly>
 
 <script>
 function updateValue(value) {
   document.getElementById('rangeValue').value = value;
 }
 </script>

 <!-- JavaScriptの関数を直接HTML属性に記述する場合 -->
 <div>
   <input type="range" min="0" max="100" value="50" oninput="document.getElementById('rangeValue').value = this.value">
   <input type="text" id="rangeValue" value="50" readonly>  <!-- readonly属性を使用して、テキストボックスの値を直接編集できないようにしている -->
 </div>

電話番号入力

telは、電話番号入力用のテキストボックスである。

 <input type="tel" name="phone">

検索ボックス

searchは、検索ボックス用のテキストボックスである。

 <input type="search" name="query">

時刻選択

timeは、時刻選択用のテキストボックスである。

 <input type="time">

バリデーション

正規表現の使用

patternは、正規表現によるバリデーションを指定する。

 <input type="text" pattern="[A-Za-z]{3}">

数値の最小 / 最大値

min / maxは、数値の最小 / 最大値を制限する。
数値入力やレンジスライダで使用する。

 <input type="number" min="18" max="65">

数値の増減幅

stepは、数値の増減幅を指定する。

• 未指定の場合は、1
• 小数点の入力も可能

 <input type="number" min="100" max="250" step="0.5">

以下の例では、min / max / stepを使用して、スライダでの数値入力を指定している。

 <input type="range" min="0" max="100" step="10">

文字数制限

maxlength / minlengthは、最大文字数 / 最小文字数を指定する。
input要素やtextarea要素で使用可能である。

 <!-- テキスト入力の文字数制限 -->
 <input type="text" maxlength="20">
 
 <!-- パスワードの文字数制限  8-16文字 -->
 <input type="password" minlength="8" maxlength="16">
 
 <!-- テキストエリアの文字数制限  最大200文字 -->
 <textarea maxlength="200" rows="4" cols="50"></textarea>

その他属性

必須入力項目の指定

requiredは、必須入力項目を指定する。

 <input type="text" required>

プレースホルダ

placeholderは、入力例やヒントを表示する。

 <input type="text" placeholder="例: 山田太郎">

オートコンプリート

autocompleteは、自動補完を制御する。

 <input type="text" autocomplete="on">

自動フォーカス

autofocusは、ページ読み込み時に自動フォーカスを制御する。

 <input type="text" autofocus>

ラベル

for属性

for属性は、labelタグとフォームコントロール (input、select、textarea等) を関連付けるために使用する属性である。

for属性の値は、関連付けるフォームコントロールのid属性と一致させる必要がある。(大文字・小文字も区別される)

ラベルを押下する時、関連付けられたフォームコントロールにフォーカスが移動する。

for属性は、<label>タグ専用の属性であり、他のHTML要素では使用できない。

※注意
同じページ内で同じid値を複数使用してはいけない。

for属性を使用するメリットは、スクリーンリーダーでの読み上げが適切になり、クリック / タップ可能な領域が広がることである。

 <!-- 基本 -->
 <label for="username">ユーザ名:</label>
 <input type="text" id="username">
 
 <!-- チェックボックス -->
 <label for="agree">利用規約に同意する</label>
 <input type="checkbox" id="agree">
 
 <!-- ラジオボタン -->
 <label for="male">男性</label>
 <input type="radio" id="male" name="gender">
 <label for="female">女性</label>
 <input type="radio" id="female" name="gender">
 
 <!-- テキストエリア -->
 <label for="comment">コメント:</label>
 <textarea id="comment"></textarea>
 
 <!-- プルダウン (セレクトボックス) -->
 <label for="country">国:</label>
 <select id="country">
   <option value="jp">韓国</option>
   <option value="jp">中国</option>
   <option value="us">アメリカ</option>
 </select>

また、for属性を使用せずに、<label>タグの中にフォームコントロールを直接入れることもできる。

 <!-- ネストした記法 -->
 <label>
   ユーザ名:
   <input type="text">
 </label>
 
 <!-- チェックボックス -->
 <label>
   <input type="checkbox">
   利用規約に同意する
 </label>

カレンダー

日付選択用

dateは、日付選択用のカレンダーである。

 <input type="date">

日時選択

datetime-localは、日時選択用のカレンダーである。

 <input type="datetime-local">

月選択

monthは、月選択用のカレンダーである。

 <input type="month">

週選択

weekは、週選択用のカレンダーである。

 <input type="week">

カラーピッカー

 <input type="color">

入力要素

入力候補リスト

<datalist>タグは、入力候補リストを提供する。

 <input list="browsers">
 <datalist id="browsers">
   <option value="Chrome">
   <option value="Firefox">
   <option value="Safari">
 </datalist>

その他表示

計算結果等の出力表示

<output>タグは、計算結果等の出力表示用である。

 <output name="result"></output>

進捗表示

<progress>タグは、進捗状況表示用である。

 <progress value="70" max="100">70%</progress>

数値の度合い

<meter>タグは、数値の度合いを表示する。

 <meter value="0.6">60%</meter>

ファイル

複数ファイルの選択

multipleは、複数ファイルの選択を許可する。

 <input type="file" multiple>

送信ボタン

<input type="submit" ...>は単純なフォーム送信には使用できるが、カスタマイズ性に制限がある。
そのため、<button type="submit" ...>が推奨される。

これは、以下に示す理由からである。

• <button>タグの方が柔軟にスタイリングできる。
• ボタン内に他のHTML要素 (アイコン等) を配置できる。
• アクセシビリティの観点で優れている。(スクリーンリーダーとの相性が良い)

 <button type="submit">
   <span>送信</span>
   <svg>アイコンのパス</svg>
 </button>

属性

送信先URLの指定

formactionは、送信先URLを指定する。

 <input type="submit" formaction="/submit2.php">

送信メソッドの指定

formmethodは、送信メソッドを指定する。

 <input type="submit" formmethod="post">

エンコードタイプの指定

formenctypeは、エンコードタイプを指定する。

 <input type="submit" formenctype="multipart/form-data">

送信後の表示先の指定

formtargetは、送信後の表示先を指定する。

 <input type="submit" formtarget="_blank">

バリデーションの無効化

formnovalidateは、バリデーションを無効化する。

 <input type="submit" formnovalidate>