１１　フォーム

（１） action 属性

action 属性は、送信先 URI を指定する際に使用します。サーバ側でデータを受け取るプログラムを指定するのが通常です。

ただし、input 要素や button 要素で作成されるサブミットボタンに formaction 属性が指定されている場合には、formaction 属性の値が優先されます。

記述例

<form action="/register">
  ～
</form>

（２） method 属性

method 属性は、データの送信方法（HTTPメソッド）を指定する際に指定します。 method 属性の値として指定できるのは以下の２種類です。

method="get" を指定すると送信内容が URI として渡されます。フォーム入力された内容は、action 属性で指定した URI の後ろにクエスチョンマーク（ ? ）を付けて、それ以降続くにクエリとして送信先ページに渡されます。そのため、入力内容は URI にそのまま表示されます。一般的なブラウザでは URI の長さに制限があるため、長すぎるデータは途中で切れてしまうので注意が必要です。短めのキーワードや番号などを送信するのに適した送信方法であり、長い文章などを送信するのには向いていません。

method="post" を指定すると URI の後ろに付くクエリとしてではなく、送信内容自体が本文（本体）として送信されます。入力内容が URI に表示されることはなく、かなり長い文章も送信することができます。

ただし、input 要素や button 要素で作成されるサブミットボタンに formmethod 属性が指定されている場合には、formmethod 属性の値が優先されます。

記述例

<form action="/register" method="post">
  ～
</form>

（３） enctype 属性

enctype 属性は、送信するデータの形式を指定する際に指定します。enctype　属性の値として指定できるのは以下の３種類です。どのような形式のデータを送信するかによって、値を使い分けます。

記述例

<form action="/register" method="post" enctype="application/x-www-form-urlencoded">
  ～
</form>

（４） accept-charset 属性

accept-charset 属性は、送信されるデータの文字エンコーディングを指定する際に使用します。多くの場合、文字エンコーディングを指定しなくてもサーバー側で自動判別されるようですが、文字化けが起きる場合には accept-charset 属性を指定することで回避できるかもしれません。

日本語の文字エンコーディングの値としては、"UTF-8"、"Shift_JIS"、"EUC-JP"などが挙げられます。また、複数の文字エンコーディングの候補を半角スペースで区切って指定することもできます。なお、大文字と小文字は区別されません。

記述例

<form action="/register" method="post" accept-charset="UTF-8">
  ～
</form>

（５） name 属性

name 属性は、フォームに固有の名前をつけます。複数のフォームがあるとき、各フォームに名前をつけていれば、Javascript などで操作したいフォームをコントロールできます。

記述例

<form action="/register" method="post" name="form1">
  ～
</form>

（６） autocomplete 属性

autocomplete 属性は、オートコンプリート（入力欄の自動補完）を有効にするかどうかを指定する際に使用します。

記述例

<form action="/register" method="post" autocomplete="off">
  ～
</form>

（７） novalidate 属性

novalidate 属性は、入力されたデータのバリデーション（妥当性チェック）をしないようにする際に使用します。input 要素の type 属性で、email や、url などの属性値を指定することができますが、これらの属性値に対応したブラウザでは、Eメールや URI として妥当ではない内容が入力された場合には バリデーション機能が働いてデータが送信されません。しかし、novalidate 属性を指定すると、このバリデーション機能が無効になります。

記述例

<form action="/register" method="post" novalidate>
  <input type="email">
  ～
</form>

（８） target 属性

target 属性は、フォーム送信するターゲット先を指定します。

記述例

<form action="/register" method="post" target="_top">
  ～
</form>

（１） name 属性

name 属性は、固有の名前をつけます。Javascript などで操作するときに参照します。

記述例

<form>
  <fieldset name="set1">
  ～
  </fieldset>
</form>

（２） form 属性

form 属性は、fieldset 要素を form 要素の外に配置した場合に、どの form 要素に関連付けるかを指定します。

この属性の値には、対応する form 要素に指定した ID 名を記述します。

記述例

<fieldset form="form1">
  <input type="text" name="param1"><br>
  <input type="text" name="param2"><br>
  <input type="submit" value="送信">
</fieldset>

<form id="form1">
</form>

（３） disabled 属性

disabled 属性は、グループ単位でフォーム部品を無効にすることができます。ただし、legend 要素内に配置された部品は無効化されません。

記述例

<form>
  <fieldset disabled>
    <input type="text" name="param1"><br>
    <input type="text" name="param2"><br>
    <input type="submit" value="送信">
  </fieldset>
</form>

（１） type 属性

type 属性は、フォーム部品のタイプを指定します。type 属性の属性値に入力コントロールの種別を与えることで、様々な入力コントロールを表示させることができます。

○ type="text"

一行テキスト入力欄を作成します（規定値）。

