フォーム

フォーム（form）は、ユーザーが情報を入力し、ウェブページとインタラクションする一種の形式です。ほとんどの場合、ユーザーが送信した情報はサーバーに送られます。たとえば、ウェブサイトの検索バーはフォームです。

フォームは、入力ボックス、ボタン、ラジオボタン、チェックボックスなど、1つまたは複数のウィジェットで構成されています。これらのウィジェットはコントロール（controls）と呼ばれます。

`<form>`

概要

<form>タグはフォームを定義するために使用され、すべてのフォーム内容はこのコンテナ要素内に配置されます。

<form>
  <!-- 各種フォームコントロール -->
</form>

上記のコードはフォームの基本的な形式です。

以下は一般的な例です。

<form action="https://example.com/api" method="post">
  <label for="POST-name">ユーザー名：</label>
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="送信">
</form>

上記のコードは、3つのコントロールを含むフォームです：1つの<label>タグ、1つのテキスト入力ボックス、1つの送信ボタンです。このテキスト入力ボックスのname属性はuserで、サーバーに送信されるキー名として使用されます。キー値はこのコントロールのvalue属性で、ユーザーが入力した値に等しいです。

ユーザーがテキスト入力ボックスにユーザー名（例えばfoobar）を入力し、送信ボタンをクリックすると、ブラウザはサーバーhttps://example.com/apiにPOSTリクエストを送信し、user=foobarの形式のデータを送信します。

<form>には以下の属性があります。

accept-charset：サーバーが受け入れる文字エンコーディングのリスト。空白で区切ります。デフォルトはウェブページのエンコーディングと同じです。
action：サーバーがデータを受信するURL。
autocomplete：ユーザーが特定のコントロールを記入しなかった場合、ブラウザがその値を自動的に記入するかどうか。可能な値はoff（自動入力しない）とon（自動入力する）です。
method：データを送信するHTTPメソッド。可能な値はpost（フォームデータをHTTPデータボディとして送信）とget（フォームデータをURLのクエリ文字列として送信）、dialog（フォームが<dialog>内に存在する場合）です。
enctype：method属性がpostの場合、この属性はサーバーに送信されるMIMEタイプを指定します。可能な値はapplication/x-www-form-urlencoded（デフォルト値）、multipart/form-data（ファイルアップロードの場合）、text/plainです。
name：フォームの名前。ウェブページ内で一意である必要があります。注意：コントロールにname属性が設定されていない場合、そのコントロールの値はサーバーに送信されません。
novalidate：ブール属性。フォーム送信時に検証を無効にするかどうか。
target：サーバーからの応答データを表示するウィンドウ。可能な値は_self（現在のウィンドウ）、_blank（新しいウィンドウ）、_parent（親ウィンドウ）、_top（トップウィンドウ）、<iframe>タグのname属性（フォームの返結果が表示される<iframe>ウィンドウ）です。

enctype 属性

<form>フォームのenctype属性は、POSTメソッドを使用してデータを送信する際に、ブラウザが送信するデータのMIMEタイプを指定します。この属性は以下の値を取ることができます。

（1）application/x-www-form-urlencoded

application/x-www-form-urlencodedはデフォルトタイプで、コントロール名とコントロール値はすべてエスケープされます（空白は+に、数字以外の文字は%HH形式に変換され、改行はCR LFに変換されます）。コントロール名とコントロール値は=で区切られ、コントロールは出現順に並べられ、コントロール間は&で区切られます。

（2）multipart/form-data

multipart/form-dataは主にファイルアップロードに使用されます。このタイプでは、大きなファイルをアップロードする際、ファイルが複数の部分に分けて送信され、各部分のHTTPヘッダーにはContent-Disposition属性が含まれ、値はform-data、さらにname属性が含まれ、値はコントロール名です。

Content-Disposition: form-data; name="mycontrol"

以下はファイルをアップロードするためのフォームです。

<form action="https://example.com/api"
      enctype="multipart/form-data"
      method="post">
  ユーザー名：<input type="text" name="submit-name"><br>
  ファイル：<input type="file" name="files"><br>
  <input type="submit" value="アップロード"> <input type="reset" value="クリア">
</form>

上記のコードでは、ユーザー名Larryを入力し、file1.txtファイルを選択し、「アップロード」をクリックします。ブラウザが送信する実際のデータは以下の通りです。

Content-Type: multipart/form-data; boundary=--AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

上記のコードでは、ブラウザはこのフォームを複数のデータブロックに送信します。最初の行はContent-Typeフィールドで、データ形式がmultipart/form-data（つまり複数のデータブロック）であることをサーバーに伝えます。各データブロックの最初の行はContent-Dispositionで、nameフィールドはこのデータブロックのコントロール名を示し、データ本体はそのコントロールのデータ値を示します。たとえば、最初のデータブロックのname属性はsubmit-nameコントロールで、データ本体はそのコントロールの値Larryです。2番目のデータブロックはコントロールfilesであり、このコントロールはファイルをアップロードするため、filename属性でファイル名file1.txtを指定し、データ本体はfile1.txtの内容です。

`<fieldset>`，`<legend>`

<fieldset>タグは、コントロールの集合を示すブロックレベルコンテナタグで、関連するコントロールのグループをまとめるために使用されます。

