在列表中,可编辑项的正确HTML语义

11 浏览
0 Comments

在列表中,可编辑项的正确HTML语义

我目前面临着一个以前从未面对过的情况。我需要创建一个用户列表,列表中的每个项目都是可编辑的,并且会自动发送数据到我们的后端。

我可以给出的基本示例如下:

这只是一个简单的例子,但基本上是这个结构,正如你所看到的,我没有添加任何表单,这就是我的问题所在。

根据我对语义化HTML的了解,每个项目都应该是一个表单:

或者我会为整个列表创建一个单独的表单:

但是,在我来这里询问之前,我试图查看一些网站,比如YouTube、Twitch、Gmail,甚至是这里的Stack Overflow,看看它们是如何做的,我在Twitch上发现了这个,让我想知道是否需要一个表单。如果你在Twitch上点击你的头像,会给你两个选项:

Online and share activity sliders on twitch

检查页面,我只能找到每个选项的标签和输入框,但在剩下的HTML中,我没有找到任何表单或带有表单角色的div。

所以我在考虑,将输入框放在任何表单之外是否符合语义化的要求?如果是的话,有什么条件需要有表单或没有表单?

因为据我所理解,只要需要提交数据到某个地方,你就应该出于语义化的原因使用表单。

0
0 Comments

在这段内容中,作者讨论了HTML中可编辑项目列表的正确语义。作者指出,虽然将标签放在

或带有表单角色的

中是一种最佳实践,但有时并不需要这样做。可以通过JS创建元素并处理输入。作者认为是否使用

并没有明确的规则,以前会经常与type="submit"一起使用,以便在URL中轻松传递数据,但使用AJAX和Web框架后不再需要这样做,而且action属性可能会让人误解。作者还提到,检查HTML时找不到

或等效角色的另一个原因是,大多数(如果不是全部)这些平台都是在各种JavaScript框架(如React,Angular等)之上运行的,角色是通过js注入的。

从以上内容可以看出,出现未找到

或等效角色的原因有两个。首先,使用AJAX和Web框架后,不再需要使用

来传递数据,因此可能会省略

标签。其次,许多平台使用JavaScript框架来构建,这些框架会通过JS注入角色,因此在HTML检查中找不到

或等效角色。

要解决这个问题,可以通过以下两种方法之一来处理可编辑项目列表:

1. 在

标签中放置标签,以确保符合HTML的语义标准。这是一种最佳实践,可以保持代码的一致性和易读性。

2. 如果不需要传递数据或使用

标签,可以直接在JS中创建元素并处理输入。这种方法适用于不需要将数据传递到URL或使用AJAX和Web框架的情况。

总之,根据具体情况,可以选择使用

标签或直接在JS中处理可编辑项目列表的输入。这取决于是否需要传递数据以及是否使用了AJAX和Web框架。

0