MochiuWiki : SUSE, EC, PCB

「HTML - formタグ」の版間の差分

← 古い編集
ビジュアルウィキテキスト
細 Wiki がページ「HTML - form」を「HTML - formタグ」に、リダイレクトを残さずに移動しました
 
(同じ利用者による、間の10版が非表示)
1行目: 1行目:
== 概要 ==
== 概要 ==
<form>タグは、Webページでユーザから情報を収集して、サーバに送信するための仕組みを提供するものである。<br>
<br>
<form>タグは、オンラインショッピングの注文フォームやお問い合わせフォーム、ログインフォーム等、Webサイトには不可欠な要素である。<br>
ユーザが入力した情報は、サーバサイドで処理されて、データベースへの保存やメール送信等の処理が行われる。<br>
<br>
HTML5の登場により、フォームの機能は大きく進化しており、<br>
最新のWebブラウザでは、JavaScriptを使用せずともフォームのバリデーション (入力値の検証) が可能になっている。<br>
例えば、メールアドレスの形式チェックやテキストの必須入力等が実装できる。<br>
<br>
また、古いWebブラウザでも適切にフォールバック (代替動作) するよう設計されているため、段階的な実装が可能である。<br>
<br>
スマートフォンやタブレット等のモバイルデバイスでは、入力項目の種類に応じて最適なキーボードが自動的に表示される。<br>
例えば、メールアドレス入力時には@マークが表示されたキーボード、電話番号入力時には数字キーパッドが表示される等、ユーザの入力をサポートする。<br>
<br>
HTML5では、日付選択や色選択等の専用インターフェースが提供され、ブラウザネイティブのUI要素を活用できる。<br>
これにより、より直感的で使いやすいユーザ入力を実現できる。<br>
<br>
フォームデータの送信方法には、主にGETとPOSTがある。<br>
GETはURLにデータを含めて送信するため、ブックマーク可能な検索フォーム等に適している。<br>
POSTはデータを非表示で送信するため、パスワード等の機密情報を扱うフォームに適している。<br>
<br>
適切なマークアップとフォーム要素の使用により、スクリーンリーダー等の支援技術を使用するユーザにも配慮したフォームを作成できる。<br>
HTML5の新しい属性を活用することにより、多くのユーザにとって理解しやすいフォームを提供することができる。<br>
<br><br>
== formタグ ==
<form>タグは、Webページ上でユーザからデータを収集して、サーバに送信するためのHTMLタグである。<br>
<br>
<syntaxhighlight lang="html">
<!-- 基本的な使用例 -->
<form action="/submit" method="post" name="contactForm">
  <!-- ここにフォーム要素を配置 -->
