包装搜索区域的最佳语义方式是什么?

发布于 2024-10-08 11:56:29 字数 1432 浏览 5 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

倒数 2024-10-15 11:56:29

我知道这个问题已经有一个选定的答案,但它在我的 Google 搜索“语义搜索表单”中排名如此之高,以至于我觉得有必要贡献我认为稍微更好的答案,从语义上和标准的角度来看。

<section role="search">
    <form action="#" method="get">
        <fieldset>
            <legend>Search this website:</legend>
            <label for="s">
                <input type="search" name="s" id="s" placeholder="Search..." maxlength="200" />
            </label>
            <button type="submit" title="Search this website now">Submit</button>
        </fieldset>
    </form>
</section>

当然,我做了一系列假设,并使用一些默认值(action、get、输入的 id 和名称等)填充 HTML,并且没有元素的类名(我总是倾向于使用通用类名)元素名称或者,但愿不会,ID),但你应该适应你自己的需要。

例如,除了上面的出色贡献之外,还添加了一些内容:任何表单的第一个子级都应始终是

标记,并附加一个

(可见与否 - https://www.w3.org/TR/WCAG20- TECHS/H71.html ),并且所有 标签都应该通过 for

I am aware this question already has a chosen answer, but it ranked so high in my Google search for "semantic search form" that I feel the need to contribute what I believe to be a slightly better answer, semantically and from a standards standpoint.

<section role="search">
    <form action="#" method="get">
        <fieldset>
            <legend>Search this website:</legend>
            <label for="s">
                <input type="search" name="s" id="s" placeholder="Search..." maxlength="200" />
            </label>
            <button type="submit" title="Search this website now">Submit</button>
        </fieldset>
    </form>
</section>

Of course, I made a series of assumptions and populated the HTML with some default values (action, get, the id and name of the input, etc) and with no classnames for the elements (which I always tend to use in favor of generic element names or, Heaven forbid, IDs) but you should adapt to your own needs.

For example, some additions on top of the excellent contributions above: the first child of any form should always be a <fieldset> tag and have a <legend> attached (visible or not - https://www.w3.org/TR/WCAG20-TECHS/H71.html ), and all <input> tags should have a connected <label> tag through the for and id properties (https://www.w3.org/TR/WCAG20-TECHS/H44.html - I find it easier to just wrap the input in the label so as not to forget connecting them). All call to action elements should have a title (for SEO and usability, to reinforce the action the user is about to make just before she makes it), etc.

花间憩 2024-10-15 11:56:29

HTML5 规范对于 section 元素是这样规定的:

角色必须是区域、文档、
应用程序、内容信息、主要、
搜索、警报、对话框、alertdialog、
状态或日志

所以我会使用它。

The HTML5 specification says this about the section element:

Role must be either region, document,
application, contentinfo, main,
search, alert, dialog, alertdialog,
status, or log

so I would use that.

哥,最终变帅啦 2024-10-15 11:56:29

怎么样:

<form>
   <input type="search" name="" value="" />
   <input type="submit" value="Search" />
</form>

How about:

<form>
   <input type="search" name="" value="" />
   <input type="submit" value="Search" />
</form>
风向决定发型 2024-10-15 11:56:29
<section role="search">

role 属性是一个 ARIA 里程碑

一个地标区域,包含项目和对象的集合,这些项目和对象作为一个整体组合起来创建一个搜索工具。

<section role="search">

The role attribute is an ARIA landmark:

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

你在看孤独的风景 2024-10-15 11:56:29

从 2023 年 3 月开始, 元素已进入规范:

搜索元素代表文档或应用程序的一部分
包含一组表单控件或与执行相关的其他内容
搜索或过滤操作。这可能是网络搜索
网站或应用程序;一种搜索或过滤搜索结果的方法
当前网页;或全球或互联网范围内的搜索功能。

来源:https://html.spec.whatwg。 org/multipage/grouping-content.html#the-search-element

使用示例:

<header>
  <h1>Movie website</h1>
  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

来源:
https://developer.mozilla.org/en-US/ docs/Web/HTML/Element/search

非常好的支持:caniuse.com(目前79%)

Starting March 2023 the <search> element made its way into the spec:

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.

Source: https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element

Example of how it's used:

<header>
  <h1>Movie website</h1>
  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search

Pretty good support: caniuse.com (currently 79%)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文