<form>
  <fieldset>
    <p>年齢：<input type="text" name="age"></p>
    <p>性別：<input type="text" name="gender"></p>
  </fieldset>
</form>

上記のコードでは、2つの入力ボックスが1つのグループを形成し、それらの外側にはボックスが表示されます。

<fieldset>には以下の属性があります。

disabled：ブール属性。一度設定されると、<fieldset>内部に含まれるすべてのコントロールは無効になり、グレー表示されます。
form：コントロールグループが属する<form>を指定します。その値は<form>のid属性と同じです。
name：このコントロールグループの名前。

<legend>タグは、<fieldset>コントロールグループのタイトルを設定するために使用され、通常は<fieldset>内部の最初の要素であり、コントロールグループの上部境界内に表示されます。

  <fieldset>
    <legend>個人情報</legend>
    <p>年齢：<input type="text" name="age"></p>
    <p>性別：<input type="text" name="gender"></p>
  </fieldset>

上記のコードでは、<legend>は「個人情報」のタイトルを設定し、そのタイトルは<fieldset>の最上部に表示されます。

`<label>`

<label> タグはインライン要素で、コントロールのテキスト説明を提供し、ユーザーがコントロールの目的を理解するのに役立ちます。

<label for="user">ユーザー名：</label>
<input type="text" name="user" id="user">

上記のコードでは、入力ボックスの前に「ユーザー名：」というテキスト説明が表示されます。

<label> の大きな利点は、コントロールの使い勝手を向上させることです。一部のコントロールは比較的小さいため（ラジオボタンなど）、クリックしにくい場合があります。その場合、対応する <label> タグをクリックすることで、コントロールを選択できます。<label> をクリックすると、コントロール自体の click イベントが発生したのと同じことになります。

<label> の for 属性は、対応するコントロールに関連付けられます。その値は、対応するコントロールの id 属性です。したがって、コントロールには id 属性を設定することをお勧めします。

コントロールを <label> 内に配置することもできます。この場合、for 属性と id 属性は必要ありません。

<label>ユーザー名：
  <input type="text" name="user">
</label>

<label> の属性は以下のとおりです。

for：関連するコントロールの id 属性。
form：関連するフォームの id 属性。この属性を設定すると、<label> はページのどこにでも配置できます。設定しない場合は、<form> 内に配置する必要があります。

1 つのコントロールに複数の <label> タグを関連付けることができます。

<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>

上記のコードでは、<input> に 2 つの <label> が関連付けられています。

`<input>`

概要

<input> タグはインライン要素で、ユーザーからの入力を受け取るために使用されます。終了タグのない、単独で使用されるタグです。

type 属性の値によってさまざまな種類があり、デフォルト値は text で、入力ボックスを表します。

<input>
<input type="text">

上記のコードは、単一行の入力ボックスを生成し、ユーザーはそこにテキストを入力できます。

<input> には非常に多くの属性があり、一部の属性は特定のタイプ専用です。それらの属性については、後述の「タイプ」のセクションで説明します。ここでは、すべてのタイプに共通する属性を紹介します。

autofocus：ブール属性。ページの読み込み時に自動的にフォーカスを取得するかどうか。
disabled：ブール属性。コントロールを無効にするかどうか。設定すると、コントロールはグレー表示され、ユーザーは表示できますが、操作することはできません。
form：関連するフォームの id 属性。この属性を設定すると、コントロールはページのどこにでも配置できます。設定しない場合は、<form> 内に配置する必要があります。
list：関連する <datalist> の id 属性。コントロールに関連するデータリストを設定します。詳細は後述します。
name：コントロールの名前。主にサーバーにデータを送信するときに、コントロールのキーと値のペアのキー名として使用されます。 name 属性が設定されているコントロールのみがサーバーに送信され、設定されていないコントロールは送信されません。
readonly：ブール属性。読み取り専用かどうか。
required：ブール属性。必須かどうか。
type：コントロールのタイプ。詳細は後述します。
value：コントロールの値。

タイプ

type 属性は <input> の形式を決定します。この属性には、以下の値を指定できます。

（1）text

type="text" は通常のテキスト入力ボックスで、単一行のテキストを入力するために使用されます。ユーザーが改行を入力した場合、改行は入力から自動的に削除されます。

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

text 入力ボックスには、以下の属性があります。

maxlength：入力できる最大文字数。負でない整数値を指定します。
minlength：入力できる最小文字数。負でない整数値を指定します。 maxlength よりも小さい値である必要があります。
pattern：ユーザー入力が一致する必要がある正規表現。たとえば、ユーザーに 4〜8 文字の英字を入力させる場合は、pattern="[a-z]{4,8}" と記述できます。ユーザー入力が要件を満たしていない場合、ブラウザは警告を表示し、フォームを送信しません。
placeholder：入力フィールドが空の場合に、ヒントとして表示されるサンプル値。ユーザーが文字を入力していない場合にのみ表示され、それ以外の場合は表示されません。
readonly：ブール属性。入力ボックスを読み取り専用にするかどうか。ユーザーは表示できますが、入力することはできません。
size：入力ボックスの表示幅を文字数で指定します。正の整数値を指定します。デフォルト値は 20 です。この数値を超える文字は、カーソルを移動しないと表示されません。
spellcheck：ユーザー入力に対してスペルチェックを有効にするかどうか。 true または false を指定できます。