</form>
</syntaxhighlight>
<br>
<u>※注意</u><br>
* ネストして使用することは推奨されない。
* JavaScriptでフォームの送信を制御する場合は、onsubmitイベントが使用可能である。
<br>
==== 属性 ====
===== デフォルト値 =====
* action属性
*: デフォルトは現在のページのURL
*: つまり、action属性を指定しない場合はフォームは同じページに送信される。
*: <br>
* method属性
*: デフォルトは"get"
*: <br>
* target属性
*: デフォルトは_self
*: 同じウインドウ / タブで結果を表示する。
<br>
これらの属性は明示的に指定することが推奨されるが、省略した場合でもデフォルト値によって正常に動作する。<br>
<br>
===== action属性 =====
フォームのデータを送信する先のURLを指定する。<br>
<syntaxhighlight lang="html">
<form action="/submit">
</syntaxhighlight>
<br>
===== method属性 =====
データの送信方法を指定する。<br>
* GET
*:URLにデータを付加して送信する。(データはURLに表示)
* POST
*: HTTPリクエストのボディにデータを含めて送信する。(データは非表示)
<syntaxhighlight lang="html">
<form method="post">
</syntaxhighlight>
<br>
===== enctype属性 =====
フォームデータのエンコード方式を指定する。<br>
* application/x-www-form-urlencoded  (デフォルト値)
* text/plain
*: プレーンテキストとして送信する。
* multipart/form-data
*: ファイルアップロード時に使用する。
<syntaxhighlight lang="html">
<form enctype="multipart/form-data">
</syntaxhighlight>
<br>
===== name属性 =====
JavaScript等で参照する場合、フォームの名前を指定する。<br>
<syntaxhighlight lang="html">
<form name="loginForm">
</syntaxhighlight>
<br>
===== target属性 =====
フォーム送信後の結果をどこに表示するかを指定する。<br>
* _self
*: 同じウィンドウ、同じタブ (デフォルト)
* _blank
*: 新しいタブ、新しいウィンドウ
* _parent
*: 親フレーム
* _top
*: 最上位フレーム
<syntaxhighlight lang="html">
<form target="_blank">
</syntaxhighlight>
<br>
===== autocomplete属性 =====
フォームの自動補完機能の有効 / 無効を指定する。<br>
* 値
*: on または off
<syntaxhighlight lang="html">
<form autocomplete="off">
</syntaxhighlight>
<br>
===== novalidate属性 =====
Webブラウザのデフォルトの検証機能を無効にする。<br>
<syntaxhighlight lang="html">
<form novalidate>
</syntaxhighlight>
<br>
===== accept-charset属性 =====
フォームの文字エンコーディングを指定する。<br>
<syntaxhighlight lang="html">
<form accept-charset="UTF-8">
</syntaxhighlight>
<br>
===== role属性 =====
role属性は、role属性はタグの役割を明確に示し、Webページのアクセシビリティを向上させるためのものである。<br>
role属性およびaria属性を活用することにより、支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。<br>
<br>
formタグに関連する主なrole値
* role="form"
*: フォームセクションであることを明示的に示す。
*: formタグ自体にはデフォルトでこの役割があるため、通常は省略可能である。
*: <br>
* role="group"
*: 関連する入力項目をグループ化する。
*: 例: 住所や個人情報等、関連性の高いフィールドをまとめる場合に使用する。
<br>
===== aria属性 =====
aria属性およびrole属性を活用することにより、スクリーンリーダー等の支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。<br>
<br>
* スクリーンリーダー向け
** aria-label
**: 要素の説明ラベルを提供する。
**: 視覚的なラベルがない場合に有効である。
**: 例: aria-label="会員登録フォーム"
**: <br>
** aria-labelledby
**: 別の要素のIDを参照してラベルとして使用する。
**: <syntaxhighlight lang="html">
<h2 id="form-title">お問い合わせ</h2>
<form aria-labelledby="form-title">
</syntaxhighlight>
**: <br>
** aria-describedby
**: 補足説明を提供する要素との関連付け
**: <syntaxhighlight lang="html">
<input aria-describedby="email-hint">
<div id="email-hint">会社のメールアドレスを入力してください</div>
</syntaxhighlight>
**: <br>
** aria-live
**: 動的なコンテンツの更新を通知する。
<br>
* 支援技術全般向け (スクリーンリーダー以外も含む)
** aria-required
**: aria-required属性を"true"に指定する場合、スクリーンリーダー等の支援技術に対して、入力が必須であることを伝える。
**: 視覚的な表示には影響しない。
**: <br>
**: HTML5のrequired属性は、Webブラウザに対して入力を必須として、フォーム送信時のバリデーションを行う。
**: また、視覚的なUI表示にも影響する。
**: したがって、aria-required属性とrequired属性を有効にすることにより、支援技術のユーザへのアクセシビリティを確保して、一般ユーザへのバリデーションも確保することができる。
**: そのため、aria-required属性とrequired属性は同時に併用することが推奨される。
**: 例: aria-required="true"
**: <br>
** aria-expanded
**: 展開可能な要素の状態を示す。
**: アコーディオン形式のフォームで使用する。
**: 例: aria-expanded="false"
**: <br>
** aria-hidden
**: 支援技術から要素を隠す。
** aria-disabled
**: 無効状態を示す。
**: <br>
** aria-errormessage
**: エラーメッセージを示す要素との関連付け
**: <syntaxhighlight lang="html">
<input aria-errormessage="email-error">
<div id="email-error">正しいメールアドレスの形式で入力してください</div>
</syntaxhighlight>
<br>
* 状態管理
** aria-invalid
**: 入力値が無効であることを示す。
**: バリデーションエラー時に使用する。
**: 例: aria-invalid="true"
**: <br>
** aria-checked
**: チェックボックスの状態
**: <br>
** aria-selected
**: 選択状態
**: <br>
** aria-pressed
**: ボタンの押下状態
<br>
* セマンティクス (意味構造) の補完
** aria-controls
**: 制御対象となる要素のIDを示す。
**: <syntaxhighlight lang="html">
<button aria-controls="address-fields">住所を入力</button>
<div id="address-fields">
  <!-- 住所入力フィールド -->
