Question

这是一个纯粹的语义问题。

在我的网站上，我有一张留言簿，您可以在其中发表评论并进行编辑。对于发布或编辑您的评论，有两种非常相似的形式。 Javascript将选择是否可以显示发布表单或编辑表单（因为所有表格都是异步发生的）。这有两种形式：

<form class="comment">
   <h1>Comment</h1>
   <label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
   <label class="title_error error">Required.</label>
   <label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
   <textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
   <label class="content_error error">Required.</label>
   <input type="submit" value="Comment" onclick="return addComment($(this).parent());" />
</form>

<form class="edit">
   <h1>Edit your comment</h1>
   <label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
   <label class="title_error error">Required.</label>
   <label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
   <textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
   <label class="content_error error">Required.</label>
   <input type="hidden" name="id">
   <input type="submit" value="Edit" onclick="return editComment($(this).parent());" />
</form>

首先，我想优化这些表单，以便它们在语义上是最好的HTML5。那么您认为，如果表单中的所有内容都包含在fieldset中，为什么？ h1 legend或label不应该label？错误消息是合法的，他们现在是span还是他们应该class="only_for_commenting"？

但我的主要问题是：由于这些形式如此相似，我可以用它做三件事：

将表单分开并使javascript隐藏一个并在正确的时间显示另一个（如上面的代码所示）
将表单合并为一种形式，提供一些标记class="only_for_editing"和其他fieldset（如下面的代码所示）
将表单合并为一种形式，根据应显示的时间将标记包装在<form> <h1 class="only_for_commenting">Comment</h1> <h1 class="only_for_editing" style="display:none;">Edit your comment</h1> <label>Title: <input type="text" name="title" size="50" maxlength="60" /></label> <label class="title_error error">Required.</label> <label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label> <textarea name="content" cols="60" rows="8" maxlength="1500"></textarea> <label class="content_error error">Required.</label> <input class="only_for_editing" type="hidden" name="id"> <input class="only_for_commenting" type="submit" value="Reageer" onclick="return addComment($(this).parent());" /> <input class="only_for_editing" type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" /> </form>中（如最底部的代码所示）

使用类组合：

<form>
   <fieldset class="only_for_commenting">
      <h1>Comment</h1>
   </fieldset>
   <fieldset class="only_for_editing">
      <h1 style="display:none;">Edit your comment</h1>
   </fieldset>
   <fieldset class="for_both">
      <label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
      <label class="title_error error">Required.</label>
      <label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
      <textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
      <label class="content_error error">Required.</label>
   </fieldset>
   <fieldset class="only_for_editing">
      <input type="hidden" name="id">
      <input type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" />
   </fieldset>
   <fieldset class="only_for_commenting">
      <input type="submit" value="Reageer" onclick="return addComment($(this).parent());" />
   </fieldset>
</form>

使用字段集合并：编辑：我一直认为此解决方案是最差的

fieldset

那么哪个选项在语义上最好？

编辑：所以我还在考虑三种不同的解决方案。我可以有两个单独的表单（第一个代码块），或者这两个表单放在一个form标记中的不同{{1}}标记中，或者我可以有一个组合表单和每个输入的类，所以javascript可以隐藏一个类并显示另一个类（第二个代码块）。为了能够在它们之间做出选择，我想要一些建议。三个选项中的哪一个是真的：

评论和编辑表单在语义上是两种完全不同的形式
评论和编辑表单是同一表单的不同字段集
评论和编辑表格实际上被视为同一种形式

Answer 1

好的语义总是有争议的，但我认为你可以尝试的是将表单包装在不同的字段集中，因为这两种表单的目的是不同的，并且根据我的意思是语义点。您可以为表单提供不同的类名并相应地切换。

关于错误消息查询，您应该使用标签，就好像屏幕阅读器就位一样，它比非标签元素更有可能检测到错误。

但正如我所说的语义总是值得商榷的，你最终可以选择对你更有意义的东西。

HTML表单语义

1 个答案: