Skip to content

Commit

Permalink
Add the <search> element
Browse files Browse the repository at this point in the history 
Closes #5811.

Co-authored-by: Scott O'Hara <[email protected]>
  • Loading branch information
@domenic @scottaohara
domenic and scottaohara committed Feb 14, 2022
1 parent 5b01d31 commit 303b37e
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 28 deletions.
1 change: 1 addition & 0 deletions images/content-venn.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
183 changes: 155 additions & 28 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11075,6 +11075,7 @@ console.assert(image.height === 200);</code></pre>
<li><code>s</code></li>
<li><code>samp</code></li>
<li><code>script</code></li>
<li><code>search</code></li>
<li><code>section</code></li>
<li><code>select</code></li>
<li><code>slot</code></li>
Expand Down Expand Up @@ -11376,6 +11377,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
<li><code>ruby</code></li>
<li><code>s</code></li>
<li><code>samp</code></li>
<li><code>search</code></li>
<li><code>section</code></li>
<li><code>select</code></li>
<li><code>small</code></li>
Expand Down Expand Up @@ -20099,7 +20101,114 @@ included with Exhibit B.

</div>

<h4>The <dfn element><code>search</code></dfn> element</h4>

<dl class="element">
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dd><span>Palpable content</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dt><span data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd><a href="https://w3c.github.io/html-aria/#el-search">For authors</a>.</dd>
<dd><a href="https://w3c.github.io/html-aam/#el-search">For implementers</a>.</dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>

<p>The <code>search</code> element <span>represents</span> 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.</p>

<p class="note">It's not appropriate to use the <code>search</code> 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.</p>

<div class="example">
<p>In the following example, the author is including a search form within the
<code>header</code> of the web page:</p>

<pre><code class="html">&lt;header>
&lt;h1>&lt;a href="/">My fancy blog&lt;/a>&lt;/h1>
...
&lt;search>
&lt;form action="search.php">
&lt;label for="query">Find an article&lt;/label>
&lt;input id="query" name="q" type="search">
&lt;button type="submit">Go!&lt;/button>
&lt;/form>
&lt;/search>
&lt;/header></code></pre>
</div>

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

<pre><code class="html">&lt;search>
&lt;label>
Find and filter your query
&lt;input type="search" id="query">
&lt;/label>
&lt;label>
&lt;input type="checkbox" id="exact-only">
Exact matches only
&lt;/label>

&lt;section>
&lt;h3>Results found:&lt;/h3>
&lt;ul id="results">
&lt;li>
&lt;p>&lt;a href="services/consulting">Consulting services&lt;/a>&lt;/p>
&lt;p>
Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
&lt;/p>
&lt;/li>
...
&lt;/ul>
&lt;!--
when a query returns or filters out all results
render the no results message here
-->
&lt;output id="no-results">&lt;/output>
&lt;/section>
&lt;/search></code></pre>
</div>

<div class="example">
<p>In the following example, the page has two search features. The first is located in the web page's
<code>header</code> and serves as a global mechanism to search the web site's content. Its purpose is
indicated by its specified <code>title</code> 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.</p>

<pre><code class="html">&lt;body>
&lt;header>
...
&lt;search title="Website">
...
&lt;/search>
&lt;/header>
&lt;main>
&lt;h1>Hotels near your location&lt;/h1>
&lt;search>
&lt;h2>Filter results&lt;/h2>
...
&lt;/search>
&lt;article>
&lt;!-- search result content -->
&lt;/article>
&lt;/main>
&lt;/body></code></pre>
</div>

<h4>The <dfn element><code>div</code></dfn> element</h4>