</div>
</syntaxhighlight>
**: <br>
** aria-role
**: 要素の役割を定義する。
**: <br>
** aria-controls
**: 制御対象の要素を指定する。
**: <br>
** aria-owns
**: 要素間の所有関係を示す。
<br>
aria属性は、支援技術だけでなく、アプリケーションの状態管理やテスト自動化のためにも使用されることがある。<br>
また、WAI-ARIAの仕様に沿って実装することにより、アクセシビリティの向上だけでなく、コードの保守性や再利用性も高まる。<br>
<br>
<u>※注意</u><br>
* role属性とaria属性は適切に組み合わせて使用することで効果を発揮する。
* 過剰な指定は逆に混乱を招く可能性がある。
* ネイティブのHTML要素が提供する機能を優先的に使用する。
* スクリーンリーダーでの動作確認が推奨される。
<br>
==== 使用例 : アクセシブルなフォーム ====
以下の例では、WAI-ARIAの属性を活用しながら、アクセシブルなフォームを作成している。<br>
<br>
アクセシビリティ対応のポイントを以下に示す。<br>
* role="form"属性およびaria-label属性で、フォームの目的を明確に示している。
* labelタグおよびinputタグを、id属性とfor属性で関連付けている。
* 必須項目には、aria-required="true"属性を設定している。
* エラー状態は、aria-invalid="true"属性で示し、エラーメッセージをaria-errormessageで関連付けている。
* 補足説明は、aria-describedbyで関連付けている。
<br>
これにより、スクリーンリーダーユーザは、フォームの目的、各入力項目の意味や必須 / 任意項目、エラーが発生した場合のフィードバックを得ることができる。<br>
また、入力項目に関する補足説明を確認できる。<br>
<br>
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
<br><br>
<br><br>


75行目: 355行目:
   </fieldset>
   </fieldset>
  </form>
  </form>
