From c598ff023f081dd3f03b2e43177a632fb7dc92ec Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Fri, 24 Mar 2023 10:54:39 +0900 Subject: [PATCH] Add the element Closes #5811. Co-authored-by: Scott O'Hara --- images/content-venn.svg | 1 + source | 185 ++++++++++++++++++++++++++++++++++------ 2 files changed, 158 insertions(+), 28 deletions(-) diff --git a/images/content-venn.svg b/images/content-venn.svg index ec874356e28..7c373809ade 100644 --- a/images/content-venn.svg +++ b/images/content-venn.svg @@ -90,6 +90,7 @@
  • s
  • samp
  • script
    • +
  • search
  • section
  • select
  • slot
    • diff --git a/source b/source index 4f4e52a9494..1a935adc908 100644 --- a/source +++ b/source @@ -12178,6 +12178,7 @@ console.assert(image.height === 200);
  • s
  • samp
  • script
    • +
  • search
  • section
  • select
  • slot
    • @@ -12473,6 +12474,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
  • ruby
  • s
  • samp
    • +
  • search
  • section
  • select
  • small
    • @@ -20944,6 +20946,115 @@ included with Exhibit B. +

    The search element

    + +
    +
    Categories:
    +
    Flow content.
    +
    Palpable content.
    +
    Contexts in which this element can be used:
    +
    Where flow content is expected.
    +
    Content model:
    +
    Flow content.
    +
    Content attributes:
    +
    Global attributes
    +
    Accessibility considerations:
    +
    For authors.
    +
    For implementers.
    +
    DOM interface:
    +
    Uses HTMLElement.
    +
    + +

    The search element represents a part of a document or application + that contains a set of form controls or other content related to performing a search or filtering + operation. This could be a search of the web site or application; a way of searching or filtering + search results on the current web page; or a global or Internet-wide search function.

    + +

    It's not appropriate to use the search element just for presenting + search results, though suggestions and links as part of "quick search" results can be + included as part of a search feature. Rather, a returned web page of search results would instead + be expected to be presented as part of the main content of that web page.

    + +
    +

    In the following example, the author is including a search form within the + header of the web page:

    + + 
    <header>
+  <h1><a href="/">My fancy blog</a></h1>
+  ...
+  <search>
+    <form action="search.php">
+      <label for="query">Find an article</label>
+      <input id="query" name="q" type="search">
+      <button type="submit">Go!</button>
+    </form>
+  </search>
+</header>
    +
    + +
    +

    In this example, the author has implemented their web application's search functionality + entirely with JavaScript. There is no use of the form element to perform + server-side submission, but the containing search element semantically identifies + the purpose of the descendant content as representing search capabilities.

    + + 
    <search>
+  <label>
+    Find and filter your query
+    <input type="search" id="query">
+  </label>
+  <label>
+    <input type="checkbox" id="exact-only">
+    Exact matches only
+  </label>
+
+  <section>
+    <h3>Results found:</h3>
+    <ul id="results">
+      <li>
+        <p><a href="services/consulting">Consulting services</a></p>
+        <p>
+          Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
+        </p>
+      </li>
+      ...
+    </ul>
+    <!--
+      when a query returns or filters out all results
+      render the no results message here
+    -->
+    <output id="no-results"></output>
+  </section>
+</search>
    +
    + +
    +

    In the following example, the page has two search features. The first is located in the web page's + header and serves as a global mechanism to search the web site's content. Its purpose is + indicated by its specified title attribute. The second is included as part of the main content + of the page, as it represents a mechanism to search and filter the content of the current page. It contains + a heading to indicate its purpose.

    + + 
    <body>
