form : フォームコンテナ

カテゴリ

デモ

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
 <p><button>Submit order</button></p>
</form>
↑この領域は編集できます(シンタックスハイライトは同期しません)。

説明

フォーム部品の集合。 主にこの要素で、どういう方法で(method属性)、どういうデータ形式で(enctype属性)、どこにデータを送るか(action属性)を指定する。

HTML5ではform属性で外から紐づけできる要素があるので、必ずしもこの要素内にフォーム部品があるとは限らない。

また、HTML5ではサブミットする要素側でformaction/formmethod属性等で送信先やメソッド等を上書きする事ができるようになったので、JavaScriptで押すボタンによってそれらを書き換える小細工が不要になった。

更にありがたい事に、HTML5では値のパターンの指定や閾値を指定する事ができるようになり、 それらをいい感じに検証してくれるようになったので、 JavaScriptで色々値がおかしくないか検証するプログラムを書くコストが浮く。やったね。

フォームについては、XSSとか、CSRFとか、HTTPSとか、セキュリティに関して考える事が結構たくさんあるので、色々調べて勉強しよう。

属性 属性値の見方

accept-charset  変更[エンコード]( [エンコード])*edgeie
送信する際に利用できる文字コードを列挙。無い場合は文書の文字コード、それも無い場合はUTF-8になる。

HTML4ではスペース区切り以外でもカンマ区切りが可能だったが、HTML5でカンマ区切りは不可になった。

action  変更[URL]
フォームデータの送信先。HTML5では、method=dialogの登場や各送信パーツでのformaction属性の登場で必須ではなくなった。提出可能なフォーム部品にformaction属性の指定があった場合、提出時に上書きされる。
autocomplete  newon|offchromeandroid
フォーム内のオートコンプリートの有効/無効。デフォルトon
enctype  変更[列挙型]chromeopera
フォームデータの送信時エンコード種別。application/x-www-form-urlencodedmultipart/form-datatext/plain。デフォルトはapplication/x-www-form-urlencodedinput type=fileを利用してファイルをアップロードする場合はmultipart/form-dataを指定する。HTML5でtext/plainが追加された。提出可能なフォーム部品にformenctype属性の指定があった場合、提出時に上書きされる。
method  変更get|post|dialogfirefoxedgeiesafariios
HTTPメソッドを指定。初期値はget。HTML5でdialogが追加された。これはサブミット時にフォームが含まれているdialogを閉じる事を意味する。提出可能なフォーム部品にformmethod属性の指定があった場合、提出時に上書きされる。
name[文字列]
フォーム名。空欄以外の文字列なら何でも良い。
novalidate  new(真偽値)
指定するとフォーム値を検証しない。つまり指定しない場合は検証されるが、開発者ツールを用いる等して検証をスルーする事ができるので、サーバー側で検証しなくて良いとはならないので注意。提出可能なフォーム部品にformnovalidate属性の指定があった場合、提出時に上書きされる。
target[ウィンドウ名]
送信結果を開くウィンドウを指定。提出可能なフォーム部品にformtarget属性の指定があった場合、提出時に上書きされる。
accept
代わりにinputのaccept属性を使用