</syntaxhighlight>
<br><br>
== テキストボックス ==
==== Eメール ====
emailは、メールアドレス入力用のテキストボックスである。<br>
<syntaxhighlight lang="html">
<input type="email" name="email">
</syntaxhighlight>
<br>
==== URL ====
urlは、URL入力用ののテキストボックスである。<br>
<syntaxhighlight lang="html">
<input type="url" name="website">
</syntaxhighlight>
<br>
==== 数値入力 ====
numberは、数値入力用のテキストボックスである。<br>
<syntaxhighlight lang="html">
<input type="number" min="0" max="100" step="1">
</syntaxhighlight>
<br>
==== 数値入力 (rangeの使用) ====
rangeは、スライダーによる数値入力するものである。<br>
<syntaxhighlight lang="html">
<!-- 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>
</syntaxhighlight>
<br>
==== 電話番号入力 ====
telは、電話番号入力用のテキストボックスである。<br>
<syntaxhighlight lang="html">
<input type="tel" name="phone">
</syntaxhighlight>
<br>
==== 検索ボックス ====
searchは、検索ボックス用のテキストボックスである。<br>
<syntaxhighlight lang="html">
<input type="search" name="query">
</syntaxhighlight>
<br>
==== 時刻選択 ====
timeは、時刻選択用のテキストボックスである。<br>
<syntaxhighlight lang="html">
<input type="time">
</syntaxhighlight>
<br>
==== バリデーション ====
===== 正規表現の使用 =====
patternは、正規表現によるバリデーションを指定する。<br>
<syntaxhighlight lang="html">
<input type="text" pattern="[A-Za-z]{3}">
</syntaxhighlight>
<br>
===== 数値の最小 / 最大値 =====
min / maxは、数値の最小 / 最大値を制限する。<br>
数値入力やレンジスライダで使用する。<br>
<syntaxhighlight lang="html">
<input type="number" min="18" max="65">
</syntaxhighlight>
<br>
===== 数値の増減幅 =====
stepは、数値の増減幅を指定する。<br>
* 未指定の場合は、1
* 小数点の入力も可能
<syntaxhighlight lang="html">
<input type="number" min="100" max="250" step="0.5">
</syntaxhighlight>
<br>
以下の例では、min / max / stepを使用して、スライダでの数値入力を指定している。<br>
<syntaxhighlight lang="html">
<input type="range" min="0" max="100" step="10">
</syntaxhighlight>
<br>
===== 文字数制限 =====
maxlength / minlengthは、最大文字数 / 最小文字数を指定する。<br>
input要素やtextarea要素で使用可能である。<br>
<syntaxhighlight lang="html">
<!-- テキスト入力の文字数制限 -->
<input type="text" maxlength="20">
<!-- パスワードの文字数制限  8-16文字 -->
<input type="password" minlength="8" maxlength="16">
<!-- テキストエリアの文字数制限  最大200文字 -->
<textarea maxlength="200" rows="4" cols="50"></textarea>
</syntaxhighlight>
<br>
==== その他属性 ====
===== 必須入力項目の指定 =====
requiredは、必須入力項目を指定する。<br>
<syntaxhighlight lang="html">
<input type="text" required>
</syntaxhighlight>
<br>
===== プレースホルダ =====
placeholderは、入力例やヒントを表示する。<br>
<syntaxhighlight lang="html">
<input type="text" placeholder="例: 山田太郎">
</syntaxhighlight>
<br>
===== オートコンプリート =====
autocompleteは、自動補完を制御する。<br>
<syntaxhighlight lang="html">
<input type="text" autocomplete="on">
</syntaxhighlight>
<br>
===== 自動フォーカス =====
autofocusは、ページ読み込み時に自動フォーカスを制御する。<br>
<syntaxhighlight lang="html">
<input type="text" autofocus>
</syntaxhighlight>
<br><br>
== ラベル ==
==== for属性 ====
for属性は、labelタグとフォームコントロール (input、select、textarea等) を関連付けるために使用する属性である。<br>
<br>
<u>for属性の値は、関連付けるフォームコントロールのid属性と一致させる必要がある。(大文字・小文字も区別される)</u><br>
<br>
ラベルを押下する時、関連付けられたフォームコントロールにフォーカスが移動する。<br>
<br>
<u>for属性は、<label>タグ専用の属性であり、他のHTML要素では使用できない。</u><br>
<br>
<u>※注意</u><br>
<u>同じページ内で同じid値を複数使用してはいけない。</u><br>
<br>
for属性を使用するメリットは、スクリーンリーダーでの読み上げが適切になり、クリック / タップ可能な領域が広がることである。<br>
<br>
<syntaxhighlight lang="html">
<!-- 基本 -->
<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>
</syntaxhighlight>
<br>
また、for属性を使用せずに、<label>タグの中にフォームコントロールを直接入れることもできる。<br>
<syntaxhighlight lang="html">
<!-- ネストした記法 -->
<label>
  ユーザ名:
  <input type="text">
</label>
<!-- チェックボックス -->
<label>
  <input type="checkbox">
  利用規約に同意する