（2）search

type="search" は、検索用のテキスト入力ボックスです。基本的には type="text" と同じです。一部のブラウザでは、入力時に、入力ボックスの末尾に削除ボタンが表示され、クリックするとすべての入力が削除され、ユーザーは最初から入力し直すことができます。

以下は例です。

<form>
  <input type="search" id="mySearch" name="q"
    placeholder="検索語を入力してください..." required>
  <input type="submit" value="検索">
</form>

（3）button

type="button" は、デフォルトの動作がないボタンです。通常、スクリプトで click イベントのリスナー関数を指定して使用します。

<input type="button" value="クリック">

このタイプはできるだけ使用せず、代わりに <button> タグを使用することをお勧めします。 <button> タグの方が意味的に明確であり、内部に画像やその他の HTML コードを挿入できます。

（4）submit

type="submit" は、フォームの送信ボタンです。ユーザーがこのボタンをクリックすると、フォームがサーバーに送信されます。

<input type="submit" value="送信">

value 属性を指定しない場合、ブラウザは送信ボタンにデフォルトのテキストを表示します。通常は「送信」です。

このタイプには、<form> タグの対応する設定を上書きするための以下の属性があります。

formaction：フォームデータを送信するサーバーの URL。
formenctype：フォームデータのエンコードタイプ。
formmethod：フォームを送信するために使用する HTTP メソッド（get または post）。
formnovalidate：ブール値。サーバーにデータを送信する前に、フォームの検証を無視するかどうか。
formtarget：サーバーから返されたデータを表示するウィンドウ。

（5）image

type="image" は、画像ファイルを送信ボタンとして使用することを表します。動作と使い方は type="submit" とまったく同じです。

<input type="image" alt="ログイン" src="login-button.png">

上記のコードでは、画像ファイルはクリック可能なボタンで、クリックするとサーバーにデータが送信されます。

このタイプには、以下の属性があります。

alt：画像が読み込めない場合に表示される代替テキスト。
src：読み込む画像の URL。
height：画像の表示高さ（ピクセル単位）。
width：画像の表示幅（ピクセル単位）。
formaction：フォームデータを送信するサーバーの URL。
formenctype：フォームデータのエンコードタイプ。
formmethod：フォームを送信するために使用する HTTP メソッド（get または post）。
formnovalidate：ブール値。サーバーにデータを送信する前に、フォームの検証を無視するかどうか。
formtarget：サーバーから返されたデータを表示するウィンドウ。

ユーザーが画像ボタンをクリックして送信すると、マウスのクリック位置を示す 2 つのパラメータ x と y がサーバーに送信されます。たとえば、x=52&y=55 のようになります。 x は横座標、y は縦座標で、どちらも画像の左上隅を原点 (0, 0) とします。画像ボタンに name 属性が設定されている場合（たとえば、name="position"）、その値が座標のプレフィックスとして使用されます。たとえば、position.x=52&position.y=55 のようになります。この機能は通常、マップタイプの操作に使用され、ユーザーがマップのどの部分をクリックしたかをサーバーに伝えるために使用されます。

（6）reset

type="reset" はリセットボタンです。ユーザーがクリックすると、すべてのフォームコントロールが初期値にリセットされます。

<input type="reset" value="リセット">

value 属性を設定しない場合、ブラウザはボタンにデフォルトのテキストを表示します。通常は「リセット」です。

このコントロールはあまり役に立ちません。ユーザーが誤ってクリックすると、入力した値がすべてリセットされてしまいます。使用しないことをお勧めします。

（7）checkbox

type="checkbox" はチェックボックスで、オプションを選択または選択解除できます。

<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">同意する</label>

上記のコードでは、テキストの前にクリック可能なチェックボックスが表示されます。クリックすると選択され、もう一度クリックすると選択解除されます。上記のコードでは、checked 属性はデフォルトで選択されていることを示しています。

value 属性のデフォルト値は on です。つまり、value 属性を設定しない場合、上記の例では、チェックボックスをオンにすると agreement=on が送信されます。オフの場合は、送信されません。

複数の関連するチェックボックスは、<fieldset> 内に配置できます。

<fieldset>
  <legend>あなたの興味</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">コーディング</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">音楽</label>
  </div>
</fieldset>

上記のコードでは、ユーザーが両方のチェックボックスをオンにすると、送信時に 2 つの name 属性が送信されます。たとえば、interest=coding&interest=music のようになります。

（8）radio

type="radio" はラジオボタンで、グループ内の選択肢から 1 つだけを選択できます。ラジオボタンは通常、小さな円で表示され、選択すると塗りつぶされるか、強調表示されます。

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

上記のコードでは、性別は 2 つの選択肢から 1 つだけ選択できます。

複数のラジオボタンの name 属性の値は、すべて同じにする必要があります。サーバーに送信されるのは、選択された値です。

このタイプの属性は以下のとおりです。

checked：ブール属性。デフォルトで選択されているかどうか。
value：ユーザーがこの項目を選択したときにサーバーに送信される値。デフォルトは on です。

（9）email

