当然,我做了一系列假设,并使用一些默认值(action、get、输入的 id 和名称等)填充 HTML,并且没有元素的类名(我总是倾向于使用通用类名)元素名称或者,但愿不会,ID),但你应该适应你自己的需要。
例如,除了上面的出色贡献之外,还添加了一些内容:任何表单的第一个子级都应始终是
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.
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.
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.
发布评论
评论(5)
我知道这个问题已经有一个选定的答案,但它在我的 Google 搜索“语义搜索表单”中排名如此之高,以至于我觉得有必要贡献我认为稍微更好的答案,从语义上和标准的角度来看。
当然,我做了一系列假设,并使用一些默认值(action、get、输入的 id 和名称等)填充 HTML,并且没有元素的类名(我总是倾向于使用通用类名)元素名称或者,但愿不会,ID),但你应该适应你自己的需要。
例如,除了上面的出色贡献之外,还添加了一些内容:任何表单的第一个子级都应始终是
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.
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 thefor
andid
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.HTML5 规范对于
section
元素是这样规定的:所以我会使用它。
The HTML5 specification says this about the
section
element:so I would use that.
怎么样:
How about:
role
属性是一个 ARIA 里程碑:The
role
attribute is an ARIA landmark:从 2023 年 3 月开始,
元素已进入规范:来源:https://html.spec.whatwg。 org/multipage/grouping-content.html#the-search-element
使用示例:
来源:
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:Source: https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element
Example of how it's used:
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search
Pretty good support: caniuse.com (currently 79%)