</label>
</syntaxhighlight>
<br><br>
== カレンダー ==
==== 日付選択用 ====
dateは、日付選択用のカレンダーである。<br>
<syntaxhighlight lang="html">
<input type="date">
</syntaxhighlight>
<br>
==== 日時選択 ====
datetime-localは、日時選択用のカレンダーである。<br>
<syntaxhighlight lang="html">
<input type="datetime-local">
</syntaxhighlight>
<br>
==== 月選択 ====
monthは、月選択用のカレンダーである。<br>
<syntaxhighlight lang="html">
<input type="month">
</syntaxhighlight>
<br>
==== 週選択 ====
weekは、週選択用のカレンダーである。<br>
<syntaxhighlight lang="html">
<input type="week">
</syntaxhighlight>
<br><br>
== カラーピッカー ==
<syntaxhighlight lang="html">
<input type="color">
</syntaxhighlight>
<br><br>
==== 入力要素 ====
===== 入力候補リスト =====
<datalist>タグは、入力候補リストを提供する。<br>
<syntaxhighlight lang="html">
<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>
</syntaxhighlight>
<br><br>
== その他表示 ==
==== 計算結果等の出力表示 ====
<output>タグは、計算結果等の出力表示用である。<br>
<syntaxhighlight lang="html">
<output name="result"></output>
</syntaxhighlight>
<br>
==== 進捗表示 ====
<progress>タグは、進捗状況表示用である。<br>
<syntaxhighlight lang="html">
<progress value="70" max="100">70%</progress>
</syntaxhighlight>
<br>
==== 数値の度合い ====
<meter>タグは、数値の度合いを表示する。<br>
<syntaxhighlight lang="html">
<meter value="0.6">60%</meter>
</syntaxhighlight>
<br><br>
== ファイル ==
==== 複数ファイルの選択 ====
multipleは、複数ファイルの選択を許可する。<br>
<syntaxhighlight lang="html">
<input type="file" multiple>
</syntaxhighlight>
<br><br>
== 送信ボタン ==
<nowiki><input type="submit" ...></nowiki>は単純なフォーム送信には使用できるが、カスタマイズ性に制限がある。<br>
そのため、<code><button type="submit" ...></code>が推奨される。<br>
<br>
これは、以下に示す理由からである。<br>
* <nowiki><button></nowiki>タグの方が柔軟にスタイリングできる。
* ボタン内に他のHTML要素 (アイコン等) を配置できる。
* アクセシビリティの観点で優れている。(スクリーンリーダーとの相性が良い)
<br>
<syntaxhighlight lang="html">
<button type="submit">
  <span>送信</span>
  <svg>アイコンのパス</svg>
</button>
</syntaxhighlight>
<br>
==== 属性 ====
===== 送信先URLの指定 =====
formactionは、送信先URLを指定する。<br>
<syntaxhighlight lang="html">
<input type="submit" formaction="/submit2.php">
</syntaxhighlight>
<br>
===== 送信メソッドの指定 =====
formmethodは、送信メソッドを指定する。<br>
<syntaxhighlight lang="html">
<input type="submit" formmethod="post">
</syntaxhighlight>
<br>
===== エンコードタイプの指定 =====
formenctypeは、エンコードタイプを指定する。<br>
<syntaxhighlight lang="html">
<input type="submit" formenctype="multipart/form-data">
</syntaxhighlight>
<br>
===== 送信後の表示先の指定 =====
formtargetは、送信後の表示先を指定する。<br>
<syntaxhighlight lang="html">
<input type="submit" formtarget="_blank">
</syntaxhighlight>
<br>
===== バリデーションの無効化 =====
formnovalidateは、バリデーションを無効化する。<br>
<syntaxhighlight lang="html">
<input type="submit" formnovalidate>
  </syntaxhighlight>
  </syntaxhighlight>
<br><br>
<br><br>
「https://mochiu.net/index.php/HTML_-_formタグ」から取得