type="email" は、メールアドレスのみを入力できるテキスト入力ボックスです。フォームを送信する前に、ブラウザはメールアドレスの形式が正しいかどうかを自動的に検証します。正しくない場合は、警告が表示され、サーバーに送信できません。

<input type="email" pattern=".+@foobar.com" size="30" required>

上記のコードは、foobar.com を末尾とするメールアドレスのみを入力できる必須のテキストボックスを生成します。

このタイプには、multiple というブール属性があります。設定すると、入力ボックスに複数のメールアドレスをカンマ区切りで入力できます。

<input id="emailAddress" type="email" multiple required>

multiple 属性と required 属性の両方を設定した場合、メールアドレスが 0 個でも許可されます。つまり、入力ボックスを空にすることができます。

このタイプの属性は以下のとおりです。

maxlength：入力できる最大文字数。
minlength：入力できる最小文字数。
multiple：ブール属性。カンマ区切りの複数のメールアドレスを入力できるかどうか。
pattern：入力が一致する必要がある正規表現。
placeholder：入力が空の場合に表示されるテキスト。
readonly：ブール属性。入力ボックスを読み取り専用にするかどうか。
size：負でない整数。入力ボックスの表示幅を文字数で指定します。
spellcheck：入力内容に対してスペルチェックを有効にするかどうか。 true または false を指定できます。

このタイプは、<datalist> タグと組み合わせて、入力候補を提供することもできます。

<input type="email" size="40" list="defaultEmails">

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

上記のコードでは、入力ボックスにフォーカスが当たると、ドロップダウンリストが表示され、5 つの入力候補が表示されます。

（10）password

type="password" はパスワード入力ボックスです。ユーザーの入力は隠され、通常はアスタリスク（*）またはドット（·）で表示されます。

<input type="password" id="pass" name="password"
           minlength="8" required>

ブラウザによって、このタイプの入力ボックスの表示は異なります。一般的な処理方法として、ユーザーが文字を入力するたびに、入力ボックスに 1 秒間表示してから隠すという方法があります。

ユーザー入力に改行文字（U+000A）と復帰文字（U+000D）が含まれている場合、ブラウザはこれらの文字を自動的に除外します。

このタイプの属性は以下のとおりです。

maxlength：入力できる最大文字数。
minlength：入力できる最小文字数。
pattern：入力が一致する必要がある正規表現。
placeholder：入力が空の場合に表示されるテキスト。
readonly：ブール属性。入力ボックスを読み取り専用にするかどうか。
size：負でない整数。入力ボックスの表示幅を文字数で指定します。
autocomplete：オートコンプリートを許可するかどうか。 on（オートコンプリートを許可）、off（オートコンプリートを許可しない）、current-password（現在の Web サイトに保存されているパスワードを入力）、new-password（ランダムなパスワードを自動生成）を指定できます。
inputmode：ユーザーが入力できるデータ型。 none（システム入力メソッドを使用しない）、text（標準テキスト入力）、decimal（小数を含む数値）、numeric（数値 0〜9）などを指定できます。

（11）file

type="file" はファイル選択ボックスで、ユーザーが 1 つまたは複数のファイルを選択できます。ファイルアップロード機能によく使用されます。

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

このタイプには、以下の属性があります。

