<form>【フォーム (User-submittable form)】
概要 構文 DOMインタフェース
概要
メモ
- フォームの定義
- 送信対象
- ドキュメント内に複数定義可能 (入れ子は不可)
- コントロール：関連要素 参照
- ファイルアップロード：下記指定
- method属性："post"
- enctype属性：="multipart/form-data"
- <input>【汎用入力コントロール】のtype属性="file"でアップロードファイル選択
例
<form method="post" style="border:2px black dashed;">
<p><label>ユーザ名 <input type="text" name="username"></label></p>
<p><label>パスワード<input type="password" name="password"></label></p>
<p><input type="submit" value="ログイン"></p>
</form>
関連要素
外部リンク
- WHATWG HTML (英語)
- 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属性で上書き) | |||||||||
| target=【フレーム名】 | 【ウィンドウ名】 | _blank | _self | _parent | _top | 表示先 (フレーム名・ウィンドウ名 以外に下記指定可) (子要素のformtarget属性で上書き)
| |||||||||
【グローバル属性】 | ||||||||||
| accesskey=【アクセスキー (複数：半角スペース区切り)】 | アクセスキー | |||||||||
| 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 (ドロップデータのリンク) | ドロップデータの扱い | |||||||||
| id=【id】 | id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む) (<a>【ハイパーリンク】のリンク先・CSS対象(#～)・スクリプト参照) | |||||||||
| is=【定義名】 | 定義名 | |||||||||
| itemid=【URL】 | アイテムのグローバル識別子 | |||||||||
| itemprop=【アイテムのプロパティ (複数：半角スペース区切り)】 | アイテムのプロパティ | |||||||||
| itemref=【要素IDのリスト】 | アイテムの参照リスト | |||||||||
| itemscope | アイテムのプロパティ宣言 | |||||||||
| itemtype=【アイテムの型 (複数：半角スペース区切り)】 | アイテムの型 | |||||||||
| lang=【言語コード】 | 言語コード (【主コード】-【副コード】 例："ja"：日本語 / "en"：英語 / "en-US"：アメリカ英語) | |||||||||
| slot=<slot>【スロット】のname属性 | スロット名 | |||||||||
| spellcheck=true | false | スペルチェック有無 | |||||||||
| style=【スタイルシート (複数：セミコロン区切り / 最後のセミコロンは省略可)】 | スタイル | |||||||||
| tabindex=【タブインデックス番号】 | タブインデックス | |||||||||
| title=【説明文】 | 説明 (多くはツールチップ表示) ※<link>【メタデータリンク】：メタデータリンクのタイトル ※<style>【スタイル情報】：スタイルシート名 | |||||||||
| translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外) | 翻訳可否 | |||||||||
| > | ||||||||||
【フォーム内容】 | ||||||||||
| </form> | 必須 | 終了タグ | ||||||||
DOMインタフェース (HTMLFormElement・HTMLElement)
| interface HTMLFormElement : HTMLElement { | W3C：interface HTMLFormElement (英語) | ||
【プロパティ】 | |||
【HTMLFormElement プロパティ】 | |||
| acceptCharset; | 文字エンコーディング | ||
| action; | 処理プログラムのURI | ||
| autocomplete; | 入力自動補完の有無 | ||
| attribute HTMLFormControlsCollection | elements; | 所属エレメント コレクション | |
| encoding; | 送信時の文字エンコーディング (enctypeと同義) | ||
| enctype; | 送信時の文字エンコーディング (encodingと同義) | ||
| attribute long | length; | コントロール数 | |
| method; | HTTPメソッド | ||
| name; | フォーム名 | ||
| noValidate; | 妥当性チェック無し | ||
| target; | 表示先 | ||
【HTMLElement プロパティ】 | |||
| accessKey; | アクセスキー | ||
| accessKeyLabel; | アクセスキー表現文字列 | ||
| contentEditable; | 編集可能状態 ("true"：編集可能 / "false"：編集不可 / "inherit"：親要素継承) | ||
| Map | dataset; | カスタムデータ属性 (data-*) マップ | |
| dir; | 文字表記方向 ("ltr"：左から右 / "rtl"：右から左) | ||
| draggable; | ドラッグ可否 | ||
| [PutForwards=value] | attribute DOMTokenList | dropzone; | ドロップデータの扱い |
| hidden; | 非表示状態 | ||
| [TreatNullAs=EmptyString] | innerText; | 内容 (テキスト形式) | |
| isContentEditable; | 編集可否 | ||
| lang; | 言語コード | ||
| spellcheck; | スペルチェック有無 | ||
| attribute long | tabIndex; | タブインデックス | |
| title; | 説明 | ||
| translate; | 翻訳可否 | ||
【ElementCSSInlineStyle プロパティ】 | |||
| attribute CSSStyleDeclaration | style; | スタイル | |
【CSSStyleDeclaration プロパティ】 (仕様上、次と同等： CSSStyleDeclaration implements CSS2Properties) | |||
| style.～; | スタイル属性 (例：style.color・style.backgroundColor) | ||
【Element プロパティ】 | |||
| [SameObject] | attribute NamedNodeMap | attributes; | 関連属性 マップ |
| [SameObject] | attribute DOMTokenList | classList; | クラス名 リスト |
| className; | クラス名 | ||
| id; | id (ページ内で一意：name【コントロール(送信)名】を含む) | ||
| ( | innerHTML;) | 内容 (HTML形式) W3C：未定義 (参照：Element.outerHTML・Node.textContent (innerText)) | |
| localName; | ローカル名 | ||
| ? | namespaceURI; | ネームスペースURI | |
| ( | outerHTML;) | タグを含む内容 (HTML形式) W3C：未定義 (参照：Element.innerHTML・Node.textContent (innerText)) | |
| ? | prefix; | プリフィックス | |
| tagName; | タグ名 | ||
【Node プロパティ】 | |||
| ? | baseURI; | ベースURI | |
| [SameObject] | childNodes; | 子ノード リスト | |
| ? | firstChild; | 先頭子ノード | |
| ? | lastChild; | 最終子ノード | |
| ? | nextSibling; | 次の兄弟ノード | |
| nodeName; | ノード名 | ||
| attribute 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) | |
| ? | nodeValue; | ノード値 | |
| ? | ownerDocument; | オーナードキュメント | |
| ? | parentElement; | 親エレメント | |
| ? | parentNode; | 親ノード | |
| ? | previousSibling; | 前の兄弟ノード | |
| ? | textContent; (IE：innerText) | 内容 (Text形式) (参照：Element.innerHTML・Element.outerHTML) 取得：要素内のHTMLタグを除外しテキストのみ 設定：HTMLタグはテキスト変換 | |
【GlobalEventHandlers プロパティ (一部) 】 | |||
| attribute EventHandler onabort; | on～; | イベントハンドラ (例：onclick・onfocus) | |
【ParentNode プロパティ】 | |||
| attribute unsigned long | childElementCount; | 子エレメントの数 | |
| [SameObject] | attribute HTMLCollection | children; | 子エレメント コレクション |
| ? | firstElementChild; | 最初の子エレメント | |
| ? | lastElementChild; | 最後の子エレメント | |
【NonDocumentTypeChildNode プロパティ】 | |||
| ? | previousElementSibling; | 前の兄弟エレメント | |
| ? | nextElementSibling; | 次の兄弟エレメント | |
【メソッド】 | |||
【HTMLFormElement メソッド】 | |||
| boolean checkValidity(); | 妥当性チェック | ||
| getter Element (unsigned long index); | 定義順によるエレメント取得 (例：form[0]) | ||
| getter (RadioNodeList or Element) ( name); | 名前(またはid)によるエレメント取得 (例：form["input1"]) | ||
| void reset(); | リセット | ||
| void submit(); | 送信 | ||
【HTMLElement メソッド】 | |||
| void click(); | クリック 操作 | ||
| void focus(); | フォーカス設定 操作 | ||
| void forceSpellCheck(); | スペルチェック | ||
| void blur(); | フォーカス喪失 操作 | ||
【Element メソッド】 | |||
| ? getAttribute( name); | 属性取得 | ||
| ? getAttributeNS(? namespace, localName); | 属性取得 (ネームスペース指定) | ||
| HTMLCollection getElementsByClassName( classNames); | エレメント コレクション取得 (クラス名指定) | ||
| HTMLCollection getElementsByTagName( localName); | エレメント コレクション取得 (タグ名指定) | ||
| HTMLCollection getElementsByTagNameNS(? namespace, localName); | エレメント コレクション取得 (ネームスペース・タグ名指定) | ||
| boolean hasAttribute( name); | 属性チェック | ||
| boolean hasAttributeNS(? namespace, localName); | 属性チェック (ネームスペース指定) | ||
| void removeAttribute( name); | 属性削除 | ||
| void removeAttributeNS(? namespace, localName); | 属性削除 (ネームスペース指定) | ||
| void setAttribute( name, value); | 属性設定 | ||
| void setAttributeNS(? namespace, name, value); | 属性設定 (ネームスペース指定) | ||
【Node メソッド】 | |||
| 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); | 指定子孫ノードの存在有無 | ||
| boolean hasChildNodes(); | 子ノードの存在有無 | ||
| Node insertBefore(Node node, Node? child); | 指定ノード前挿入 | ||
| boolean isDefaultNamespace(? namespace); | デフォルトネームスペース チェック | ||
| boolean isEqualNode(Node? node); | 同一ノードチェック | ||
| ? lookupNamespaceURI(? prefix); | ネームスペースURI調査 | ||
| ? lookupPrefix(? namespace); | ネームスペース プリフィックス調査 | ||
| void normalize(); | 標準化 | ||
| Node removeChild(Node child); | 子ノード削除 | ||
| Node replaceChild(Node node, Node child); | 子ノード置換 | ||
【ParentNode メソッド】 | |||
| Element? querySelector( selectors); | 指定セレクタ先頭エレメント取得 | ||
| [NewObject] NodeList querySelectorAll( selectors); | 指定セレクタ ノードリスト取得 | ||
【ChildNode メソッド】 | |||
| void remove(); | 削除 | ||
| }; | |||