Expand Down Expand Up @@ -106631,12 +106740,13 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
<!-- </p> -->
<p>A <code>p</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted if the
<code>p</code> element is immediately followed by an <code>address</code>, <code>article</code>,
<code>aside</code>, <code>blockquote</code>, <code>details</code>, <code>div</code>, <code>dl</code>,
<code>fieldset</code>, <code>figcaption</code>, <code>figure</code>, <code>footer</code>, <code>form</code>, <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>, <code>header</code>,
<code>hgroup</code>, <code>hr</code>, <code>main</code>, <code>menu</code>, <code>nav</code>,
<code>ol</code>, <code>p</code>, <code>pre</code>, <code>section</code>, <code>table</code>, or
<code>ul</code> element, or if there is no more content in the parent element and the parent
<code>aside</code>, <code>blockquote</code>, <code>details</code>, <code>div</code>,
<code>dl</code>, <code>fieldset</code>, <code>figcaption</code>, <code>figure</code>,
<code>footer</code>, <code>form</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>,
<code>h4</code>, <code>h5</code>, <code>h6</code>, <code>header</code>, <code>hgroup</code>,
<code>hr</code>, <code>main</code>, <code>menu</code>, <code>nav</code>, <code>ol</code>,
<code>p</code>, <code>pre</code>, <code>search</code>, <code>section</code>, <code>table</code>,
or <code>ul</code> element, or if there is no more content in the parent element and the parent
element is an <span data-x="HTML elements">HTML element</span> that is not an <code>a</code>,
<code>audio</code>, <code>del</code>, <code>ins</code>, <code>map</code>, <code>noscript</code>,
or <code>video</code> element, or an <span>autonomous custom element</span>.</p>
Expand Down Expand Up @@ -108919,23 +109029,23 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
<code>figure</code>, <code>footer</code>, <code>form</code>, <code>frame</code>,
<code>frameset</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
<code>h5</code>, <code>h6</code>, <code>head</code>, <code>header</code>, <code>hgroup</code>,
<code>hr</code>, <code>html</code>, <code>iframe</code>, <!-- <code>image</code>, (commented out
because this isn't an element that can end up on the stack, so it doesn't matter) -->
<code>hr</code>, <code>html</code>, <code>iframe</code>, <!-- <code>image</code>, (commented
out because this isn't an element that can end up on the stack, so it doesn't matter) -->
<code>img</code>, <code>input</code>, <code>keygen</code>, <code>li</code>, <code>link</code>,
<code>listing</code>, <code>main</code>, <code>marquee</code>, <code>menu</code>,
<code>meta</code>, <code>nav</code>, <code>noembed</code>, <code>noframes</code>,
<code>noscript</code>, <code>object</code>, <code>ol</code>, <code>p</code>, <code>param</code>,
<code>plaintext</code>, <code>pre</code>, <code>script</code>, <code>section</code>,
<code>select</code>, <code>source</code>, <code>style</code>, <code>summary</code>,
<code>table</code>, <code>tbody</code>, <code>td</code>, <code>template</code>,
<code>textarea</code>, <code>tfoot</code>, <code>th</code>, <code>thead</code>,
<code>title</code>, <code>tr</code>, <code>track</code>, <code>ul</code>, <code>wbr</code>,
<code>xmp</code>; <span>MathML <code>mi</code></span>, <span>MathML <code>mo</code></span>,
<span>MathML <code>mn</code></span>, <span>MathML <code>ms</code></span>, <span>MathML
<code>mtext</code></span>, and <span>MathML <code>annotation-xml</code></span>; and <span>SVG
<code>foreignObject</code></span>, <span>SVG <code>desc</code></span>, and <span>SVG
<code>title</code></span>.</p> <!-- we could actually put all non-HTML elements in this list, I
think -->
<code>noscript</code>, <code>object</code>, <code>ol</code>, <code>p</code>,
<code>param</code>, <code>plaintext</code>, <code>pre</code>, <code>script</code>,
<code>search</code>, <code>section</code>, <code>select</code>, <code>source</code>,
<code>style</code>, <code>summary</code>, <code>table</code>, <code>tbody</code>,
<code>td</code>, <code>template</code>, <code>textarea</code>, <code>tfoot</code>,
<code>th</code>, <code>thead</code>, <code>title</code>, <code>tr</code>, <code>track</code>,
<code>ul</code>, <code>wbr</code>, <code>xmp</code>; <span>MathML <code>mi</code></span>,
<span>MathML <code>mo</code></span>, <span>MathML <code>mn</code></span>, <span>MathML
<code>ms</code></span>, <span>MathML <code>mtext</code></span>, and <span>MathML
<code>annotation-xml</code></span>; and <span>SVG <code>foreignObject</code></span>, <span>SVG
<code>desc</code></span>, and <span>SVG <code>title</code></span>.</p> <!-- we could actually
put all non-HTML elements in this list, I think -->

<p class="note">An <code data-x="">image</code> 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 <code>img</code>
Expand Down Expand Up @@ -113058,7 +113168,7 @@ document.body.appendChild(text);
<!-- the normal ones -->
<dt>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"</dt>
"hgroup", "main", "menu", "nav", "ol", "p", "search", "section", "summary", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is as close to what IE does as I
can get without doing the non-tree DOM nonsense, and thus should actually afford better
Expand Down Expand Up @@ -113290,8 +113400,8 @@ document.body.appendChild(text);
<!-- the normal ones -->
<dt>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"</dt>
"header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre", "search", "section",
"summary", "ul"</dt>
<dd>
<p>If the <span>stack of open elements</span> does not <span data-x="has an element in
scope">have an element in scope</span> that is an <span data-x="HTML elements">HTML
Expand Down Expand Up @@ -117525,7 +117635,7 @@ html, body { display: block; }</code></pre>
<pre><code class="css">@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;<!-- see also unicode-bidi: isolate rules-->
}

Expand Down Expand Up @@ -117804,8 +117914,8 @@ br[clear=all i], br[clear=both i] { clear: both; }</code></pre>

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; <!-- anything that's similar to display:block, plus <bdi>, <output>, and dir="" -->
}
Expand Down Expand Up @@ -117841,8 +117951,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;
}
Expand Down Expand Up @@ -123639,6 +123749,17 @@ interface <dfn interface>External</dfn> {
<td><code>HTMLScriptElement</code></td>
</tr>

<tr>
<th><code>search</code></th>
<td>Container for search controls</td>
<td><span data-x="Flow content">flow</span>;
<span data-x="Palpable content">palpable</span></td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
</tr>

<tr>
<th><code>section</code></th>
<td>Generic document or application section</td>
Expand Down Expand Up @@ -124179,6 +124300,7 @@ interface <dfn interface>External</dfn> {
<code>s</code>;
<code>samp</code>;
<code>script</code>;
<code>search</code>;
<code>section</code>;
<code>select</code>;
<code>slot</code>;
Expand Down Expand Up @@ -124470,6 +124592,7 @@ interface <dfn interface>External</dfn> {
<code>ruby</code>;
<code>s</code>;
<code>samp</code>;
<code>search</code>;
<code>section</code>;
<code>select</code>;
<code>small</code>;
Expand Down Expand Up @@ -126348,6 +126471,10 @@ interface <dfn interface>External</dfn> {
<td> <code>samp</code>
<td> <code>HTMLElement</code>

<tr>
<td> <code>search</code>
<td> <code>HTMLElement</code>

<tr>
<td> <code>script</code>
<td> <code>HTMLScriptElement</code> : <code>HTMLElement</code>
Expand Down

0 comments on commit 303b37e

Please sign in to comment.