通过CSS将“必需”文本添加到HTML表单

Question

我的<form>看起来像这样：

<form>
  <input type="text" name="name" id="name" /><span class="required"></span>
</form>

我想要做的是在*元素中显示一些文字，例如Required或<span>，而不是“硬编码”我需要的每个地方的文字文字，所以表格看起来像这样：

[input box] Required

我搜索了一下，发现它可以通过使用content的CSS样式完成，例如：

.required:before
{
  content: "aaaa"
}

但是，我应该使用这种技术（例如，它是否在每个主要浏览器中都受支持）还是有更优选的方式来做这种事情？

由于

更新 Ps。我不想为此使用JavaScript，只需简单的CSS。

Answer 1

请检查：Content

同时检查这种兼容性

请勿使用

我觉得我们根本不应该使用内容声明。它向页面添加内容，CSS用于向页面添加演示文稿，而不是内容。因此，如果您想动态生成内容，我觉得您应该使用JavaScript。 CSS是这项工作的错误工具。

Answer 2

我同意在大多数情况下使用CSS添加内容是不对的。但是，在视觉上突出显示所需的字段，我觉得这样做完全没问题。

content得不到足够广泛的支持（IE并不支持所有IIRC）。

可以做的是“必需”范围包含包含“必需”文本或星号的背景图像。使用图形文本有一些缺点，但没有一个基于jQuery的解决方案也没有。

Answer 3

你可以使用jQuery来做这件事。

jQuery是一个javascript库：

在标题中写入此代码

$(document).ready(function(){
  $(span[class=required]).innerText='<sometext>';
});

但你必须下载这个插件。但你也可以使用javascript

Answer 4

绝对不应该使用CSS来做到这一点！天啊！ ：P

如上所述使用javascript - 但如果你想避免这种情况，那么你必须使用服务器端脚本 - 所以学习一些PHP。

Answer 5

正如其他人已经注意到CSS可以做到这一点，但它没有得到完全支持，也不是解决这个问题的正确方法。如果显示“必需”文本绝对至关重要，则必须将其添加到HTML中。 Javascript在某种程度上是一个合适的解决方案，但前提是您无法编辑源代码。虽然可以使用JS生成内容，但显然只会启用启用JavaScript的人，这会增加维护的复杂性。当有人在五年内在页面上进行代码更改时，他们最初会想知道“必需”文本的来源。

另一个相当快速且非常简洁的选择是为跨度提供星号的背景图像，并在表单上方包含一个键：

* required field

Answer 6

我认为你应该关注JavaScript。向具有特定类/ ID的标签添加内容是JavaScript的一个用途。有许多库可以加快开发时间--jQuery，Prototype，Dojo和MooTools。

Answer 7

你真的应该在HTML中添加这个文本。其他解决方案无法访问 - 例如，没有视力的用户不会意识到该字段是必需的。