１１　フォーム

（１） 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 属性で指定された値以外を入力することもできます。

入力候補のリストは、list 属性で datalist 要素 の id を指定します。では、マウスを入力欄内に入れると入力欄の右側に ▼ が表示されますので、入力欄をクリックするとリストが表示されます。は、▼ が表示されない上に、何も入れられていないときに入力欄を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 属性を指定し９～１１文字の数字に制限しています。

入力候補のリストは、list 属性で datalist 要素の id を指定します。リストの表示は、type="text" のときと同様です。

○ 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 に変換されます。

入力候補のリストは、list 属性で datalist 要素の id を指定します。リストの表示は、type="text" のときと同様です。

○ 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 属性を指定しメールアドレスの形式に制限しています。

入力候補のリストは、list 属性で datalist 要素の id を指定します。リストの表示は、type="text" のときと同様です。

○ type="search"

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

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

記述例

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

入力候補のリストは、list 属性で datalist 要素の id を指定します。リストの表示は、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 に置き換えられています。

ブラウザによる違い

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

入力候補のリストは、list 属性で datalist 要素の id を指定します。

入力候補のリストから日付を選択できますます。ただし、「その他...」からそれ以外の日付も選択できます。

は対応していません。

記述例

<form>
  日時：<input type="datetime-local" name="param" list="date" value="2019-05-04T12:00:00">
  　　　　　　<input type="submit" value="送信">
 <datalist id="arealist">
  <option value="2019-05-01T12:00:00"></option>
  <option value="2019-05-04T12:00:00"></option>
  <option value="2019-05-07T13:00:00"></option>
  <option value="2019-05-09T12:00:00"></option>
 </datalist>
</form>

ブラウザによる違い

		list 属性は無視

○ 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日ごと）を制限しています。

ブラウザによる違い

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

入力候補のリストは、list 属性で datalist 要素の id を指定します。リストの表示形式は、type="datetime-local" のときと同様です。

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

入力候補のリストは、list 属性で datalist 要素の id を指定します。リストの表示形式は、type="datetime-local" のときと同様です。

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

入力候補のリストは、list 属性で datalist 要素の id を指定します。リストの表示形式は、type="datetime-local" のときと同様です。

○ 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 に置き換えられています。

ブラウザによる違い

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

入力候補のリストは、list 属性で datalist 要素 の id を指定します。リストの表示形式は、type="datetime-local" のときと同様です。

ただし、秒が指定してあると、value 値と秒の一致しない時刻はリストに表示されません。

○ 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（指数）以外は入力できない

入力候補のリストは、list 属性で datalist 要素 の id を指定します。リストの表示形式は、type="datetime-local" のときと同様です。

ただし、value 属性が指定してあると、value 値と一致しない数値はリストに表示されません。

○ type="range"

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

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

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

記述例

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

ブラウザによる違い

入力候補のリストは、list 属性で datalist 要素 の id を指定します。list 属性を指定すると入力候補のリストで指定された数値の位置に縦線が表示されます。

ただし、入力候補のリストで指定された数値しか選べないということはありません。

記述例

<form>
  数値：<input type="range" name="param" min="23" max="32" list="temperature" value="28">
  　　　　　　<input type="submit" value="送信">
  <datalist id="temperature">
  <option value="25"></option>
  <option value="26"></option>
  <option value="27"></option>
  <option value="28"></option>
  <option value="29"></option>
  <option value="30"></option>
  </datalist>
</form>

ブラウザによる違い

○ type="color"

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

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

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

記述例

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

ブラウザによる違い

		ダイアログが開く

入力候補のリストは、list 属性で datalist 要素 の id を指定します。

ただし、入力候補のリストで指定された色しか選べないということはありません。

記述例

<form>
  色：<input type="color" name="param" list="green" value="#00ff00">
  　　　　　　<input type="submit" value="送信">
  <datalist id="green">
  <option value="#00ff00"></option>
  <option value="#00ee00"></option>
  <option value="#00dd00"></option>
  <option value="#00cc00"></option>
  <option value="#00bb00"></option>
  <option value="#00aa00"></option>
  <option value="#009900"></option>
  </datalist>
</form>

ブラウザによる違い

	ダイアログが開く

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

（６） required 属性

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

記述例

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

（１） name 属性

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

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

記述例

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

この例では、code=?? という形式で選択した値が送られます。

（２） size 属性

size 属性は、表示される選択肢の数を指定します。

この属性の初期値は、multiple 属性が指定されている場合は 4、指定されていない場合は 1 になります。

記述例

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

size 属性が 3 と指定されていますので、選択肢が3行分表示されています。

（３） multiple 属性

multiple 属性は、複数の選択が可能であることを指定します。

記述例

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

multiple 属性が指定されていますので、複数を選択できます。Windows の場合は、シフトキーやコントロールキーと組み合わせてクリックします。

（４） disabled 属性

disabled 属性は、フォーム部品の無効化を指定します。

記述例

<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 要素には、disabled 属性が指定されていますので、選択できないようにグレー表示されます。

（５） form 属性

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

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

記述例

都道府県コード：
  <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>

（６） required 属性

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

記述例

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

この例では、2番目以降の選択肢（空でない選択肢）を選択する必要があります。