type="text"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form action="#">
  コード：<input type="text" name="param1" size="30" pattern="^[0-9A-Za-z]+$" placeholder="英数字">
  エリア：<input type="text" name="param2" list="arealist">
  　　　　　　<input type="submit" value="送信">
</form>
<datalist id="arealist">
 <option value="13">東京都</option>
 <option value="14">神奈川県</option>
 <option value="11">埼玉県</option>
 <option value="12">千葉県</option>
</datalist>

「コード」は、英数字以外を入れると、「送信」ボタンをクリックしたときにエラーになります。

「エリア」はプリダウン表示されるリストから選択できますが、送信されるデータは value 属性で指定された値です。なお、value 属性で指定された値以外を入力することもできます。

リストは、では、マウスを入力欄内に入れると入力欄の右側に ▼ が表示されますので、入力欄をクリックするとリストが表示されます。は、▼ が表示されない上に、何も入れられていないときに入力欄を2回クリックする必要があります。

○ type="password"

パスワード入力欄を作成します。

パスワード入力欄に入力されたテキストは、ブラウザ上ではアスタリスクなど（●や＊）に置き換えられて表示されます。 ただし、入力されたデータが暗号化されて送信されるわけではなく、 送信されたデータを受け取ることができれば内容を見ることができます。 利用の際には注意してください。

type="password"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  パスワード：<input type="password" name="param" size="30">
  　　　　　　<input type="submit" value="送信">
</form>

○ type="tel"

電話番号入力欄を作成します。

スマートフォンなどでは電話番号入力用のテンキーが表示されます。ただし、妥当な電話番号といっても実際にはその形式は様々なので、特に入力形式が強制されてはいません。

type="tel"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form action="#">
  電話番号：<input type="tel" name="param" size="12" autocomplete="off" pattern="^[0-9]{9,11}$">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、pattern 属性を指定し９～１１文字の数字に制限しています。

○ type="url"

URL の入力欄を作成します。

HTTP: や HTTPS:（小文字でも可）で始まらないとバリデーションが働きます（エラーになります）。ただし、type="url" を指定しておけば、必ずユーザーに正確な URL を記入してもらえるというわけではないので、pattern 属性を指定するなど、使用の際には注意が必要です。

type="url"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  URL：<input type="url" name="param" size="60" pattern="https?://[\w/:%#\$&\?\(\)~\.=\+\-]+">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、pattern 属性を指定し URL の形式に制限しています。なお、: や / は、%nn に変換されます。

○ type="email"

メールアドレスの入力欄を作成します。

アットマーク（ @ ）を含む妥当なメールアドレスでは無い場合にバリデーションが働きます（エラーになります）。ただし、type="email" を指定しておけば、必ずユーザーに正確なメールアドレスを記入してもらえるというわけではないので、pattern 属性を指定するなど、使用の際には注意が必要です。

type="email"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  URL：<input type="email" name="param" size="60" pattern="[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、pattern 属性を指定しメールアドレスの形式に制限しています。

○ type="search"

検索テキスト入力欄を作成します。

type="search"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  検索文字列：<input type="search" name="param" size="30">
  　　　　　　<input type="submit" value="送信">
</form>

○ type="datetime"

UTC（協定世界時）による日時の入力欄を作成します。

UTC はセシウム原子時計が刻む国際原子時をもとに決定されています。日本のローカル時刻は UTC に対して 9時間進んでいるので、以下の書式でグローバル日時として指定します。

type="datetime"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  日時：<input type="datetime" name="param" min="2019-04-01T9:00:00+09:00" max="2019-05-31T18:00:00+09:00" step="60">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、min や max 属性を指定し入力できる日時を制限しています。

ブラウザによる違い

type="text" と変わらない 日時も制限していない	範囲内でしか変更できないが、直接の入力では範囲外も送信できる

○ type="datetime-local"

ローカル日時の入力欄を作成します。

type="datetime-local"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  日時：<input type="datetime-local" name="param" min="2019-04-01T9:00:00" max="2019-05-31T18:00:00" step="60">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、min や max 属性を指定し入力できる日時を制限しています。また、: は %3A に置き換えられています。

ブラウザによる違い

type="text" と変わらない 日時も制限していない	入力可能な日時しか選べない。日付とは別に時刻も選択できる（時刻は time を参照）。	入力可能な日時しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる

入力可能な日時しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる	入力可能な日時しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる	範囲内でしか変更できないが、直接の入力では範囲外も送信できる

○ type="date"

日付の入力欄を作成します。

type="date"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  日付：<input type="date" name="param" min="2019-04-01" max="2019-05-31" step="7">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、min、max や step属性を指定し入力できる日付（4月1日から7日ごと）を制限しています。

ブラウザによる違い

type="text" と変わらない 日付も制限していない	入力可能な日付しか選べない。	入力可能な日付しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる

入力可能な日付しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる	入力可能な日付しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、入力時にエラーチェックされる	範囲内でしか変更できないが、直接の入力では範囲外も送信できる

