メインコンテンツへスキップ

input要素

1.仕様

INPUT要素は、
型指定された
データフィールドを表し、
通常はユーザーがデータを
編集できるようにする
フォームコントロールを
備えています。

input

型付きデータフィールド (Typed data fields)

種類
空要素

任意のコンテンツを持つことができない要素です。

カテゴリ
  • フローコンテンツ
  • フレージングコンテンツ
  • インタラクティブコンテンツ(条件付き)
  • リストされた要素
  • ラベル付け可能な要素(条件付き)
  • 送信可能な要素
  • リセット可能な要素
  • 自動大文字化継承要素
  • フォーム関連要素
  • パルパブルコンテンツ(条件付き)

type属性が Hidden状態でない場合は、インタラクティブコンテンツ, リストされた要素, ラベル付け可能な要素, 送信可能な要素, リセット可能な要素, 自動大文字化継承要素, フォーム関連要素, パルパブルコンテンツ。

type属性が Hidden状態の場合は、 リストされた要素, 送信可能な要素, リセット可能な要素, 自動大文字化継承要素, フォーム関連要素。

使用できるコンテキスト
フレージングコンテンツを受け入れる要素

フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。

フレージングコンテンツを受け入れる要素は、h1要素, h2要素, h3要素, h4要素, h5要素, h6要素, p要素, pre要素, output要素, progress要素, meter要素, label要素, datalist要素, body要素, section要素, nav要素, aside要素, article要素, header要素, footer要素, main要素, address要素, li要素, dt要素, dd要素, caption要素, th要素, td要素, form要素, fieldset要素, search要素, blockquote要素, figure要素, figcaption要素, div要素, dialog要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素 です。

コンテンツモデル
何もない

要素のコンテンツモデルが「何もない」の場合、要素にはテキストノード (要素間の空白以外) と要素ノードが含まれていてはなりません。

タグの省略

終了タグはありません。

コンテンツ属性
グローバル属性 他
accept属性
ファイルアップロードコントロールで予期されるファイルタイプのヒント
alt属性
画像が利用できない場合に使用する置換テキスト
autocomplete属性
フォーム自動入力機能のヒント
checked属性
コントロールがチェックされているかどうか
dirname属性
フォーム送信時に要素の方向性を送信するために使用するフォームコントロールの名前
disabled属性
フォームコントロールが無効かどうか
form属性
要素をフォーム要素に関連付けます
formaction属性
フォーム送信に使用するURL
formenctype属性
フォーム送信に使用するエントリリストのエンコードタイプ
formmethod属性
フォーム送信に使用するHTTPメソッド
formnovalidate属性
フォーム送信時のフォームコントロールの検証をバイパスする
formtarget属性
フォーム送信にナビゲート可能
height属性
縦寸法
list属性
オートコンプリートオプションのリスト
max属性
最大値
maxlength属性
値の最大長
min属性
最小値
minlength属性
値の最小長
multiple属性
複数の値を許可するかどうか
name属性
フォーム送信および form.elements API で使用する要素の名前
pattern属性
フォームコントロールの値と一致するパターン
placeholder属性
フォームコントロール内に配置されるユーザーに見えるラベル
popovertarget属性
ポップオーバー要素を切り替え、表示、または非表示にする対象とします。
popovertargetaction属性
ターゲットのポップオーバー要素を切り替えるか、表示するか、非表示にするかを示します。
readonly属性
ユーザーによる値の編集を許可するかどうか
required属性
フォーム送信にコントロールが必要かどうか
size属性
コントロールのサイズ
src属性
リソースのアドレス
step属性
フォームコントロールの値と一致する粒度
type属性
フォームコントロールの種類
value属性
フォームコントロールの値
width属性
水平寸法
title属性
この要素に特別なセマンティクスで、パターンの説明 (パターン属性とともに使用される場合)
DOM インターフェイス
HTMLInputElement
  1. [Exposed=Window]
  2. interface HTMLInputElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute DOMString accept;
  6. [CEReactions] attribute DOMString alt;
  7. [CEReactions] attribute DOMString autocomplete;
  8. [CEReactions] attribute boolean defaultChecked;
  9. attribute boolean checked;
  10. [CEReactions] attribute DOMString dirName;
  11. [CEReactions] attribute boolean disabled;
  12. readonly attribute HTMLFormElement? form;
  13. attribute FileList? files;
  14. [CEReactions] attribute USVString formAction;
  15. [CEReactions] attribute DOMString formEnctype;
  16. [CEReactions] attribute DOMString formMethod;
  17. [CEReactions] attribute boolean formNoValidate;
  18. [CEReactions] attribute DOMString formTarget;
  19. [CEReactions] attribute unsigned long height;
  20. attribute boolean indeterminate;
  21. readonly attribute HTMLDataListElement? list;
  22. [CEReactions] attribute DOMString max;
  23. [CEReactions] attribute long maxLength;
  24. [CEReactions] attribute DOMString min;
  25. [CEReactions] attribute long minLength;
  26. [CEReactions] attribute boolean multiple;
  27. [CEReactions] attribute DOMString name;
  28. [CEReactions] attribute DOMString pattern;
  29. [CEReactions] attribute DOMString placeholder;
  30. [CEReactions] attribute boolean readOnly;
  31. [CEReactions] attribute boolean required;
  32. [CEReactions] attribute unsigned long size;
  33. [CEReactions] attribute USVString src;
  34. [CEReactions] attribute DOMString step;
  35. [CEReactions] attribute DOMString type;
  36. [CEReactions] attribute DOMString defaultValue;
  37. [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
  38. attribute object? valueAsDate;
  39. attribute unrestricted double valueAsNumber;
  40. [CEReactions] attribute unsigned long width;
  41.  
  42. undefined stepUp(optional long n = 1);
  43. undefined stepDown(optional long n = 1);
  44.  
  45. readonly attribute boolean willValidate;
  46. readonly attribute ValidityState validity;
  47. readonly attribute DOMString validationMessage;
  48. boolean checkValidity();
  49. boolean reportValidity();
  50. undefined setCustomValidity(DOMString error);
  51.  
  52. readonly attribute NodeList? labels;
  53.  
  54. undefined select();
  55. attribute unsigned long? selectionStart;
  56. attribute unsigned long? selectionEnd;
  57. attribute DOMString? selectionDirection;
  58. undefined setRangeText(DOMString replacement);
  59. undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  60. undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
  61.  
  62. undefined showPicker();
  63.  
  64. // also has obsolete members
  65. };
  66.  
  67. HTMLInputElement includes PopoverInvokerElement;
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML

