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を指定する。

 <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">

ラジオボタン

ラジオボタンの基本

ラジオボタンは、複数の選択肢から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>

送信ボタン

属性

送信先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>