○ type="month"

年月の入力欄を作成します。

type="month"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  年月：<input type="month" name="param" min="2019-04" max="2019-10">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、min や max 属性を指定し入力できる年月を制限しています。

ブラウザによる違い

type="text" と変わらない 日付も制限していない	入力可能な日付しか選べない。	入力可能な日付しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる

入力可能な日付しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる	type="text" と変わらない 日付も制限していない	範囲内でしか変更できないが、直接の入力では範囲外も送信できる

○ type="week"

年週の入力欄を作成します。週は、月曜日から日曜日までの週を 01 とした二桁の週番号で指定します。

type="week"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  年週：<input type="week" name="param" min="2019-W20" max="2019-W42">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、min や max 属性を指定し入力できる週を制限しています。

ブラウザによる違い

type="text" と変わらない 日付も制限していない	入力可能な日付しか選べない。	入力可能な日付しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる

入力可能な日付しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる	type="text" と変わらない 日付も制限していない	範囲内でしか変更できないが、直接の入力では範囲外も送信できる

○ type="time"

時刻の入力欄を作成します。

type="time"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  時刻：<input type="time" name="param" min="10:00:00" max="21:00:00" step="30">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、min、max や step 属性を指定し入力できる時刻を制限しています。また、: は %3A に置き換えられています。

ブラウザによる違い

type="text" と変わらない 時刻も制限していない	入力可能な時刻しか選べない。	入力可能な時刻しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる

入力可能な時刻しか選べない。ただし、直接の入力では範囲外も入力できてしまうが、送信ボタンを押してからエラーチェックされる	入力可能な時刻しか入力できない	範囲内でしか変更できないが、直接の入力では範囲外も送信できる

○ type="number"

数値の入力欄を作成します。

type="number"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  数値：<input type="number" name="param" size="3" min="0" max="100">
  　　　　　　<input type="submit" value="送信">
</form>

この例では、min や max 属性を指定し入力できる数値を制限しています。

ブラウザによる違い

送信ボタンを押してからエラーチェックされる ただし、先頭から続く数字のみチェックする また、数字に続く文字も送信される	送信ボタンを押してからエラーチェックされる	送信ボタンを押してからエラーチェックされる また、数字、符号、e E（指数）以外は入力できない	送信ボタンを押してからエラーチェックされる また、数字、符号、e E（指数）以外は入力できない	入力時にエラーチェックされる また、数字、-、e E（指数）以外は入力できない	送信ボタンを押してからエラーチェックされる また、数字、符号、e E（指数）以外は入力できない	送信ボタンを押してからエラーチェックされる また、数字、符号、e E（指数）以外は入力できない	範囲内でしか変更できないが、直接の入力では範囲外も送信できる また、数字に続く文字は送信されない

○ type="range"

レンジ入力欄を作成します。

レンジ入力では、正確な数値は重要ではなく、ユーザーはどの程度なのかを感覚的に指定することができます。初期値は、最大値と最小値の平均値になります。

type="range"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  数値：<input type="range" name="param" min="-1000" max="1000">
  　　　　　　<input type="submit" value="送信">
</form>

ブラウザによる違い

選択している位置の数値が表示されます

○ type="color"

色の入力欄を作成します。

常に何らかの色が選択された状態となり、空の値を指定することはできません。

type="color"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  色：<input type="color" name="param">
  　　　　　　<input type="submit" value="送信">
</form>

ブラウザによる違い

type="text" と変わらない 色コードも制限していない

ダイアログが開く

○ type="radio"

ラジオボタンを作成します。

name 属性の属性値を同じにすることによって、複数のラジオボタンを1つのグループにすることができます。ラジオボタンは同じグループからはひとつしか選択できません。

type="radio"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  <input type="radio" name="data" value="1">選択肢1
  <input type="radio" name="data" value="2" checked>選択肢2
  <input type="radio" name="data" value="3">選択肢3
  　　　　　　<input type="submit" value="送信">
</form>

○ type="checkbox"

チェックボックスを作成します。

type="checkbox"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  <input type="checkbox" name="data" value="1">チェック1
  <input type="checkbox" name="data" value="2">チェック2
  <input type="checkbox" name="data" value="3">チェック3
  　　　　　　<input type="submit" value="送信">
</form>

○ type="file"

サーバーへ送信するファイルを選択できるように、ファイル名の入力フィールドと[参照]ボタンを作成します。入力フィールドや[参照]ボタンをクリックすると、ファイルを選択するウィンドウが開きます。

なお、ファイルを送信するためは、form 要素に method="post" と enctype="multipart/form-data" を指定しておく必要があります。

type="file"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  <input type="file" name="param" accept="image/png" size="80">
  　　　　　　<input type="submit" value="送信">
</form>

ファイル名に漢字コードなどが入っていると、%nn の形式で16進数として表示されます。ちなみに、この HTML 文書は UTF-8 で書かれているので、表示される16進数も UTF-8 で表した文字コードです。

ブラウザによる違い

○ type="hidden"

ブラウザ上に表示されない非表示データを送信することができます。ただし、ブラウザ上には表示されませんが、HTMLソースを表示すれば見ることができるので注意してください。

type="hidden"を指定した場合、input 要素に共通な属性を指定できます。

記述例

<form>
  <input type="hidden" name="param" value="100">
  　　　　　　<input type="submit" value="送信">
</form>

非表示なので、なにも表示されていませんが、定義はされています。

○ type="submit"

フォームの送信ボタンを作成することができます。

type="submit"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  <input type="text" name="param" value="100"><br>
  <br>
  <input type="submit" value="送信">
</form>

value 属性で記述した文字列がボタンの見出しになります。

○ type="image"

画像を使った送信ボタンを作成することができます。

type="image"を指定した場合、input 要素に共通な属性に加え、次のような属性を指定できます。

記述例

<form>
  <input type="image" name="A" src="A.png" alt="エー">
  <input type="image" name="B" src="B.png" alt="ビー">
  <input type="image" name="C" src="C.png" alt="シー">
</form>

src 属性で記述したファイルがボタンのイメージになります。

クリックした画像上の位置 (x, y) がパラメータに含まれます。座標は左上が (0, 0) です。

パラメータ名は、ボタンの名前がついて (A.x, A.y) などとなります。ボタンに name 属性がなければ単に (x, y) となります。

○ type="reset"

リセットボタンを作成することができます。

type="reset"を指定した場合、input 要素に共通な属性を指定できます。

記述例

<form>
  <input type="text" name="param" value="">
  <br>
  <input type="checkbox" name="check" value="1">チェック1
  <input type="checkbox" name="check" value="2" checked>チェック2
  <input type="checkbox" name="check" value="3" checked>チェック3
  <br>
  <input type="radio" name="radio" value="1">選択肢1
  <input type="radio" name="radio" value="2" checked>選択肢2
  <input type="radio" name="radio" value="3">選択肢3
  <br><br>
  <input type="submit" value="登録">　<input type="reset" value="リセット">
</form>

リセットボタンをクリックすると、それまでに入力した情報をすべてキャンセルして、最初から入力をやり直すことができます。

○ type="button"

汎用的に使えるボタンを作成することができます。デフォルトの動作がないので、Javascript などと組み合わせて使用されることが多いようです。

type="button"を指定した場合、input 要素に共通な属性を指定できます。

記述例

<form>
  <input type="button" value="赤" onclick="document.body.style.backgroundColor='red';">
  <input type="button" value="青" onclick="document.body.style.backgroundColor='blue';">
  <input type="button" value="黄" onclick="document.body.style.backgroundColor='yellow';">
</form>

ボタンをクリックすると、Javascript が実行されます。

（２） name 属性

input 要素や select 要素などのフォーム部品を識別するための名前を指定します。

この属性の値は、入力されたデータ（または value 属性の値）とセットで送信されることになります。

記述例

<form>
  名前：<input type="text" name="name" value="Snoopy"><br>
  年齢：<input type="number" name="age" value="5"><br>
  <input type="submit" value="送信">
</form>

name 属性の値と value 属性の値が = で連結され、データが複数あればさらに & で連結されて送られます。これにより、複数のデータを識別することができます。

例えば、上記のまま送信すれば、次のようになります。

name=Snoopy&age=5

（３） value 属性

送信される値を指定します。

この属性の値は、name 属性の値とセットで送信されることになります。ただし、部品の種類により次のような違いがあります。

入力欄（text、date、number、hidden など）の場合

入力欄に表示される初期値として使用されます。内容が書き換えられた場合は、そちらが送信されることになります。

選択欄（radio、checkbox）の場合

そのボタン（またはボックス）が選択されている場合に送信されます。

ボタン（submit、reset、button）の場合

ボタンに表示されるテキストとして使用されます。

記述例

<form>
  入力欄：<input type="text" name="name" value="初期値"><br>
  選択欄：<input type="checkbox" name="data" value="1">チェック1
         <input type="checkbox" name="data" value="2">チェック2
         <input type="checkbox" name="data" value="3">チェック3<br>
  ボタン：<input type="submit" value="送信">
</form>

name 属性の値と value 属性の値が = で連結され、データが複数あればさらに & で連結されて送られます。これにより、複数のデータを識別することができます。

（４） disabled 属性

フォーム部品の無効化を指定します。

この属性が指定された部品は、選択や書き換えができなくなり、データも送信されなくなります。

記述例

<form>
  入力欄：<input type="text" name="param" value="初期値" disabled><br>
  選択欄：<input type="checkbox" name="data" value="1">チェック1
         <input type="checkbox" name="data" value="2">チェック2
         <input type="checkbox" name="data" value="3" disabled>チェック3<br>
  ボタン：<input type="submit" value="送信">　　<input type="reset" value="中止" disabled>