+  <header>
+    ...
+    <search title="Website">
+      ...
+    </search>
+  </header>
+  <main>
+    <h1>Hotels near your location</h1>
+     <search>
+       <h2>Filter results</h2>
+       ...
+     </search>
+     <article>
+      <!-- search result content -->
+    </article>
+  </main>
+</body>
    +
    +

    The div element

    @@ -112539,12 +112650,13 @@ dictionary StorageEventInit : EventInit {

    A p element's end tag may be omitted if the p element is immediately followed by an address, article, - aside, blockquote, details, div, dl, - fieldset, figcaption, figure, footer, form, h1, h2, - h3, h4, h5, h6, header, - hgroup, hr, main, menu, nav, - ol, p, pre, section, table, or - ul element, or if there is no more content in the parent element and the parent + aside, blockquote, details, div, + dl, fieldset, figcaption, figure, + footer, form, h1, h2, h3, + h4, h5, h6, header, hgroup, + hr, main, menu, nav, ol, + p, pre, search, section, table, + or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.

    @@ -114826,23 +114938,23 @@ dictionary StorageEventInit : EventInit { figure, footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, header, hgroup, - hr, html, iframe, + hr, html, iframe, img, input, keygen, li, link, listing, main, marquee, menu, meta, nav, noembed, noframes, - noscript, object, ol, p, param, - plaintext, pre, script, section, - select, source, style, summary, - table, tbody, td, template, - textarea, tfoot, th, thead, - title, tr, track, ul, wbr, - xmp; MathML mi, MathML mo, - MathML mn, MathML ms, MathML - mtext, and MathML annotation-xml; and SVG - foreignObject, SVG desc, and SVG - title.

    + noscript, object, ol, p, + param, plaintext, pre, script, + search, section, select, source, + style, summary, table, tbody, + td, template, textarea, tfoot, + th, thead, title, tr, track, + ul, wbr, xmp; MathML mi, + MathML mo, MathML mn, MathML + ms, MathML mtext, and MathML + annotation-xml; and SVG foreignObject, SVG + desc, and SVG title.

    An image start tag token is handled by the tree builder, but it is not in this list because it is not an element; it gets turned into an img @@ -118955,7 +119067,7 @@ document.body.appendChild(text);

    A start tag whose tag name is one of: "address", "article", "aside", "blockquote", "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header", - "hgroup", "main", "menu", "nav", "ol", "p", "section", "summary", "ul"
    + "hgroup", "main", "menu", "nav", "ol", "p", "search", "section", "summary", "ul"
    An end tag whose tag name is one of: "address", "article", "aside", "blockquote", "button", "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", - "header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre", "section", "summary", - "ul"
    + "header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre", "search", "section", + "summary", "ul"

    If the stack of open elements does not have an element in scope that is an HTML @@ -123429,7 +123541,7 @@ html, body { display: block; } 

    @namespace url(http://www.w3.org/1999/xhtml);
 
 address, blockquote, center, dialog, div, figure, figcaption, footer, form,
-header, hr, legend, listing, main, p, plaintext, pre, xmp {
+header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
   display: block;
 }
 
@@ -123731,8 +123843,8 @@ br[clear=all i], br[clear=both i] { clear: both; }
    address, blockquote, center, div, figure, figcaption, footer, form, header, hr, legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2, -h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead, -tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output, +h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col, +thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output, [dir=ltr i], [dir=rtl i], [dir=auto i] { unicode-bidi: isolate; } @@ -123768,8 +123880,8 @@ input[dir=auto i]:is([type=search i], [type=tel i], [type=url i], address, blockquote, center, div, figure, figcaption, footer, form, header, hr, legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2, -h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead, -tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i], +h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col, +thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i], [dir=rtl i], [dir=auto i], *|* { unicode-bidi: bidi-override; } @@ -129631,6 +129743,17 @@ interface External { HTMLScriptElement + + search + Container for search controls + flow; + palpable + flow + flow + globals + HTMLElement + + section Generic document or application section @@ -130172,6 +130295,7 @@ interface External { s; samp; script; + search; section; select; slot; @@ -130452,6 +130576,7 @@ interface External { ruby; s; samp; + search; section; select; small; @@ -132378,6 +132503,10 @@ interface External { samp HTMLElement + + search + HTMLElement + script HTMLScriptElement : HTMLElement