html - 用粗体显示必填字段

Question

我有一个 HTML 表单。我想通过使它们加粗来表明某些字段是必需的。原则上，这应该进入 CSS 而不是 HTML？你会怎么做？

<form action="doit" id="doit" method="post">
    <label>
        Name
        <input id="name" name="name" type="text" />
    </label>
    <label>
        Phone number
        <input id="phone" name="phone" type="text" />
    </label>
    <label>
        Year
        <input id="year" name="year" type="text" />
    </label>
</form>

Answer 1

就在我的脑海中，我认为如果您愿意使用 HTML5 并使用该<input type="text" name="year" required>属性，那么您应该能够做到：

input:required{
   font-weight:bold;
}

当然，你可以在这里疯狂，开始在边界和各种东西上扔东西，让它真正脱颖而出。

Answer 2

奇点的答案是完全有效的。为了完整起见，如果您不愿意使用 HTML5 的required属性，我建议将同名的类添加到所需的输入中。

<input type="text" name="firstname" class="required">

input.required {
  font-weight: bold;
}

您可以在执行规则的 Javascript 中进一步将该类用作选择器。

$(form).submit(function() {
  $('input.required').each(function() {
     if ($(this).val() === '') return false;
  });
});

要回答您提出的另一个问题：该bold指令应该放在 CSS 中，因为它纯粹是展示性的。