</form>

disabled 属性が記述してあるフォーム部品はグレー表示になり、入力も選択もできなくなります。

（５） form 属性

フォーム部品を form 要素の外に配置した場合に、どの form 要素に関連付けるかを指定します。

この属性の値には、対応する form 要素に指定した ID 名を記述します。

記述例

<p>入力欄：<input type="text" name="param" value="ABC" form="form1"></p>
<form id="form1">
  <input type="submit" value="送信">
</form>

（６） autofocus 属性

フォーム部品の自動フォーカスを指定します。

この属性が指定された部品は、文書の読み込み時に自動的にフォーカス（最初の入力位置に）されます。したがって、この属性を指定できる要素は、1つの文書に1つだけです。

記述例

<form>
  <input type="text" name="param1" value="100">
  <input type="text" name="param2" value="200">
  <input type="text" name="param3" value="300" autofocus>
</form>

実行例をクリックしてください。別ウィンドウが開き、autofocus 属性が記述してあるフォーム部品（3番目）が最初の入力対象になります。

（７） required 属性

required 属性は、そのフォーム部品が入力必須であることを指定します。

記述例

<form>
  <input type="text" name="param1" required><br>
  <input type="number" name="param2" required>
  　　　　　　<input type="submit" value="送信">
</form>

１１．２．２ 入力候補のリスト　(datalist)

datalist 要素は、入力候補のリストを作成します。入力候補の選択肢は、この要素内に配置する option 要素で示すことになります。ただし、選択肢以外の文字列も入力することができます。

datalist 要素は、password 以外の、テキストを入力できる type 属性を持つ input 要素で指定できます。

は、マウスを入力欄内に入れると入力欄の右側に ▼ が表示されますので、入力欄をクリックするとリストが表示されます。は、▼ が表示されない上に、何も入れられていないときに入力欄を2回クリックする必要があります。

記述例

<form>
  住所１：<input type="text" name="addr1" list="arealist">
  住所２：<input type="text" name="addr2" list="arealist">
  　　　　　　<input type="submit" value="送信">
</form>
<datalist id="arealist">
 <option value="東京都"></option>
 <option value="神奈川県"></option>
 <option value="埼玉県"></option>
 <option value="静岡県"></option>
</datalist>

次のように記述すると、リストに表示する文字列と実際に送信される値とを変えることができます。

記述例

<form>
  都道府県コード：<input type="text" name="code" list="arealist">
  　　　　　　<input type="submit" value="送信">
</form>
<datalist id="arealist">
 <option value="13" label="東京都"></option>
 <option value="14" label="神奈川県"></option>
 <option value="11" label="埼玉県"></option>
 <option value="22" label="静岡県"></option>
</datalist>

リストから選択後に実際に表示されるのは、option 要素の value 属性で指定した値です。

また、リストから選ぶだけではなく value 値を直接入力することもできます。入力する都度リストには候補のみが表示されます。例えば、 2 と入力するとリストは 静岡県 だけになります。ただし、 は対応していません。

option 要素では、<option>～</option> の間に記述することによっても、リストに表示する文字列を指定することができます。

しかし、この指定方法だと datalist 要素に対応していないブラウザで表示した場合、リストとして表示すべき文字列が最初から表示されてしまいますので、このように記述すべきではありません。

記述例

<form>
  都道府県コード：<input type="text" name="code" list="arealist">
  　　　　　　<input type="submit" value="送信">
</form>
<datalist id="arealist">
 <option value="13">東京都</option>
 <option value="14">神奈川県</option>
 <option value="11">埼玉県</option>
 <option value="22">静岡県</option>
</datalist>

１１．２．３ 選択肢　(option)

option 要素は、プルダウンメニューの選択肢、または入力候補リストの選択肢を作成します。この要素は、select 要素、optgroup 要素、datalist 要素の子要素として使用します。

記述例

<form action="#">
  商品コード：<input type="text" name="code" list="codelist">
  　　　　　　<input type="submit" value="送信">
</form>
<datalist id="codelist">
 <option value="A-" label="タイプ A"></option>
 <option value="B-" label="タイプ B"></option>
 <option value="C-" label="タイプ C" disabled></option>
 <option value="D-" label="タイプ D"></option>
</datalist>

label 属性が記述されていますので、リストには value 属性ではなく label 属性の文字列が表示されます。（では、value 属性も表示されますし、さらに、ではそれまでに入力された文字列も表示されます。）

ただし、リストから選択したときに入力欄に表示されるのは value 属性の文字列です。

また、「タイプ C」の商品は disabled 属性を付加しているので、リストに表示されません。

１１．３．１ プルダウンメニュー　(select)