type属性の値によって、いろいろあります。

レンダリング
インラインレベルボックス
フォームコントロール
  1. input {
  2. display: inline-block;
  3. letter-spacing: initial;
  4. word-spacing: initial;
  5. line-height: initial;
  6. text-transform: initial;
  7. text-indent: initial;
  8. text-shadow: initial;
  9. appearance: auto;
  10. text-align: initial;
  11. }
  12. input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
  13. overflow: clip !important;
  14. overflow-clip-margin: 0 !important;
  15. }
  16. input:is([type=reset i], [type=button i], [type=submit i]) { text-align: center; }
  17. input[type=hidden i], input[type=file i], input[type=image i] { appearance: none; }
  18. input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=color i], [type=search i]) { box-sizing: border-box; }

CSS を大雑把に読むと、 インラインレベルのブロックコンテナボックス(インラインブロック)を生成します。 などになります。

説明
input要素は、型指定されたデータフィールドを表し、通常はユーザーがデータを編集できるようにするフォームコントロールを備えています。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>input要素の例 - (Example of input element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>input要素の例</h1>
  9. <form action="../Html/fmreceive.htm">
  10. <input name="nipInput" value="abc">
  11. <button name="nbtSender" value="../Html/exinput.htm">ボタン</button>
  12. <br>受信用の<br>ページへ
  13. </form>
  14. </body>
  15. </html>

このサンプルへのリンクです。
(./exinput.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "input": {
  3. "check": "2024-09-01",
  4. "group": "Form",
  5. "element": "- X EMPTY -- Typed data fields. (Void elements.) [Flow|Phrasing||Interactivelimited|Listed|Labelablelimited|Submittable|Resettable|Autocapitalize|Form|Palpablelimited] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "accept": "%ContentTypes; #IMPLIED -- Hint for expected file type in file upload controls --",
  9. "alt": "CDATA #IMPLIED -- Replacement text for use when images are not available --",
  10. "autocomplete": "(on|off) on -- Hint for form autofill feature --",
  11. "checked": "(checked) #IMPLIED -- Whether the control is checked --",
  12. "dirname": "CDATA #IMPLIED -- Name of form control to use for sending the element's directionality in form submission --",
  13. "disabled": "(disabled) #IMPLIED -- Whether the form control is disabled --",
  14. "form": "IDREF #IMPLIED -- Associates the element with a form element --",
  15. "formaction": "%URI; #IMPLIED -- URL to use for form submission --",
  16. "formenctype": "%ContentType; #IMPLIED -- Entry list encoding type to use for form submission --",
  17. "formmethod": "(get|post|dialog) #IMPLIED -- Variant to use for form submission --",
  18. "formnovalidate": "(formnovalidate) #IMPLIED -- Bypass form control validation for form submission --",
  19. "formtarget": "%FrameTarget; #IMPLIED -- Navigable for form submission --",
  20. "height": "NUMBER #IMPLIED -- Vertical dimension --",
  21. "list": "IDREF #IMPLIED -- List of autocomplete options --",
  22. "max": "CDATA #IMPLIED -- Maximum value --",
  23. "maxlength": "NUMBER #IMPLIED -- Maximum length of value --",
  24. "min": "CDATA #IMPLIED -- Minimum value --",
  25. "minlength": "NUMBER #IMPLIED -- Minimum length of value --",
  26. "multiple": "(multiple) #IMPLIED -- Whether to allow multiple values --",
  27. "name": "CDATA #IMPLIED -- Name of the element to use for form submission and in the form.elements API --",
  28. "pattern": "CDATA #IMPLIED -- Pattern to be matched by the form control's value --",
  29. "placeholder": "CDATA #IMPLIED -- User-visible label to be placed within the form control --",
  30. "popovertarget": "IDREF #IMPLIED -- Targets a popover element to toggle, show, or hide --",
  31. "popovertargetaction": "(toggle|show|hide) #IMPLIED -- Indicates whether a targeted popover element is to be toggled, shown, or hidden --",
  32. "readonly": "(readonly) #IMPLIED -- Whether to allow the value to be edited by the user --",
  33. "required": "(required) #IMPLIED -- Whether the control is required for form submission --",
  34. "size": "CDATA #IMPLIED -- Size of the control --",
  35. "src": "%URI; #IMPLIED -- Address of the resource --",
  36. "step": "(NUMBER|any) #IMPLIED -- Granularity to be matched by the form control's value --",
  37. "type": "%InputType; text -- Type of form control --",
  38. "value": "CDATA #IMPLIED -- Value of the form control --",
  39. "width": "NUMBER #IMPLIED -- Horizontal dimension --",
  40. },
  41. "comment": "型付きデータフィールド (Typed data fields)",
  42. "point": "型指定されたデータフィールドを表し、通常はユーザーがデータを編集できるようにするフォームコントロールを備えています。",
  43. "kind": "Void",
  44. "categories": [
  45. "Flow",
  46. "Phrasing",
  47. "Interactivelimited",
  48. "Listed",
  49. "Labelablelimited",
  50. "Submittable",
  51. "Resettable",
  52. "Autocapitalize",
  53. "Formassociated",
  54. "Palpablelimited",
  55. ],
  56. "categoriessupplement": [
  57. "type属性が Hidden状態でない場合は、インタラクティブコンテンツ, リストされた要素, ラベル付け可能な要素, 送信可能な要素, リセット可能な要素, 自動大文字化継承要素, フォーム関連要素, パルパブルコンテンツ。",
  58. "type属性が Hidden状態の場合は、 リストされた要素, 送信可能な要素, リセット可能な要素, 自動大文字化継承要素, フォーム関連要素。",
  59. ],
  60. "used": "parent (%Phrasing)*",
  61. "contentmodel": "%Nothing",
  62. "tag": [
  63. "-",
  64. "X",
  65. ],
  66. "attributes": {
  67. "accept": "ファイルアップロードコントロールで予期されるファイルタイプのヒント",
  68. "alt": "画像が利用できない場合に使用する置換テキスト",
  69. "autocomplete": "フォーム自動入力機能のヒント",
  70. "checked": "コントロールがチェックされているかどうか",
  71. "dirname": "フォーム送信時に要素の方向性を送信するために使用するフォームコントロールの名前",
  72. "disabled": "フォームコントロールが無効かどうか",
  73. "form": "要素をフォーム要素に関連付けます",
  74. "formaction": "フォーム送信に使用するURL",
  75. "formenctype": "フォーム送信に使用するエントリリストのエンコードタイプ",
  76. "formmethod": "フォーム送信に使用するHTTPメソッド",
  77. "formnovalidate": "フォーム送信時のフォームコントロールの検証をバイパスする",
  78. "formtarget": "フォーム送信にナビゲート可能",
  79. "height": "縦寸法",
  80. "list": "オートコンプリートオプションのリスト",
  81. "max": "最大値",
  82. "maxlength": "値の最大長",
  83. "min": "最小値",
  84. "minlength": "値の最小長",
  85. "multiple": "複数の値を許可するかどうか",
  86. "name": "フォーム送信および form.elements API で使用する要素の名前",
  87. "pattern": "フォームコントロールの値と一致するパターン",
  88. "placeholder": "フォームコントロール内に配置されるユーザーに見えるラベル",
  89. "popovertarget": "ポップオーバー要素を切り替え、表示、または非表示にする対象とします。",
  90. "popovertargetaction": "ターゲットのポップオーバー要素を切り替えるか、表示するか、非表示にするかを示します。",
  91. "readonly": "ユーザーによる値の編集を許可するかどうか",
  92. "required": "フォーム送信にコントロールが必要かどうか",
  93. "size": "コントロールのサイズ",
  94. "src": "リソースのアドレス",
  95. "step": "フォームコントロールの値と一致する粒度",
  96. "type": "フォームコントロールの種類",
  97. "value": "フォームコントロールの値",
  98. "width": "水平寸法",
  99. "title": "この要素に特別なセマンティクスで、パターンの説明 (パターン属性とともに使用される場合)",
  100. },
  101. "dominterface": "HTMLInputElement",
  102. "rendering": [
  103. "Form",
  104. "Bidirectional",
  105. "Replaced",
  106. "Hidden",
  107. ],
  108. "reference": [
  109. {
  110. "title": "HTML Living Standard. 4.10 Forms 4.10.5 The input element.",
  111. "href": "https://html.spec.whatwg.org/multipage/input.html#the-input-element",
  112. "heading": "HTML Living Standard. 4.10 Forms 4.10.5 The input element",
  113. "sub": "Last Updated 27 August 2024",
  114. },
  115. {
  116. "title": "HTML Living Standard. 15 Rendering 15.3.10 Form controls.",
  117. "href": "https://html.spec.whatwg.org/multipage/rendering.html#form-controls",
  118. "heading": "HTML Living Standard. 15 Rendering 15.3.10 Form controls",
  119. "sub": "Last Updated 27 August 2024",
  120. },
  121. {
  122. "title": "HTML Living Standard. 15 Rendering 15.5.6 The input element as a text entry widget.",
  123. "href": "https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget",
  124. "heading": "HTML Living Standard. 15 Rendering 15.5.6 The input element as a text entry widget",
  125. "sub": " (15.5.12 まで input要素の記述が続きます。) Last Updated 27 August 2024",
  126. },
  127. {
  128. "title": "HTML Living Standard. 4.11 Interactive elements 4.11.3.4 Using the input element to define a command.",
  129. "href": "https://html.spec.whatwg.org/multipage/interactive-elements.html#using-the-input-element-to-define-a-command",
  130. "heading": "HTML Living Standard. 4.11 Interactive elements 4.11.3.4 Using the input element to define a command",
  131. "sub": "Last Updated 27 August 2024",
  132. },
  133. {
  134. "title": "HTML 5.2 W3C Recommendation. 4.10.5 The input element. W3C Recommendation, 14 December 2017.",
  135. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#the-input-element",
  136. "heading": "HTML 5.2 W3C 勧告. 4.10.5 The input element",
  137. "sub": "W3C勧告、2017年12月14日",
  138. },
  139. {
  140. "title": "HTML 5.2 W3C Recommendation. 10.3.11. Form controls.",
  141. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#form-controls",
  142. "heading": "HTML 5.2 W3C 勧告. 10.3.11. Form controls.",
  143. "sub": "W3C勧告、2017年12月14日",
  144. },
  145. {
  146. "title": "HTML 5.1 W3C Recommendation. 4.10.5 The input element. W3C Recommendation, 1 November 2016.",
  147. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-input-element",
  148. "heading": "HTML 5.1 W3C 勧告. 4.10.5 The input element",
  149. "sub": "W3C勧告、2016年11月1日",
  150. },
  151. {
  152. "title": "HTML 5.1 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 1 November 2016.",
  153. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#form-controls",
  154. "heading": "HTML 5.1 W3C 勧告. 10.3.11. Form controls.",
  155. "sub": "W3C勧告、2016年11月1日",
  156. },
  157. {
  158. "title": "HTML 5 W3C Recommendation. 4.10.5 The input element. W3C Recommendation, 28 October 2014.",
  159. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-label-element",
  160. "heading": "HTML 5 W3C 勧告. 4.10.5 The input element",
  161. "sub": "W3C勧告、2014年10月28日",
  162. },
  163. {
  164. "title": "HTML 5 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 28 October 2014.",
  165. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#form-controls",
  166. "heading": "HTML 5 W3C 勧告. 10.3.11. Form controls.",
  167. "sub": "W3C勧告、2014年10月28日",
  168. },
  169. {
  170. "title": "HTML 4.01 Specification W3C Recommendation. 17.4 The INPUT element. W3C Recommendation 24 December 1999.",
  171. "href": "https://www.w3.org/TR/html401/interact/forms.html#h-17.4",
  172. "heading": "HTML 4.01 Specification W3C 勧告. 17.4 The INPUT elements",
  173. "sub": "W3C勧告1999年12月24日",
  174. },
  175. {
  176. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  177. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#fields",
  178. "heading": "HTML 3.2 Reference Specification",
  179. "sub": "W3C勧告1997年1月14日",
  180. },
  181. {
  182. "title": "Hypertext Markup Language - 2.0. November 1995.",
  183. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  184. "heading": "Hypertext Markup Language - 2.0",
  185. "sub": "November 1995",
  186. },
  187. {
  188. "title": "MDN Web Docs. HTML <input>: The Input (Form Input) element.",
  189. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/input",
  190. "heading": "<input>: 入力欄（フォーム入力）要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  191. },
  192. ],
  193. "version": {
  194. "first": "HTML2",
  195. "latest": "HTML Living Standard",
  196. },
  197. }
  198. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用可能な箇所

フレージングコンテンツ を
受け入れる要素に
配置できます。

input要素を使用できる状態(コンテキスト・Context)は、フレージングコンテンツを受け入れる要素に配置できます。

フレージングコンテンツを受け入れる要素は、h1要素, h2要素, h3要素, h4要素, h5要素, h6要素, p要素, pre要素, output要素, progress要素, meter要素, label要素, datalist要素, body要素, section要素, nav要素, aside要素, article要素, header要素, footer要素, main要素, address要素, li要素, dt要素, dd要素, caption要素, th要素, td要素, form要素, fieldset要素, search要素, blockquote要素, figure要素, figcaption要素, div要素, dialog要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素 です。

尚 厳密に言うと、コンテンツモデルがフレージングコンテンツ, フローコンテンツのいずれかである要素に配置できます。少なくとも現在は、カテゴリがフレージングコンテンツである要素はフローコンテンツでもあります。なので、コンテンツモデルがフローコンテンツである要素にはカテゴリがフレージングコンテンツである要素も配置できるのが現状です。

3.配置できるコンテンツ

配置可能なコンテンツは
ありません。

inputは、子(内容・コンテンツ・Content)を持つことができない空要素です。

inputは、属性(属性値)によって型指定されたデータフィールドを表します。

listを用いてdatalist要素と関連付ける事で、オートコンプリートオプションのリストを指定する事も出来ます。

4.属性

グローバル属性と、
accept, alt,
autocomplete,
checked,
dirname,
disabled,
form,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max, maxlength,
min, minlength,
multiple,
name,
pattern,
placeholder,
popovertarget,
popovertargetaction,
readonly, required,
size, src, step,
type, value, width を
設定できます。

inputは、グローバル属性と accept属性, alt属性, autocomplete属性, checked属性, dirname属性, disabled属性, form属性, formaction属性, formenctype属性, formmethod属性, formnovalidate属性, formtarget属性, height属性, list属性, max属性, maxlength属性, min属性, minlength属性, multiple属性, name属性, pattern属性, placeholder属性, popovertarget属性, popovertargetaction属性, readonly属性, required属性, size属性, src属性, step属性, type属性, value属性, width属性を設定できます。

例示に於いて、見易さの為にinputのtypeがtextの時に、スタイルシートで装飾(幅)の指定をしています。またbuttonの前で改行しています。

例示に於いて、送信の状況を見る為に送信先を./fmreceive.htmとしています。それは送信のデモ用の受信ページです。そこで送信元が分かる様に、名前がnbtSenderというデータで送信元を表す記述をしています。

  1. <form action="./fmreceive.htm">
  2. <input>
  3. <button name="nbtSender" value="./foinput.htm#MAP4NEXT">ボタン</button>
  4. </form>

form要素を改めて提示していない限り、この雛型の 2 行目のinput要素を置き換えてデモとしています。

button要素のvalueの値は、作成者の決め事によりその都度送信元が分かる様に書き換えています。nameの値は、作成者の決め事によりnbtSenderで固定です。

accept属性

  1. <input name="nipFile" type="file" accept=".txt, .htm">

acceptを指定すると、ユーザーエージェントに受け入れられるファイルの種類のヒントを提供できます。

acceptは、typeがfileの時に有効です。

指定する場合、属性はコンマで区切られたトークンのセットで構成されている必要があり、各トークンは、次のいずれかに一致する ASCII 大文字小文字を区別しないものでなければなりません。

"audio/*"
サウンドファイルが受け入れられることを示します。
"video/*"
ビデオファイルが受け入れられることを示します。
"image/*"
画像ファイルが受け入れられることを示します。
パラメータのない有効な MIME タイプ文字列
指定された種類のファイルが受け入れられることを示します。
最初の文字が U+002E ピリオド文字 (.) である文字列
指定されたファイル拡張子を持つファイルが受け入れられることを示します。

alt属性

  1. <input name="nipImage" type="image" src="../Img/G00/dummy.gif" alt="ImageButton">

altは、画像を使用できないユーザーおよびユーザーエージェントの為に、ボタンのテキストラベルを提供します。altは必ず存在し、画像が利用できない場合に同等のボタンに適切なラベルを示す空でない文字列を含める必要があります。

altは、typeがimageの時に有効です。

autocomplete属性

  1. <input name="nipText" type="text" autocomplete="on">

autocompleteは、ユーザーエージェントが自動入力動作を提供する方法を制御します。

autocompleteは、typeがtext, search, tel, url, email, password, date, month, week, time, datetime-local, number, range, color, hiddenの時に有効です。


checked属性

  1. <input name="nipRadio" type="radio" value="radio01" checked>

checkedは、inputのデフォルトのチェック状態を指定するブール属性です。checkedが追加された場合、コントロールにダーティチェック状態がない場合、ユーザーエージェントは要素のチェック状態を true に設定する必要があります。checkedが削除された場合、コントロールにダーティチェック状態がない場合、ユーザーエージェントは要素のチェック状態を false に設定する必要があります。

checkedは、typeがcheckbox, radioの時に有効です。



dirname属性

  1. <input name="nipText" type="text" dirname="nipDirname">

dirnameは、要素の方向の送信を有効にし、フォーム送信中にこの値を含むコントロールの名前を指定します。このような属性を指定する場合、その値は空の文字列であってはなりません。

dirnameは、typeがtext, search, tel, url, email, password, submit, hiddenの時に有効です。


disabled属性

  1. <input name="nipText" type="text" value="distext" disabled>

disabledは、コントロールを非対話型にして、その値が送信されないようにする為に使用されるブール属性です。


form属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipText" type="text" form="ifoForm241">
  3. <button name="nbtSender" value="./foinput.htm#MH3FORM">ボタン</button>
  4. </form>
  5. <form id="ifoForm241" action="./fmreceive.htm">
  6. <button name="nbtSender" value="./foinput.htm#MH3FORM">ボタン</button>
  7. </form>

formは、入力要素をそのフォーム所有者に明示的に関連付ける為に使用されます。

フォーム関連要素は、デフォルトでは、最も近い祖先form要素に関連付けられます。ただし、リストされている場合は、これを上書きする為にformを指定できます。つまりformを指定してフォーム所有者に関連付けした場合は、その要素の最も近い祖先への関連付けは上書きされるという事で、複数のフォーム所有者に関連付ける事は出来ないという事です。

formaction属性

  1. <form action="./form.htm">
  2. <input name="nipSubmit" type="submit" formaction="./fmreceive.htm">
  3. <input name="nbtSender" type="hidden" value="./foinput.htm#MH3FORMACTION">
  4. </form>

formactionは、送信されたデータを処理するサービスのURLを表します。

formactionが指定されている場合、その値は、スペースで囲まれた可能性のある有効な空でない URL である必要があります。

要素のアクションは、要素が送信ボタンであり、そのような属性がある場合は要素のformactionの値、フォーム所有者のactionがある場合はその値、ない場合は空の文字列です。

formactionは、typeがsubmit, imageの時に有効です。

formenctype属性

  1. <input name="nipSubmit" type="submit" formenctype="application/x-www-form-urlencoded">

formenctypeは、フォーム送信に使用するエントリリストのエンコードタイプを指定します。

formenctypeが指定されている場合、その値は、次のキーワードと状態です。

  • 「application/x-www-form-urlencoded」キーワードと対応する状態。
  • 「multipart/form-data」キーワードと対応する状態。
  • 「text/plain」キーワードと対応する状態。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性には欠損値のデフォルトはなく、無効値のデフォルトは application/x-www-form-urlencoded 状態です。

要素の enctype は、要素が送信ボタンであり、そのような属性がある場合は要素のformenctypeの状態になります。それ以外の場合は、フォーム所有者のenctypeの値(状態)です。

formenctypeは、typeがsubmit, imageの時に有効です。

formmethod属性

  1. <input name="nipSubmit" type="submit" formmethod="get">

formmethodは、フォーム送信に使用するHTTPメソッドを指定します。

formmethodは、次のキーワード(keywords)と状態(states)を持つ列挙属性(enumerated attribute)です。

get
フォームが HTTP GET メソッドを使用することを示します。
post
フォームが HTTP POST メソッドを使用することを示します。
dialog
フォームが存在するダイアログボックスがあればそれを閉じ、それ以外の場合は送信しないことをフォームが意図していることを示します。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性には欠損値のデフォルトはなく、無効値のデフォルトは get 状態です。

要素の method は、要素が送信ボタンであり、そのような属性がある場合は要素のformmethodの状態になります。それ以外の場合は、フォーム所有者のmethodの値(状態)です。

formmethodは、typeがsubmit, imageの時に有効です。

formnovalidate属性

  1. <input name="nipText" required><br>
  2. <input name="nipSubmit" type="submit" formnovalidate>

formnovalidateは、ブール属性です。存在する場合、フォームは送信時に検証されないことを示します。

要素が送信ボタンであり、formnovalidateがある場合、または要素のフォーム所有者のnovalidateが存在する場合は、要素の no-validate 状態は true になり、それ以外の場合は false になります。

formnovalidateは、typeがsubmit, imageの時に有効です。

例示に於いて、typeがtextのinputにrequiredを指定して、「入力必須」としています。また見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。


formtarget属性

  1. <form action="./fmreceive.htm" target="_top">
  2. <input name="nipSubmit" type="submit" formtarget="nifTarget">
  3. </form>
  4. <iframe name="nifTarget"></iframe>

formtargetは、フォーム送信に有効なナビゲーション可能なターゲット名またはキーワードを指定します。

target および formtargetコンテンツ属性が指定されている場合、その値は有効なナビゲート可能なターゲット名またはキーワードである必要があります。キーワードは ASCII 大文字と小文字を区別せずに、

  • _blank: new
  • _self: current
  • _parent: parent
  • _top: top
などがあります。

例示ではiframeにnameを指定して、「ターゲット名」としています。また見易さの為に、iframeにスタイルシートで装飾(幅)の指定をしています。

height属性

  1. <input name="nipImage" type="image" src="../Img/G01/hatena01k.gif" alt="ImageButton" height="45">

heightは、inputの視覚コンテンツの寸法 (それぞれ出力メディアの公称方向に対する高さ) を CSS ピクセルで指定するように指定できます。属性を指定する場合、その値は有効な非負の整数である必要があります。

heightは、typeがimageの時に有効です。

例示では、指定している値の効果を見れる様に意図的に実際の高さと異なる値を指定しています。素材の高さx幅は、40x30(px) です。

list属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipText" type="text" list="idaDatalist">
  3. <button name="nbtSender" value="./foinput.htm#MH3LIST">ボタン</button>
  4. </form>
  5. <datalist id="idaDatalist">
  6. <option>ABC123</option>
  7. <option>DEF456</option>
  8. </datalist>

listは、ユーザーに提案される定義済みオプションをリストする要素を識別する為に使用されます。

存在する場合、その値は同じツリー内のdatalistの ID である必要があります。

提案ソース要素は、その要素がdatalistである場合、ツリー順序でツリー内の最初の要素であり、listの値と等しい ID を持ちます。listがない場合、またはその ID を持つ要素がない場合、またはその ID を持つ最初の要素がdatalistでない場合は、提案ソース要素はありません。

提案ソース要素がある場合、ユーザーエージェントがユーザーにinputの値を編集できるようにしている場合、ユーザーエージェントは、提案ソース要素によって表される提案を、使用されるコントロールの種類に適した方法でユーザーに提供する必要があります。適切な場合、ユーザーエージェントは、提案のラベルと値を使用して、ユーザーに提案を識別する必要があります。

ユーザーエージェントは、提案の数が多い場合は、提案ソース要素によって表される提案をフィルター処理し、最も関連性の高いものだけを含めるようにすることが推奨されます (たとえば、これまでのユーザーの入力に基づいて)。正確なしきい値は定義されていませんが、リストを 4 から 7 個の値に制限するのが妥当です。ユーザーの入力に基づいてフィルタリングする場合、ユーザーエージェントは、候補のラベルと値の両方で一致を検索する必要があります。ユーザーエージェントは、入力のバリエーションがマッチングプロセスにどのように影響するかを考慮する必要があります。Unicode 正規化を適用して、異なるキーボードまたは入力固有のメカニズムによって引き起こされる、基礎となる異なる Unicode コードポイントシーケンスがマッチングプロセスを妨げないようにする必要があります。大文字と小文字のバリエーションは無視する必要があります。これには、言語固有の大文字と小文字のマッピングが必要になる場合があります。ユーザーエージェントは、他のマッチング機能も提供できます。例として、異なる形式のかな同士 (または漢字) のマッチング、アクセントの無視、スペル修正の適用などがあります。

listは、typeがtext, search, tel, url, email, date, month, week, time, datetime-local, number, range, colorの時に有効です。

例示ではdatalistにidを指定して、「定義済みオプションのリストの識別子」としています。また見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

max属性

  1. <input name="nipNumber" type="number" max="10">

maxは、要素の許容値の範囲(最大値)を示します。

要素にmaxがあり、文字列を数値に変換するアルゴリズムをmaxの値に適用した結果が数値である場合、その数値が要素の最大値になります。そうでない場合、typeの現在の状態がデフォルトの最大値を定義する場合は、それが最大値になります。そうでない場合、要素には最大値はありません。

要素に周期ドメインがない場合、maxの値 (最大値) はminの値 (最小値) より小さくてはなりません。

maxは、typeがdate, month, week, time, datetime-local, number, range, colorの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

maxlength属性

  1. <input name="nipText" type="text" maxlength="5">

maxlengthは、要素の値の最大長を示します。

要素に最大許容値の長さがある場合、要素のvalueの値の長さは、要素の最大許容値の長さ以下である必要があります。

maxlengthは、typeがtext, search, tel, url, email, passwordの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

min属性

  1. <input name="nipNumber" type="number" min="5">

minは、要素の許容値の範囲(最小値)を示します。

要素にminがあり、文字列を数値に変換するアルゴリズムをminの値に適用した結果が数値である場合、その数値が要素の最小値になります。そうでない場合、typeの現在の状態がデフォルトの最小値を定義する場合は、それが最小値になります。そうでない場合、要素には最小値はありません。

maxは、typeがdate, month, week, time, datetime-local, number, range, colorの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

minlength属性

  1. <input name="nipText" type="text" minlength="5">

minlengthは、要素の値の最小長を示します。

minlengthは、typeがtext, search, tel, url, email, passwordの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

multiple属性

  1. <input name="nipEmail" type="email" multiple value="aaa@yahoo.co.jp,bbb@yahoo.co.jp">

multipleは、ユーザーが複数の値を指定できるかどうかを示すブール属性です。

multipleは、typeがemail, fileの時に有効です。

name属性

  1. <input name="nipText" type="text">

nameは、要素の名前を表します。

nameは、フォームの送信時やformの elements オブジェクトで使用されるフォームコントロールの名前を指定します。属性が指定されている場合、その値は空の文字列またはisindexであってはなりません。
isindex以外では、name に空でない任意の値が許可されます。name_charset_の ASCII 大文字と小文字を区別しない一致は特別です。valueのない Hidden コントロールの名前として使用した場合、送信時にvalueに送信文字エンコーディングで構成される値が自動的に与えられます。

nameはフォームコントロールの名前となるので、他の属性名などと重複しないように命名規則を事前に内部規則などで決めておくのが良いです。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

pattern属性

  1. <input name="nipText" type="text" pattern="[A-Za-z]+">

patternは、コントロールの値、またはmultipleが適用されて設定されている場合はコントロールの値をチェックする正規表現を指定します。

指定されている場合、属性の値は JavaScript の正規表現(入力パターン文字列)として適切である必要があります。 文法が文字列をパターンの拡張として解釈できない場合は、指定されていないものとして扱います。

inputにpatternが指定されている場合、作成者はパターンの説明を示す為にtitleを含める必要があります。ユーザーエージェントは、この属性が存在する場合、パターンが一致しないことをユーザーに通知するとき、またはツールヒントやコントロールがフォーカスを取得したときに支援技術によって読み上げられるなど、他の適切なタイミングでこの属性の内容を使用できます。

patternは、typeがtext, search, tel, url, email, passwordの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

placeholder属性

  1. <input name="nipText" type="text" placeholder="placeholder">

placeholderは、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒント (単語または短いフレーズ) を表します。ヒントは、サンプル値または予想される形式の簡単な説明になります。属性を指定する場合、その値には U+000A LINE FEED (LF) または U+000D CARRIAGE RETURN (CR) 文字が含まれていてはなりません。

placeholderは、ラベルの代わりに使用しないでください。より長いヒントやその他のアドバイステキストの場合は、titleの方が適しています。

placeholderは、typeがtext, search, tel, url, email, password, numberの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

popovertarget属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipButton" type="button" popovertarget="idvPopover41" value="開閉">
  3. </form>
  4. <div id="idvPopover41" popover>Pop41</div>

popovertargetは、ポップオーバー要素を切り替え、表示、非表示にする対象とする。

指定されている場合、popovertargetの属性値は、popovertargetを持つボタンと同じツリー内のpopoverを持つ要素の ID である必要があります。

例示ではdivにidを指定して、ID としています。

Pop41

popovertargetaction属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipButton" type="button" popovertarget="idvPopover42" popovertargetaction="show" value="開く"><br>
  3. <input name="nipButton" type="button" popovertarget="idvPopover42" popovertargetaction="hide" value="閉じる">
  4. </form>
  5. <div id="idvPopover42" popover>Pop42</div>

popovertargetactionは、対象となるポップオーバー要素を切り替えるか、表示するか、非表示にするかを示します。

popovertargetactionは、次のキーワードと状態を持つ列挙属性です。

toggle
対象となるポップオーバー要素を表示または非表示にします。
show
対象となるポップオーバー要素を表示します。
hide
対象のポップオーバー要素を非表示にします。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性の欠落値のデフォルトと無効値のデフォルトは、どちらも切り替え状態(toggle)です。

例示ではdivにidを指定して、ID としています。


Pop42

readonly属性

  1. <input name="nipText" type="text" readonly value="Readonly">

readonlyは、ユーザーがフォームコントロールを編集できるかどうかを制御するブール属性です。指定すると、要素は変更できなくなります。

inputにreadonlyが指定されている場合、その要素は制約の検証から除外されます。

readonlyは、typeがtext, search, tel, url, email, password, date, month, week, time, datetime-local, numberの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

required属性

  1. <input name="nipText" type="text" required>

requiredは、フォーム送信にコントロールが必要かどうかを表します。requiredはブール属性です。指定されている場合、要素は必須です。

要素が必須であり、その値の IDL 属性が適用され、モード値にあり、要素が変更可能であり、要素の値が空の文字列である場合、要素は欠落している状態になります。

requiredは、typeがtext, search, tel, url, email, password, date, month, week, time, datetime-local, number, checkbox, radio, fileの時に有効です。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

size属性

  1. <input name="nipText" type="text" size="5">

sizeは、視覚的なレンダリングで、要素の値を編集しているときにユーザーエージェントがユーザーに表示できるようにする文字数を指定します。

sizeが指定されている場合、その値は 0 より大きい有効な非負整数である必要があります。

属性が存在する場合、その値は非負整数を解析するための規則を使用して解析され、結果が 0 より大きい数値である場合、ユーザーエージェントは少なくともその文字数が表示されるようにする必要があります。

size IDL 属性は正の数のみに制限されており、デフォルト値は 20 です。

sizeは、typeがtext, search, tel, url, email, passwordの時に有効です。

src属性

  1. <input name="nipImage" type="image" src="../Img/G01/hatena01k.gif" alt="ImageButton">

srcは、リソースのアドレスを表します。

srcは、typeがimageの時に有効です。というか、typeがimageの時にsrcは必ず存在し、ページングもスクリプト化もされていない非インタラクティブでオプションでアニメーション化された画像リソースを参照する、有効な空でない URL が含まれている必要があります。

step属性

  1. <input name="nipNumber" type="number" step="2">

stepは、許容される値を制限することで、値に期待される (および必要な) 粒度を示します。typeの現在の状態を定義するセクションでは、デフォルトのステップ、ステップスケール係数、および場合によってはデフォルトのステップベースも定義します。これらは、属性の処理に使用されます。

stepが指定されている場合、その値は、0 より大きい数値として解析される有効な浮動小数点数であるか、または文字列「any」に大文字と小文字を区別せずに一致する ASCII 値である必要があります。
any が指定された場合は、任意の精度で値を指定できます。

stepは、typeがdate, month, week, time, datetime-local, number, range, colorの時に有効です。

type属性

  1. <input name="nipHidden" type="hidden" value="ValueHidden">
  2. <label>Text <input name="nipText" type="text"></label><br>
  3. <label>Search <input name="nipSearch" type="search"></label><br>
  4. <label>Telephone <input name="nipTelephone" type="tel"></label><br>
  5. <label>URL <input name="nipURL" type="url"></label><br>
  6. <label>Email <input name="nipEmail" type="email"></label><br>
  7. <label>Password <input name="nipPassword" type="password"></label><br>
  8. <label>Date <input name="nipDate" type="date"></label><br>
  9. <label>Month <input name="nipMonth" type="month"></label><br>
  10. <label>Week <input name="nipWeek" type="week"></label><br>
  11. <label>Time <input name="nipTime" type="time"></label><br>
  12. <label>Local Date and Time <input name="nipDatetimelocal" type="datetime-local"></label><br>
  13. <label>Number <input name="nipNumber" type="number"></label><br>
  14. <label>Range <input name="nipRange" type="range"></label><br>
  15. <label>Color <input name="nipColor" type="color"></label><br>
  16. <label>Checkbox <input name="nipCheckbox" type="checkbox"></label><br>
  17. Radio <label>B1 <input name="nipRadio" type="radio" value="RadioB1"></label> <label>B2 <input name="nipRadio" type="radio" value="RadioB2"></label><br>
  18. <label>File Upload <input name="nipFile" type="file"></label><br>
  19. <label>Submit <input name="nipSubmit" type="submit"></label><br>
  20. <label>Image <input name="nipImage" type="image" src="../Img/G01/hatena01k.gif" alt="ImageButton"></label><br>
  21. <label>Reset <input name="nipReset" type="reset"></label><br>
  22. <label>Button <input name="nipButton" type="button"></label><br>

typeは、要素のデータ型 (および関連するコントロール) を制御します。これは、次のキーワードと状態を持つ列挙属性です。

hidden
Hidden 任意の文字列 コントロールタイプはありません。
text
Text 改行のないテキスト テキストコントロール
search
Search 改行のないテキスト 検索コントロール
tel
Telephone 改行のないテキスト テキストコントロール
url
URL 絶対URL テキストコントロール
email
Email メールアドレスまたはメールアドレスのリスト テキストコントロール
password
Password 改行のないテキスト (機密情報) データ入力を隠すテキストコントロール
date
Date 日付 (年, 月, 日) タイムゾーンなし 日付コントロール
month
Month タイムゾーンのない年と月で構成される日付 年月コントロール
week
Week タイムゾーンのない年と週番号で構成される日付 年週コントロール
time
Time タイムゾーンのない時間 (時間、分、秒、秒の小数部) 時刻コントロール
datetime-local
Local Date and Time タイムゾーンのない日付と時刻 (年、月、日、時、分、秒、秒の小数点以下) 日付と時刻コントロール
number
Number 数値 テキストコントロールまたはスピナーコントロール
range
Range 正確な値は重要ではないという追加の意味を持つ数値 スライダーコントロールまたは類似のもの
color
Color 8ビットの赤、緑、青の要素を持つsRGBカラー カラーピッカー
checkbox
Checkbox 定義済みのリストからの 0 個以上の値のセット チェックボックス
radio
Radio Button 列挙値 ラジオボタン
file
File Upload MIME タイプとオプションでファイル名を持つ 0 個以上のファイル ラベルとボタン
submit
Submit Button 列挙値。最後に選択された値でなければならず、フォームの送信を開始するという追加の意味を持つ。 ボタン
image
Image Button 特定の画像のサイズを基準とした座標。最後に選択された値でなければならず、フォームの送信を開始するという追加の意味を持つ。 クリック可能な画像またはボタン
reset
Reset Button データ・タイプはありません。 ボタン
button
Button データ・タイプはありません。 ボタン

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性の欠落値のデフォルトと無効値のデフォルトはどちらもテキスト状態です。
















Radio





value属性

  1. <input name="nipText" type="text" value="ABC123">

valueは、inputのデフォルト値を指定します。

value コンテンツ属性が追加、設定、または削除されるときに、コントロールのダーティ値フラグが false の場合、ユーザーエージェントは、value コンテンツ属性がある場合はその値に要素の値を設定し、ない場合は空の文字列に設定してから、現在の値サニタイズアルゴリズムが定義されている場合はそれを実行する必要があります。

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

width属性

  1. <input name="nipImage" type="image" src="../Img/G01/hatena01k.gif" alt="ImageButton" width="35">

widthは、inputの視覚コンテンツの寸法 (それぞれ出力メディアの公称方向に対する幅) を CSS ピクセルで指定するように指定できます。属性を指定する場合、その値は有効な非負の整数である必要があります。

widthは、typeがimageの時に有効です。

例示では、指定している値の効果を見れる様に意図的に実際の幅と異なる値を指定しています。素材の高さx幅は、40x30(px) です。

5.Web API

name属性を用いて
form要素
(HTMLFormElement
オブジェクト)の
プロパティとして
要素を取得する方法が
お勧めです。

input要素単体を表すプロパティはないですが、まずform要素を取得して、nameの属性値を名称とするそれのプロパティとして要素を取得する方法がお勧めです。 理由は、その名称が送信時のデータ名ともなり分かり易いと思うからです。

  1. <form action="./fmreceive.htm" oninput="this.nouOutput.value = this.nipInput1511.valueAsNumber + this.nipInput1512.valueAsNumber">
  2. <input id="iipInput01" name="nipInput1511" type="number" value="1"> +
  3. <input id="iipInput02" name="nipInput1512" type="number" value="2"> =
  4. <output name="nouOutput" for="iipInput01 iipInput02">3</output>
  5. <button name="nbtSender" value="./foinput.htm#MAP5NEXT">ボタン</button>
  6. </form>

input要素の値を取得する例です。

例示に於いて、見易さの為にinput要素にスタイルシートで装飾(幅)の指定をしています。

+ = 3

6.レンダリング

  1. input {
  2. display: inline-block;
  3. text-align: initial;
  4. }

input要素は、インラインレベルのブロックコンテナボックス(インラインブロック)を生成します。

コードを見易くする為に要素毎に改行すると、改行コードがスペースと扱われて意図しない隙間が表れる事があります。 描画を重視するかコードの見易さを重視するか、折衷案でタグの内で改行するか、いろいろ配慮が必要です。

  1. <form action="./fmreceive.htm">
  2. <label><input name="nipRadio" type="radio" value="radio01" checked"> label01</label>
  3. <label><input name="nipRadio" type="radio" value="radio02"> label02</label>
  4. <button name="nbtSender" value="./foinput.htm#MAP6NEXT">ボタン</button>
  5. </form>

input要素の描画の例です。ラジオボタンでラベル付きを複数続けてみました。 インラインレベルのボックスなので、改行されずに描画されます。 ソースコードでの改行は、空白として扱われます。

この例示では、それを囲むコンテナボックスに幅の指定をしていて、途中で折り返さない様にしています。

7.気を付ける点

フォームの所有者

input要素などのフォーム関連要素は、要素のフォーム所有者と呼ばれるform要素との関係を持つことができます。そしてフォーム関連要素は、デフォルトで、その最も近い祖先のform要素に関連付けられます。formを用いて、form要素に関連付ける事も出来ます。どのform要素がフォームの所有者であるか、分かり易くする事を意識するのが良いと思います。

名前

nameを用いて名前を付ける時に、プロパティの名称と同じだとアクセスに干渉する事が考えられます。故に命名には内部規則として命名規則を事前に決めておくのが良いと思います。
尚nameがなくて名前が付いていないと、送信対象とならないみたいです。

dirnameを用いる時にも、他のフォーム送信に於けるデータの名前と重複しない様に、命名には内部規則として命名規則を事前に決めておくのが良いと思います。

8.付記