<form>【フォーム (User-submittable form)】
概要
メモ
- フォームの定義
- 送信対象
- ドキュメント内に複数定義可能 (入れ子は不可)
- コントロール:関連要素 参照
- ファイルアップロード:下記指定
- method属性:"post"
- enctype属性:="multipart/form-data"
- <input>【汎用入力コントロール】のtype属性="file"でアップロードファイル選択
例
関連要素
外部リンク
- HTML Living Standard (英語)
- W3C HTML 5.2 (英語)
- W3C HTML 5.1 2nd Edition (英語)
- W3C HTML5 (英語)
構文
<form | 必須 | 開始タグ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
accept=【サーバ処理MIMEタイプ (複数:カンマ区切り)】 | サーバ処理MIMEタイプ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
accep-charset=【文字エンコーディング (複数:半角スペース区切り)】 | 送信時に使用可能な文字エンコーディング | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
action=【処理プログラムのURI】 | 処理プログラムのURI (子要素のformaction属性で上書き) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
autocomplete=on | off | 入力自動補完の有無 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enctype="application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | 送信時の文字エンコーディング (子要素のformenctype属性で上書き) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
method=get | post (大文字小文字区別なし) | HTTPメソッド (子要素のformmethod属性で上書き) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
name=【フォーム名】 | フォーム名 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
novalidate | 妥当性チェック無し (子要素のformnovalidate属性で上書き) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
rel=【リンク先の関係 (複数:半角スペース区切り)】 | リンク先の関係 (大文字・小文字の区別なし)
※ <body>内の指定可
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
target=【フレーム名】 | 【ウィンドウ名】 | _blank | _self | _parent | _top | 表示先 (フレーム名・ウィンドウ名 以外に下記指定可) (子要素のformtarget属性で上書き)
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
【グローバル属性】 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
accesskey=【アクセスキー (複数:半角スペース区切り )】 | アクセスキー | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
autocapitalize=【変換方法】 | 自動大文字化
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
autofocus | ページロード時、自動フォーカス ※:<button>【ボタン】・<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】・<select>【選択リスト】はW3C定義の同名個別属性も参照 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
class=【クラス名 (複数:半角スペース区切り)】 | 所属クラス (複数指定:<style>【スタイル情報】)・外部スタイルシートで後の定義が優先 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ] | 編集可否 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
contextmenu=<menu>【メニュー】 のid | コンテキストメニューのid | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
data-*=【カスタムデータ】 | カスタムデータ属性 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dir=ltr (左から右) | rtl (右から左) | auto (自動) | 文字表記方向 (ltr:left to right text or table / rtl:right to left text or table) ※<bdo>【テキスト方向形式】の場合、ltr または rtlが必須 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定) | ドラッグ可否 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク) | ドロップデータの扱い | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enterkeyhint=【ヒント】 | [Enter]キーのアクション ヒント (対応するラベル・アイコン等を表示)
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
id=【id】 | id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む) スペース文字 (SP:U+0020・tab:U+0009・LF:U+000A・FF:U+000C・CR:U+000D) 以外の全ての文字が使用可能 (大文字小文字の区別あり) (<a>【ハイパーリンク】のリンク先・CSS対象(#~)・スクリプト参照) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
inputmode=【入力モード】 | 入力モード (参照:CSS ime-mode【IMEモード】) ※:<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】はW3C定義の同名個別属性も参照
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
is=【定義名】 | 定義名 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemid=【URL】 | アイテムのグローバル識別子 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemprop=【アイテムのプロパティ (複数:半角スペース区切り)】 | アイテムのプロパティ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemref=【要素IDのリスト】 | アイテムの参照リスト | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemscope | アイテムのプロパティ宣言 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemtype=【アイテムの型 (複数:半角スペース区切り)】 | アイテムの型 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
lang=【言語コード】 | 言語コード (【主コード】-【副コード】 例:"ja":日本語 / "en":英語 / "en-US":アメリカ英語) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
nonce=【ワンタイム トークン (文字列)】 | CSP(コンテンツ セキュリティ ポリシー)のチェックで使用されるワンタイム トークン(nonce:number used once) ※:<link>【メタデータリンク】・<script>【スクリプト】・<style>【スタイル情報】はW3C定義の同名個別属性も参照 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
slot=【スロット名】 | スロット (<slot>【スロット】の name属性に対応) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
spellcheck=true | false | スペルチェック有無 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
style=【スタイルシート (複数:セミコロン区切り / 最後のセミコロンは省略可)】 | スタイル | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tabindex=【タブインデックス番号】 | タブインデックス | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
title=【説明文】 | 説明 (多くはツールチップ表示) ※<link>【メタデータリンク】:メタデータリンクのタイトル ※<style>【スタイル情報】:スタイルシート名 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外) | 翻訳可否 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
【フォーム内容】 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</form> | 必須 | 終了タグ |
DOMインタフェース (HTMLFormElement : HTMLElement)
interface HTMLFormElement : HTMLElement | |||
interface HTMLElement : Element | |||
interface Element : Node | |||
HTMLFormElement | |||
DOMString | acceptCharset | 文字エンコーディング | |
USVString | action | 処理プログラムのURI | |
DOMString | autocomplete | 入力自動補完の有無 | |
HTMLFormControlsCollection | elements | 所属エレメント コレクション | |
DOMString | encoding | 送信時の文字エンコーディング (enctypeと同義) | |
DOMString | enctype | 送信時の文字エンコーディング (encodingと同義) | |
long | length | コントロール数 | |
DOMString | method | HTTPメソッド | |
DOMString | name | フォーム名 | |
boolean | noValidate | 妥当性チェック無し | |
DOMString | rel | リンク先の関係 | |
DOMTokenList | relList | リンク先の関係 リスト | |
DOMString | target | 表示先 | |
boolean checkValidity() | 妥当性チェック | ||
getter Element (unsigned long index) | 定義順によるエレメント取得 (例:form[0]) | ||
getter (RadioNodeList or Element) (DOMString name) | 名前(またはid)によるエレメント取得 (例:form["input1"]) | ||
boolean reportValidity() | 妥当性レポート | ||
undefined requestSubmit(optional HTMLElement? submitter = null) | |||
undefined reset() | リセット | ||
undefined submit() | 送信 | ||
HTMLElement | |||
DOMString | accessKey | アクセスキー | |
DOMString | autocapitalize | 自動大文字化 | |
DOMString | accessKeyLabel | アクセスキー表現文字列 | |
DOMString | contentEditable | 編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承) ( ElementContentEditable に移動 ) | |
DOMStringMap | dataset | カスタムデータ属性 (data-*) マップ ( HTMLOrSVGElement に移動 ) | |
DOMString | dir | 文字表記方向 ("ltr":左から右 / "rtl":右から左) | |
boolean | draggable | ドラッグ可否 | |
[PutForwards=value] | DOMTokenList | dropzone | ドロップデータの扱い |
boolean | hidden | 非表示状態 | |
[LegacyNullToEmptyString] | DOMString | innerText | 要素内容 (テキスト形式) |
boolean | isContentEditable | 編集可否 ( ElementContentEditable に移動 ) | |
DOMString | lang | 言語コード | |
[LegacyNullToEmptyString] | DOMString | outerText | タグを含む要素内容 (テキスト形式) |
boolean | spellcheck | スペルチェック有無 | |
long | tabIndex | タブインデックス ( HTMLOrSVGElement に移動 ) | |
DOMString | title | 説明 | |
boolean | translate | 翻訳可否 | |
ElementInternals attachInternals() | |||
undefined blur() | フォーカス喪失 操作 ( HTMLOrSVGElement に移動 ) | ||
undefined click() | クリック 操作 | ||
undefined focus() | フォーカス設定 操作 ( HTMLOrSVGElement に移動 ) | ||
undefined forceSpellCheck() | スペルチェック | ||
ElementContentEditable | |||
DOMString | contentEditable | 編集可能状態 | |
DOMString | enterKeyHint | [Enter]キーのアクション ヒント | |
DOMString | inputMode | 入力モード | |
boolean | isContentEditable | 編集可否 | |
HTMLOrSVGElement | |||
boolean | autofocus | ページロード時、自動フォーカス | |
DOMStringMap | dataset | カスタムデータ属性 (data-*) マップ | |
DOMString | nonce | ワンタイム トークン | |
long | tabIndex | タブインデックス | |
undefined focus(optional FocusOptions options = {}) | フォーカス設定 操作 | ||
undefined blur() | フォーカス喪失 操作 | ||
GlobalEventHandlers | |||
EventHandler | on~ | 各種イベントハンドラ (onclick・onfocus 等) | |
DocumentAndElementEventHandlers | |||
EventHandler | oncopy | コピー イベントハンドラ | |
EventHandler | oncut | カット イベントハンドラ | |
EventHandler | onpaste | ペースト イベントハンドラ | |
ElementCSSInlineStyle【CSSOM定義】 | |||
CSSStyleDeclaration | style | スタイル | |
CSSStyleDeclaration | |||
DOMString | style.~ | スタイル属性 (CSS2Properties) (例:style.color・style.backgroundColor) | |
Element | |||
[SameObject] | NamedNodeMap | attributes | 関連属性 マップ |
[SameObject] | DOMTokenList | classList | クラス名 リスト |
DOMString | className | クラス名 | |
DOMString | id | id (ページ内で一意:name【コントロール(送信)名】を含む) | |
(DOMString | innerHTML) | 要素内容 (HTML形式)〔 DOM Parsing and Serialization 定義 〕 | |
DOMString | localName | ローカル名 | |
DOMString? | namespaceURI | ネームスペースURI | |
(DOMString | outerHTML) | タグを含む要素内容 (HTML形式)〔 DOM Parsing and Serialization 定義 〕 | |
DOMString? | prefix | プレフィックス | |
DOMString | tagName | タグ名 | |
ShadowRoot attachShadow(ShadowRootInit init) | |||
Element? closest(DOMString selectors) | |||
DOMString? getAttribute(DOMString qualifiedName) | 属性取得 | ||
DOMString? getAttributeNS(DOMString? namespace, DOMString localName) | 属性取得 (ネームスペース指定) | ||
sequence<DOMString> getAttributeNames() | |||
Attr? getAttributeNode(DOMString qualifiedName) | |||
Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName) | |||
HTMLCollection getElementsByClassName(DOMString classNames) | エレメント コレクション取得 (クラス名指定) | ||
HTMLCollection getElementsByTagName(DOMString qualifiedName) | エレメント コレクション取得 (タグ名指定) | ||
HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName) | エレメント コレクション取得 (ネームスペース・タグ名指定) | ||
boolean hasAttribute(DOMString qualifiedName) | 属性チェック | ||
boolean hasAttributeNS(DOMString? namespace, DOMString localName) | 属性チェック (ネームスペース指定) | ||
boolean hasAttributes() | |||
Element? insertAdjacentElement(DOMString where, Element element) | |||
undefined insertAdjacentText(DOMString where, DOMString data) | |||
boolean matches(DOMString selectors) | |||
undefined removeAttribute(DOMString qualifiedName) | 属性削除 | ||
undefined removeAttributeNS(DOMString? namespace, DOMString localName) | 属性削除 (ネームスペース指定) | ||
Attr removeAttributeNode(Attr attr) | |||
undefined setAttribute(DOMString qualifiedName, DOMString value) | 属性設定 | ||
undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value) | 属性設定 (ネームスペース指定) | ||
Attr? setAttributeNode(Attr attr) | |||
Attr? setAttributeNodeNS(Attr attr) | |||
boolean toggleAttribute(DOMString qualifiedName, optional boolean force) | |||
boolean webkitMatchesSelector(DOMString selectors) | matches のエイリアス | ||
ParentNode | |||
unsigned long | childElementCount | 子エレメントの数 | |
[SameObject] | HTMLCollection | children | 子エレメント コレクション |
Element? | firstElementChild | 最初の子エレメント | |
Element? | lastElementChild | 最後の子エレメント | |
undefined append((Node or DOMString)... nodes) | |||
undefined prepend((Node or DOMString)... nodes) | |||
Element? querySelector(DOMString selectors) | 指定セレクタ先頭エレメント取得 | ||
[NewObject] NodeList querySelectorAll(DOMString selectors) | 指定セレクタ ノードリスト取得 | ||
ChildNode | |||
undefined after((Node or DOMString)... nodes) | |||
undefined before((Node or DOMString)... nodes) | |||
undefined remove() | 削除 | ||
undefined replaceWith((Node or DOMString)... nodes) | |||
NonDocumentTypeChildNode | |||
Element? | previousElementSibling | 前の兄弟エレメント | |
Element? | nextElementSibling | 次の兄弟エレメント | |
Slottable | |||
HTMLSlotElement? | assignedSlot | ||
Node | |||
USVString | baseURI | ベースURI | |
[SameObject] | NodeList | childNodes | 子ノード リスト |
Node? | firstChild | 先頭子ノード | |
boolean | isConnected | ||
Node? | lastChild | 最終子ノード | |
Node? | nextSibling | 次の兄弟ノード | |
DOMString | nodeName | ノード名 | |
unsigned short | nodeType | ノードタイプ (ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE) | |
DOMString? | nodeValue | ノード値 | |
Document? | ownerDocument | オーナードキュメント | |
Element? | parentElement | 親エレメント | |
Node? | parentNode | 親ノード | |
Node? | previousSibling | 前の兄弟ノード | |
DOMString? | textContent (IE:innerText) | 内容 (Text形式) (参照:Element.innerHTML・Element.outerHTML) 取得:要素内のHTMLタグを除外しテキストのみ 設定:HTMLタグはテキスト変換 | |
Node appendChild(Node node) | 子ノード追加 | ||
[NewObject] Node cloneNode(optional boolean deep = false) | クローンノード作成 | ||
unsigned short compareDocumentPosition(Node other) | 他ノードとの位置比較 (DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) | ||
boolean contains(Node? other) | 指定子孫ノードの存在有無 | ||
Node getRootNode(optional GetRootNodeOptions options = {}) | |||
boolean hasChildNodes() | 子ノードの存在有無 | ||
Node insertBefore(Node node, Node? child) | 指定ノード前挿入 | ||
boolean isDefaultNamespace(DOMString? namespace) | デフォルトネームスペース チェック | ||
boolean isEqualNode(Node? node) | 同一ノードチェック | ||
boolean isSameNode(Node? otherNode) | |||
DOMString? lookupNamespaceURI(DOMString? prefix) | ネームスペースURI調査 | ||
DOMString? lookupPrefix(DOMString? namespace) | ネームスペース プレフィックス調査 | ||
undefined normalize() | 標準化 | ||
Node removeChild(Node child) | 子ノード削除 | ||
Node replaceChild(Node node, Node child) | 子ノード置換 | ||
EventTarget | |||
undefined addEventListener(DOMString type, EventListener? callback, optional (AddEventListenerOptions or boolean) options = {}) | |||
boolean dispatchEvent(Event event) | |||
undefined removeEventListener(DOMString type, EventListener? callback, optional (EventListenerOptions or boolean) options = {}) |