select 要素は、プルダウンメニューを作成します。メニューの選択肢は、この要素内に配置する option 要素で示すことになります。

datalist 要素を指定した input 要素の場合と異なり、選択肢以外を入力することはできません。

<form>
  都道府県コード：
  <select name="code">
   <option value="" label=""></option>
   <option value="13" label="東京都"></option>
   <option value="14" label="神奈川県"></option>
   <option value="11" label="埼玉県"></option>
   <option value="22" label="静岡県"></option>
  </select>
  　　　　　　<input type="submit" value="送信">
</form>

<form>
  都道府県コード：
  <select name="code" size="3">
   <option value="13" label="東京都"></option>
   <option value="14" label="神奈川県"></option>
   <option value="11" label="埼玉県"></option>
   <option value="22" label="静岡県"></option>
  </select>
  　　　　　　<input type="submit" value="送信">
</form>

<form>
  都道府県コード：
  <select name="code" size="3" multiple>
   <option value="13" label="東京都"></option>
   <option value="14" label="神奈川県"></option>
   <option value="11" label="埼玉県"></option>
   <option value="22" label="静岡県"></option>
  </select>
  　　　　　　<input type="submit" value="送信">
</form>

<form>
  都道府県コード：
  <select name="code" disabled>
   <option value="" label=""></option>
   <option value="13" label="東京都"></option>
   <option value="14" label="神奈川県"></option>
   <option value="11" label="埼玉県"></option>
   <option value="22" label="静岡県"></option>
  </select>
  　　　　　　<input type="submit" value="送信">
</form>

都道府県コード：
  <select name="code" form="form1">
   <option value="" label=""></option>
   <option value="13" label="東京都"></option>
   <option value="14" label="神奈川県"></option>
   <option value="11" label="埼玉県"></option>
   <option value="22" label="静岡県"></option>
  </select>
<form id="form1">
 <input type="submit" value="送信">
</form>

<form>
  数量：<input type="number" name="count" value="100">
  都道府県コード：
  <select name="code" autofocus>
   <option value="13" label="東京都"></option>
   <option value="14" label="神奈川県"></option>
   <option value="11" label="埼玉県"></option>
   <option value="22" label="静岡県"></option>
  </select>
</form>

<form>
  都道府県コード：
  <select name="code" required>
   <option value=""></option>
   <option value="13">東京都</option>
   <option value="14">神奈川県</option>
   <option value="11">埼玉県</option>
   <option value="22">静岡県</option>
  </select>
  　　　　　　<input type="submit" value="送信">
</form>

１１．３．２ 選択肢　(option)

option 要素は、プルダウンメニューの選択肢、または入力候補リストの選択肢を作成します。この要素は、select 要素、optgroup 要素、datalist 要素の子要素として使用します。

次のような２つの記述方法があります。どちらも「ラベル」が選択肢として表示され、選択した項目の「値」が送られます。ただし、(1) の方が古い形だと思われるので、今後は (2) の形式で記述する方がよいでしょう。

<option value="値">ラベル</option>　　　　　　　　　　… (1)
<option value="値" label="ラベル"></option>　　　　　… (2)

select 要素では、option 要素を <select>～</select> の間に次のように記述します。

記述例

<form>
商品コード：<select name="code">
  <option value="" label=""></option>
  <option value="A002" label="タイプ A"></option>
  <option value="B001" label="タイプ B"></option>
  <option value="C001" label="タイプ C" disabled></option>
  <option value="D003" label="タイプ D"></option>
 </select>
  　　　　　　<input type="submit" value="送信">
</form>

上記の例では、「タイプ C」の商品は disabled 属性を付加しているので、選択できないようにグレー表示されています。

selected 属性を指定することによって、初期値を設定することもできます。selected 属性を指定しなければ、先頭の項目が表示されます。

記述例

<form action="#">
商品コード：<select name="code">
  <option value="A002" label="タイプ A"></option>
  <option value="B001" label="タイプ B"></option>
  <option value="C001" label="タイプ C" disabled></option>
  <option value="D003" label="タイプ D" selected></option>
 </select>
  　　　　　　<input type="submit" value="送信">
</form>

「タイプ D」に selected 属性を付加しているので、あらかじめ選択された状態で表示されます。

１１．３．３ 選択肢グループ　(optgroup)

optgroup 要素は、option 要素で作成する選択肢をグループ化する際に使用します。

label 属性は、選択肢グループにラベル（項目名）を付ける属性で、必ず指定する必要があります。

disabled 属性は、option 要素で作成する選択肢をグループごと無効にする場合に使用します。

記述例

<form>
商品コード：<select name="code">
  <option value="" label=""></option>
  <optgroup label="旧製品" disabled>
    <option value="A002" label="タイプ A"></option>
    <option value="B001" label="タイプ B"></option>
    <option value="C001" label="タイプ C"></option>
  </optgroup>
  <optgroup label="新製品">
    <option value="D003" label="タイプ D"></option>
    <option value="E002" label="タイプ E"></option>
  </optgroup>