accept：選択できるファイルタイプ。カンマ区切りで指定します。MIME タイプ（例：image/jpeg）、拡張子（例：.doc）、audio/*（任意のオーディオファイル）、video/*（任意のビデオファイル）、image/*（任意の画像ファイル）などの表記を使用できます。
capture：画像またはビデオデータをキャプチャするためのソース。 user（ユーザー側のカメラまたはマイク）、environment（外部カメラまたはマイク）を指定できます。
multiple：ブール属性。ユーザーが複数のファイルを選択できるかどうか。

（12）hidden

type="hidden" はページに表示されないコントロールです。ユーザーはその値を入力できません。主にサーバーに非表示の情報を渡すために使用されます。たとえば、CSRF 攻撃ではフォームデータが偽造されます。このコントロールを使用すると、各フォームに一意の非表示番号を生成して、フォームの偽造送信を防ぐことができます。

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

上記のコードは、ページには表示されません。ユーザーがフォームを送信すると、ブラウザは prodId=xm234jq をサーバーに送信します。

（13）number

type="number" は数値入力ボックスで、数値のみを入力できます。ブラウザは通常、入力ボックスの右端に、クリック可能な上下矢印を表示します。上矢印をクリックすると数値が増加し、下矢印をクリックすると数値が減少します。

<input type="number" id="tentacles" name="tentacles"
       min="10" max="100">

上記のコードでは、数値入力ボックスに 10〜100 の数値を入力できます。

このタイプは、小数と整数の両方を含む、あらゆる数値を受け入れることができます。 step 属性を使用して、整数のみを受け入れるように制限できます。

このタイプの属性は以下のとおりです。

max：入力できる最大数値。
min：入力できる最小数値。
placeholder：ユーザー入力が空の場合に表示されるサンプル値。
readonly：ブール属性。コントロールを読み取り専用にするかどうか。
step：上下矢印をクリックしたときに、数値が変化する量。ユーザーが入力した値がステップ値の設定と一致しない場合、ブラウザは自動的に最も近い値に丸めます。デフォルトのステップ値は 1 です。初期の value 属性が 1.5 に設定されている場合、上矢印をクリックすると 2.5 になり、下矢印をクリックすると 0.5 になります。

（14）range

type="range" はスライダーです。ユーザーはスライダーをドラッグして、指定された範囲内の数値を選択します。ドラッグによって生成される値は正確ではないため、正確な数値が必要な場合は、このコントロールを使用しないことをお勧めします。一般的な例としては、音量調節があります。

<input type="range" id="start" name="volume"
         min="0" max="11">

上記のコードでは、最小値が 0、最大値が 11 のスライダー領域が生成されます。ユーザーはスライダーをドラッグして、目的の音量を選択します。

このタイプの属性は以下のとおりで、使い方は type="number" と同じです。

max：許可される最大値。デフォルトは 100 です。
min：許可される最小値。デフォルトは 0 です。
step：ステップ値。デフォルトは 1 です。

value 属性の初期値は、スライダーのデフォルト位置です。 value 属性を設定しない場合、スライダーはデフォルトで最大値と最小値の中間に配置されます。 max 属性、min 属性、value 属性のいずれも設定されていない場合、value 属性は 50 になります。

このタイプは、<datalist> タグと組み合わせて使用すると、スライダー領域に目盛りを付けることができます。

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>

上記のコードでは、0〜100 の間に 11 個の目盛りが生成されます。 0%、50%、100% の 3 つの位置にはテキストヒントが表示されますが、ブラウザによってはサポートされない場合があります。

ブラウザはすべて水平スライダーを生成します。垂直スライダーを生成する場合は、CSS を使用してスライダー領域の方向を変更できます。

（15）url type="url" は、Web サイトのアドレスのみを入力できるテキストボックスです。フォームを送信する前に、ブラウザはアドレスの形式が正しいかどうかを自動的にチェックします。正しくない場合は、送信できません。

<input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>

上記のコードの pattern 属性は、入力されたアドレスが HTTPS プロトコルを使用する必要があることを指定しています。

このタイプでは、プロトコルを含まないアドレスは無効です。たとえば、foo.com は無効ですが、http://foo.com は有効です。``` このタイプの関連属性は以下の通りです。

maxlength：許可される最大文字数。
minlength：許可される最小文字数。
pattern：入力内容が一致しなければならない正規表現。
placeholder：入力が空の場合に表示されるサンプルテキスト。
readonly：このコントロールの内容が読み取り専用かどうかを示すブール属性。
size：この入力ボックスに何文字分の幅を表示するかを示す、負でない整数。
spellcheck：スペルチェックを有効にするかどうか。有効な値は true（有効）と false（無効）。

このタイプは<datalist>タグと組み合わせて使用することで、ユーザーが選択できるドロップダウンリストを作成できます。ユーザーが入力していくと、表示範囲が絞り込まれ、一致する選択肢のみが表示されます。

<input id="myURL" name="myURL" type="url"
       list="defaultURLs">

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs">
  <option value="http://www.google.com/" label="Google">
  <option value="http://www.microsoft.com/" label="Microsoft">
  <option value="https://www.mozilla.org/" label="Mozilla">
  <option value="http://w3.org/" label="W3C">
</datalist>

上記のコードは、「クリック」というテキストのボタンを生成します。

（16）tel

type="tel"は電話番号のみ入力できる入力ボックスです。世界中で電話番号の形式が異なるため、ブラウザにはデフォルトの検証モードがなく、ほとんどの場合、カスタム検証が必要です。

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

<small>Format: 123-456-7890</small>

上記のコードは、10桁の電話番号のみ入力できる入力ボックスを定義しています。

このタイプの関連属性は以下の通りです。

maxlength：許可される最大文字数。
minlength：許可される最小文字数。
pattern：入力内容が一致しなければならない正規表現。
placeholder：入力が空の場合に表示されるサンプルテキスト。
readonly：このコントロールの内容が読み取り専用かどうかを示すブール属性。
size：この入力ボックスに何文字分の幅を表示するかを示す、負でない整数。

（17）color

type="color"は色を選択するためのコントロールで、その値はすべて#rrggbb形式です。

<input type="color" id="background" name="background"
           value="#e66465">

上記のコードは、Chromeブラウザでは#e66465のカラーブロックを表示します。カラーブロックをクリックすると、カラーピッカーが表示され、ユーザーは色を選択できます。

value属性の初期値を指定しない場合、デフォルト値は#000000（黒）です。

（18）date

type="date"は日付のみ入力できる入力ボックスで、ユーザーは年月日を入力できますが、時分秒は入力できません。入力形式はYYYY-MM-DDです。

<input type="date" id="start" name="start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

上記のコードは、デフォルトの日付が2018年7月22日の入力ボックスを表示します。ユーザーがクリックすると、日付選択が表示され、ユーザーは新しい日付を選択できます。

このタイプには、以下の関連属性があります。

max：許可される最も遅い日付。yyyy-MM-dd形式。
min：許可される最も早い日付。yyyy-MM-dd形式。
step：ステップ値。日単位の数値。

（19）time

type="time"は時間のみ入力できる入力ボックスで、時分秒を入力できますが、年月日は入力できません。日付形式は24時間制のhh:mmで、秒を含める場合はhh:mm:ssとなります。日付選択の形式はブラウザによって異なります。

<input type="time" id="appt" name="appt"
       min="9:00" max="18:00" required>

<small>営業時間午前9時から午後6時</small>

このタイプには、以下の関連属性があります。

max：許可される最も遅い時間。
min：許可される最も早い時間。
readonly：ユーザーが時間を編集できないかどうかを示すブール属性。
step：ステップ値。秒単位。

<input id="appt" type="time" name="appt" step="2">

上記のコードでは、コントロールを調整すると、時間の変更幅は2秒ごとになります。

（20）month

type="month"は年と月のみ入力できる入力ボックスで、形式はYYYY-MMです。

<input type="month" id="start" name="start"
       min="2018-03" value="2018-05">

このタイプには、以下の関連属性があります。

max：許可される最も遅い時間。yyyy-MM形式。
min：許可される最も早い時間。yyyy-MM形式。
readonly：ユーザーが時間を編集できないかどうかを示すブール属性。
step：ステップ値。月単位。

（21）week

type="week"は1年の何週目かを入力する入力ボックスです。形式はyyyy-Wwwで、例えば2018-W18は2018年の第18週目を表します。

<input type="week" name="week" id="camp-week"
       min="2018-W18" max="2018-W26" required>

このタイプには、以下の関連属性があります。

max：許可される最も遅い時間。yyyy-Www形式。
min：許可される最も早い時間。yyyy-Www形式。
readonly：ユーザーが時間を編集できないかどうかを示すブール属性。
step：ステップ値。週単位。

（22）datetime-local

type="datetime-local"は、ユーザーが年月日と時分を入力するための時間入力ボックスで、形式はyyyy-MM-ddThh:mmです。このコントロールは秒をサポートしていないことに注意してください。

<input type="datetime-local" id="meeting-time"
       name="meeting-time" value="2018-06-12T19:30"
       min="2018-06-07T00:00" max="2018-06-14T00:00">

このタイプには、以下の関連属性があります。

max：許可される最も遅い時間。yyyy-MM-ddThh:mm形式。
min：許可される最も早い時間。yyyy-MM-ddThh:mm形式。
step：ステップ値。秒単位。デフォルト値は60です。

`<button>`

<button>タグは、クリック可能なボタンを生成します。デフォルトの動作はなく、通常はtype属性またはスクリプトを使用してボタンの機能を指定する必要があります。

<button>クリック</button>

上記のコードは、「クリック」というテキストのボタンを生成します。

<button>内部にはテキストだけでなく、画像を配置することもでき、画像ボタンを作成できます。

<button name="search" type="submit">
  <img src="search.gif">検索
</button>

<button> には、以下の属性があります。

autofocus：ブール属性。ページの読み込み時に、このボタンにフォーカスを当てるかどうか。ページには、この属性を持つ要素を 1 つだけ配置できます。
disabled：ブール属性。ボタンを無効にするかどうか。ボタンが無効になると、グレー表示され、クリックできなくなります。
name：ボタンの名前（value 属性と組み合わせて使用）。 name=value の形式で、フォームと一緒にサーバーに送信されます。
value：ボタンの値（name 属性と組み合わせて使用）。 name=value の形式で、フォームと一緒にサーバーに送信されます。
type：ボタンのタイプ。 submit（クリックするとデータをサーバーに送信）、reset（すべてのコントロールの値を初期値にリセット）、button（デフォルトの動作なし。スクリプトでボタンの動作を指定）の 3 つの値を指定できます。
form：ボタンに関連付ける <form> フォームを指定します。 <form> の id 属性を値として指定します。この属性を省略した場合、ボタンが配置されている親フォームに関連付けられます。
formaction：データをサーバーに送信する URL。 <form> 要素の action 属性を上書きします。
formenctype：データをサーバーに送信するエンコード方法。 <form> 要素の enctype 属性を上書きします。 application/x-www-form-urlencoded（デフォルト値）、multipart/form-data（ファイルアップロードにのみ使用）、text/plain の 3 つの値を指定できます。
formmethod：データをサーバーに送信するために使用する HTTP メソッド。 <form> 要素の method 属性を上書きします。 post または get を指定できます。
formnovalidate：ブール属性。サーバーにデータを送信するときに、ローカル検証を無効にするかどうか。 <form> 要素の novalidate 属性を上書きします。
formtarget：サーバーにデータを送信した後、サーバーから返されたデータを表示するウィンドウ。 <form> 要素の target 属性を上書きします。 _self（現在のウィンドウ）、_blank（新しい空のウィンドウ）、_parent（親ウィンドウ）、_top（最上位ウィンドウ）を指定できます。

`<select>`

<select> タグは、ドロップダウンメニューを生成するために使用されます。

<label for="pet-select">ペット：</label>

<select id="pet-select" name="pet-select">
  <option value="">--選択してください--</option>
  <option value="dog">犬</option>
  <option value="cat">猫</option>
  <option value="others">その他</option>
</select>

上記のコードでは、<select> は「--選択してください--」というタイトルのドロップダウンメニューを生成します。右端に下向き矢印があります。下向き矢印をクリックすると、3 つのメニュー項目が表示され、ユーザーはクリックして選択できます。

ドロップダウンメニューのメニュー項目は、<option> タグで指定します。各 <option> は、選択可能な値を表します。選択された <option> の value 属性が、<select> コントロールからサーバーに送信される値になります。

<option> には、selected というブール属性があります。設定すると、その項目がデフォルトで選択されているメニュー項目になります。

<select name="choice">
  <option value="first">最初の値</option>
  <option value="second" selected>2 番目の値</option>
  <option value="third">3 番目の値</option>
</select>

上記のコードでは、2 番目の項目「2 番目の値」がデフォルトで選択されています。ページの読み込み時に、ドロップダウンメニューに直接表示されます。

<select> には、以下の属性があります。

autofocus：ブール属性。ページの読み込み時に、自動的にフォーカスを取得するかどうか。
disabled：ブール属性。現在のコントロールを無効にするかどうか。
form：関連するフォームの id 属性。
multiple：ブール属性。複数のメニュー項目を選択できるかどうか。デフォルトでは、1 つの項目しか選択できません。設定すると、ほとんどのブラウザはスクロール可能なリストボックスを表示します。ユーザーは、Shift キーまたは他のファンクションキーを押しながら、複数の項目を選択する必要がある場合があります。
name：コントロール名。
required：ブール属性。必須のコントロールかどうか。
size：multiple 属性が設定されている場合、ページに表示される際に一度に見える行数。他の行を表示するには、スクロールする必要があります。

`<option>` タグ、`<optgroup>` タグ

<option> タグは、<select>、<optgroup>、<datalist> 内で使用され、メニュー項目を表します。 <select> の例を参照してください。

<option> タグには、以下の属性があります。

disabled：ブール属性。この項目を無効にするかどうか。
label：この項目の説明。省略した場合、項目のテキストコンテンツと同じになります。
selected：ブール属性。デフォルト値かどうか。明らかに、メニューのグループでは、1 つのメニュー項目だけがこの属性を設定できます。
value：この項目をサーバーに送信する値。省略した場合、項目のテキストコンテンツと同じになります。

<optgroup> は、メニュー項目のグループを表します。通常は <select> 内で使用されます。

<label>ペット：
  <select name="pets" multiple size="4">
    <optgroup label="四つ足のペット">
      <option value="dog">犬</option>
      <option value="cat">猫</option>
    </optgroup>
    <optgroup label="鳥類">
      <option value="parrot">オウム</option>
      <option value="thrush">ツグミ</option>
    </optgroup>
  </select>
</label>

上記のコードでは、<select> はドロップダウンメニューで、<optgroup> を使用してメニュー項目を 2 つのグループに分割しています。各グループには独自のタイトルがあり、太字で表示されますが、ユーザーは選択できません。

<optgroup> タグの属性は以下のとおりです。

disabled：ブール属性。このグループを無効にするかどうか。設定すると、このグループのすべてのメニュー項目を選択できなくなります。
label：メニュー項目グループのタイトル。

`<datalist>`

<datalist> タグはコンテナタグで、指定されたコントロールに関連データのセットを提供するために使用されます。通常は、入力候補を生成するために使用されます。内部では <option> を使用して、各メニュー項目を生成します。

<label for="ice-cream-choice">アイスクリーム：</label>
<input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">

<datalist id="ice-cream-flavors">
  <option value="チョコレート">
  <option value="ココナッツ">
  <option value="ミント">
  <option value="ストロベリー">
  <option value="バニラ">
</datalist>

上記のコードでは、<input> はテキスト入力ボックスを生成し、ユーザーはテキストを入力できます。 <input> の list 属性は、関連する <datalist> の id 属性を指定します。 <datalist> のデータリストは入力候補に使用されます。ユーザーが入力ボックスをクリックすると、ドロップダウンメニューが表示され、候補の入力項目が表示されます。また、ユーザーが入力した文字と自動的に一致させて、選択可能な範囲を絞り込みます。たとえば、ユーザーが「バ」と入力すると、「バニラ」のみが表示されます。

<option> は、ここでは終了タグを必要としません。

<option> タグには、説明テキストとして label 属性を追加することもできます。Chrome ブラウザでは、value の次の行に表示されます。

<datalist id="ide">
  <option value="Brackets" label="by Adobe">
  <option value="Coda" label="by Panic">
</datalist>

上記のコードのレンダリング結果は、Chrome ブラウザでは、ドロップダウンリストに value 値（例：Brackets）が表示され、その下に label 値（例

`<textarea>`

<textarea> はブロックレベル要素で、複数行のテキストボックスを生成するために使用されます。

<textarea id="story" name="story"
          rows="5" cols="33">
これは長い物語です。
</textarea>

上記のコードは、5 行の長さで、33 文字の幅のテキストボックスを生成します。

このタグには、以下の属性があります。

autofocus：ブール属性。自動的にフォーカスを取得するかどうか。
cols：テキストボックスの幅を文字数で指定します。デフォルト値は 20 です。
dir：テキストの方向を設定します。デフォルトは左から右（dir="ltr"）です。右から左（dir="rtl"）に設定したり、ブラウザがユーザー入力に基づいて自動的に調整するように設定したりすることもできます（dir="auto"）。
disabled：ブール属性。コントロールを無効にするかどうか。
form：関連するフォームの id 属性。
maxlength：入力できる最大文字数。この値を指定しない場合、ユーザーは無制限の文字数を入力できます。
minlength：入力できる最小文字数。
name：コントロールの名前。
placeholder：入力が空の場合に表示されるヒントテキスト。
readonly：ブール属性。コントロールを読み取り専用にするかどうか。
required：ブール属性。コントロールを必須にするかどうか。
rows：テキストボックスの高さを行数で指定します。
spellcheck：ブラウザのスペルチェックを有効にするかどうか。 true（有効）、default（親要素または Web ページの設定によって決定）、false（無効）を指定できます。
wrap：入力されたテキストを自動的に改行するかどうか。 hard（ブラウザが自動的に改行文字 CR + LF を挿入して、各行がコントロールの幅を超えないようにする）、soft（入力内容が幅を超えたときに自動的に改行するが、新しい改行文字は追加せず、ブラウザはすべての改行文字が CR + LR であることを保証する。これがデフォルト値です）、off（自動改行を無効にする。1 行の長さが幅を超えると、水平スクロールバーが表示されます）を指定できます。

`<output>`

<output> タグはインライン要素で、ユーザー操作の結果を表示するために使用されます。

<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="result">20</output>

このタグには、以下の属性があります。

for：関連するコントロールの id 属性。そのコントロールの操作結果を表します。
form：関連するフォームの id 属性。
name：コントロールの名前。

`<progress>`

<progress> タグはインライン要素で、タスクの進捗状況を表します。ブラウザは通常、これをプログレスバーとして表示します。

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

このタグには、以下の属性があります。

max：プログレスバーの最大値。0 より大きい浮動小数点数である必要があります。デフォルト値は 1 です。
value：プログレスバーの現在の値。 0 と max 属性の間の有効な浮動小数点数である必要があります。 max 属性を省略した場合、この値は 0 と 1 の間である必要があります。 value 属性を省略した場合、プログレスバーはスクロールして、進行中であることを示しますが、完了した進捗状況はわかりません。

`<meter>`

<meter> タグはインライン要素で、既知の範囲内の値を表示するインジケーターを表します。タスクの現在の進捗状況、ディスクの使用済み容量、充電量など、比率を表す場合に適しています。ブラウザは通常、これをスクロールしないインジケーターバーとして表示します。

<p>オーブンの現在の温度は<meter min="200" max="500"
  value="350"> 350 度</meter>です。</p>

上記のコードは、左端が 200、右端が 500 を表し、現在の位置が 350 であるインジケーターバーを表示します。

<meter> 要素の子要素は、通常は表示されません。ブラウザが <meter> をサポートしていない場合にのみ表示されます。

このタグには、以下の属性があります。

min：範囲の下限。 max 属性よりも小さい必要があります。省略した場合、デフォルトは 0 です。
max：範囲の上限。 min 属性よりも大きい必要があります。省略した場合、デフォルトは 1 です。
value：現在の値。 min 属性と max 属性の間である必要があります。省略した場合、デフォルトは 0 です。
low：「低」の上限しきい値。 min 属性よりも大きく、high 属性と max 属性よりも小さい必要があります。省略した場合、min 属性と同じになります。
high：「高」の下限しきい値。 max 属性よりも小さく、low 属性と min 属性よりも大きい必要があります。省略した場合、max 属性と同じになります。
optimum：最適値を指定します。 min 属性と max 属性の間である必要があります。 low 属性と high 属性と一緒に使用して、最適な範囲を表す必要があります。 optimum が low 属性よりも小さい場合、「低」が最適な範囲であることを示します。 high 属性よりも大きい場合、「高」が最適な範囲であることを示します。 low と high の間にある場合、「中間」が最適な範囲であることを示します。省略した場合、min と max の中間値になります。
form：関連するフォームの id 属性。

Chrome ブラウザは、3 つの色を使用して、インジケーターバーの位置を表します。良好な場合は、現在の位置が緑色で表示されます。一般的な場合は、現在の位置が黄色で表示されます。悪い場合は、現在の位置が赤色で表示されます。

<meter id="fuel" name="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

上記のコードでは、インジケーターバーは 3 つのセクションに分けることができます：0〜32、33〜65、66〜100。 optimum 属性は 80 なので、66〜100 が良好な状態、33〜65 が一般的な状態、0〜32 が悪い状態です。したがって、ブラウザは value 属性に基づいて、現在の位置を異なる色で表示します。 33 より小さい場合は赤色、65 より大きい場合は緑色、その間は黄色で表示されます。

参考リンク

HTML Interactive Form Validation, by Chris Dumez

フォーム

<form>

概要

enctype 属性

<fieldset>，<legend>

<label>

<input>

概要

タイプ

<button>

<select>

<option> タグ、<optgroup> タグ

<datalist>

<textarea>

<output>

<progress>

<meter>

参考リンク

`<form>`

`<fieldset>`，`<legend>`

`<label>`

`<input>`

`<button>`

`<select>`

`<option>` タグ、`<optgroup>` タグ

`<datalist>`

`<textarea>`

`<output>`

`<progress>`

`<meter>`