</select>
  　　　　　　<input type="submit" value="送信">
</form>

一つ目の optgroup 要素に disable 属性を付加しているので、グループ全体が選択できないようにグレー表示されています。

（１） name 属性

select 要素などのフォーム部品を識別するための名前を指定します。

この属性の値は、入力されたデータ（または value 属性の値）とセットで送信されることになります。

記述例

<form>
  ご意見をお聞かせください<br>
  <textarea name="comment">なし</textarea>
  <input type="submit" value="送信">
</form>

入力した内容に漢字コードなどが入っていると、%nn の形式で16進数として表示されます。ちなみに、この HTML 文書は UTF-8 で書かれているので、表示される16進数も UTF-8 で表した文字コードです。

（２） cols 属性と rows 属性

cols 属性は、一行当たりの最大文字数の目安を指定する際に使用します。既定値は 20 です。

rows 属性は、表示行数を指定する際に使用します。既定値は 2 です。

記述例

<form>
  ご意見をお聞かせください<br>
  <textarea name="comment" cols="40" rows="3">なし</textarea>
  <input type="submit" value="送信">
</form>

入力した内容に漢字コードなどが入っていると、%nn の形式で16進数として表示されます。ちなみに、この HTML 文書は UTF-8 で書かれているので、表示される16進数も UTF-8 で表した文字コードです。

（３） readonly 属性

そのフォーム部品が読み取り専用であることを指定します。

書き換えはできませんが、選択することは可能でデータも送信されます。

記述例

<form>
  ご意見をお聞かせください<br>
  <textarea name="comment" readonly>なし</textarea>
  <input type="submit" value="送信">
</form>

入力した内容に漢字コードなどが入っていると、%nn の形式で16進数として表示されます。ちなみに、この HTML 文書は UTF-8 で書かれているので、表示される16進数も UTF-8 で表した文字コードです。

（４） disabled 属性

そのフォーム部品の無効化を指定します。

グレー表示名なり、選択することできなくなり、データも送信されません。

記述例

<form>
  ご意見をお聞かせください<br>
  <textarea name="comment" disabled>なし</textarea>
  <input type="submit" value="送信">
</form>

（５） maxlength 属性

入力できる最大文字数を指定します。半角でも全角でも 1文字と見なします。

記述例

<form>
  ご意見をお聞かせください<br>
  <textarea name="comment" maxlength="30">なし</textarea>
  <input type="submit" value="送信">
</form>

入力した内容に漢字コードなどが入っていると、%nn の形式で16進数として表示されます。ちなみに、この HTML 文書は UTF-8 で書かれているので、表示される16進数も UTF-8 で表した文字コードです。

（６） wrap 属性

入力テキストの折り返し部分を、送信データに反映させるかどうかを指定します。指定できる値は次の2つです。

　soft　　：折り返しを反映せずに送信します。（初期値）

　hard　　：折り返し部分に改行を入れて送信します。

記述例

<form action="#">
  <textarea name="comment" cols="10" wrap="soft">
ABCDEFGHIJKLMNOPQRST</textarea>
  <input type="submit" value="送信">
</form>

<form action="#">
  <textarea name="comment" cols="10" wrap="hard">
ABCDEFGHIJKLMNOPQRST</textarea>
  <input type="submit" value="送信">
</form>

左側は wrap="soft" なので改行コードは入りませんが、右側は wrap="hard" なので改行コードが入ります。

（７） form 属性

form 属性は、フォーム部品を form 要素の外に配置した場合に、どの form 要素に関連付けるかを指定します。

この属性の値には、対応する form 要素に指定した ID 名を記述します。

記述例

<textarea name="comment" form="form1">なし</textarea>
<form id="form1">
 <input type="submit" value="送信">
</form>

（８） autofocus 属性

autofocus 属性は、フォーム部品の自動フォーカスを指定します。

この属性が指定された部品は、文書の読み込み時に自動的にフォーカス（最初の入力位置に）されます。したがって、この属性を指定できる要素は、1つの文書に1つだけです。

記述例

<form>
  数量：<input type="number" name="count" value="1"><br>
  ご意見をお聞かせください<br>
  <textarea name="comment" autofocus>なし</textarea>
</form>

実行例をクリックしてください。別ウィンドウが開き、autofocus 属性が記述してあるフォーム部品（2番目）が最初の入力対象になります。

（９） placeholder 属性

入力の助けとなるような短いヒント（記入例やフォーマットの例など）を指定します。

入力欄の初期値を表示する方法として、<textarea>～</textarea> の間に書く方法と、placeholder 属性で指定する方法があります。前者はあらかじめ入力されている文字列で、変更しなければこのまま送信されます。それに対して、後者はヒントであり、textarea 要素にカーソルを移動させると消え、その内容は送信されません。

両方指定した場合は、一般的なブラウザでは前者が優先されます。

記述例

<form>
  <textarea name="comment" placeholder="ご意見をお聞かせください"></textarea>
  <input type="submit" value="送信">
</form>

入力した内容に漢字コードなどが入っていると、%nn の形式で16進数として表示されます。ちなみに、この HTML 文書は UTF-8 で書かれているので、表示される16進数も UTF-8 で表した文字コードです。

（１０） dirname 属性

書字方向の送信に使う名前を指定します。

ここで指定した名前が、入力内容の書字方向（ltr または rtl）とセットで送信されることになります（例えば、dir=ltr）。

書字方向は自動的に判別されるようです。

記述例

<form>
  ご意見をお聞かせください<br>
  <textarea name="comment" dirname="dir">なし</textarea>
  <input type="submit" value="送信">
</form>

入力した内容に漢字コードなどが入っていると、%nn の形式で16進数として表示されます。ちなみに、この HTML 文書は UTF-8 で書かれているので、表示される16進数も UTF-8 で表した文字コードです。

（１１） required 属性

required 属性は、そのフォーム部品が入力必須であることを指定します。

記述例

<form>
  ご意見をお聞かせください<br>
  <textarea name="comment" required></textarea>
  <input type="submit" value="送信">
</form>

何も入力しないで、「送信」ボタンをクリックするとエラーになります。

（１） value 属性

value 属性は、現時点の進捗状況を 0 以上で、max 属性の値以下の数値で指定します。

value 属性が省略されたら、進捗状況が確定していないことを表し、そのプログレスバーは未確定プログレスバーとなります。

記述例

<progress value="0.7">進捗率 70%</progress>
<br><br>
<progress>進捗状況確認中</progress>

この例では、上側は 7割の作業が完了していることを示していますが、下側は進捗状況が確定していないことを表しています。

ブラウザによる違い

（２） max 属性

max 属性は、全体の作業量を指定します。省略した場合は 1 になります。

記述例

<progress value="70" max="100">進捗率 70%</progress>

この例でも、やはり 7割の作業が完了していることを示しています。つまり、value 属性や max 属性で記述した数値ではなく、その比率を表示するということです。

（３） form 属性

form 属性は、その出力欄をどの form 要素に関連付けるかを指定します。この属性の値には、対応する form 要素に指定した ID 名を記述します。

記述例

<form id="form1">
  <input type="text" name="param">
</form>
<progress value="0.3" form="form1">進捗率 30%</progress>

（１） value 属性

value 属性は、現時点の進捗状況を min 属性の値以上で、max 属性の値以下の数値で指定します。

記述例

<meter value="0.7">使用率 70%</meter>

この例では、7割の数量が存在していることを示しています。

（２） min 属性、max 属性

min 属性、max 属性は、ゲージの最小値、最大値を指定します。省略した場合はそれぞれ 0、 1 になります。

記述例

<meter value="170" min="100" max="200">残量 170</meter>

この例でも、やはり 7割の数量が存在していることを示しています。

（３） low 属性、high 属性

low 属性、high 属性は、min 属性と max 属性の間の中間領域を指定します。つまり、min < low < high < max と指定します。省略した場合はそれぞれ min 属性と max 属性の値と同じになります。

記述例

<progress value="140" min="100" max="200" low="130" high="160">安全領域 140</progress>
<br><br>
<progress value="170" min="100" max="200" low="130" high="160">危険領域 170</progress>

ブラウザにもよりますが、value 属性の値が low 属性と high 属性の値の間にあれば緑で、その範囲外であれば黄色で表示されます。

この例では、上が範囲内、下が範囲外になっています。

（４） optimum 属性

optimum 属性は、その値が含まれている範囲を最適な領域とします。つまり、min < low < high < optimum < max と指定した場合、high ～ max の間が最適な領域となります。省略した場合は min 属性と max 属性の値の中間点になります。

記述例

<progress value="120" min="100" max="200" low="130" high="160" optimum="180">非最適領域 120</progress>
<br><br>
<progress value="140" min="100" max="200" low="130" high="160" optimum="180">準最適領域 140</progress>
<br><br>
<progress value="170" min="100" max="200" low="130" high="160" optimum="180">最適領域 170</progress>

ブラウザにもよりますが、value 属性の値が最適な領域にあれば緑で、それに隣接する領域であれば黄色で、さらに離れた領域だと赤で表示されます。

この例では、一番上が非最適領域、二番目が準最適領域、一番下が最適領域になっています。

ブラウザによる違い

（５） form 属性

form 属性は、その出力欄をどの form 要素に関連付けるかを指定します。この属性の値には、対応する form 要素に指定した ID 名を記述します。

記述例

<form id="form1">
  <input type="text" name="param">
</form>
<meter value="0.3" form="form1">使用率 30%</meter>