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

【问题标题】：Adding “required” text to an HTML form via CSS通过 CSS 将“必需”文本添加到 HTML 表单
【发布时间】：2011-04-10 02:51:08
【问题描述】：

我有一个<form>，看起来像这样：

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

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

[input box] Required

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

.required:before
{
  content: "aaaa"
}

但是，我应该使用这种技术（例如，每个主流浏览器都支持它）还是有更好的方法来做这种事情？

谢谢

更新我不想为此使用 JavaScript，只是使用纯 CSS。

【问题讨论】：

标签： html css forms

【解决方案1】：

检查这个：Content

还检查此兼容性

不要使用

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

【讨论】：

微软再次出击... :(
但是如果 CSS 仅用于演示，那么 CSS 具有 content 属性的原因是什么？我搜索了 W3C (w3.org/TR/2009/CR-CSS2-20090908/generate.html#propdef-content)，它说：“生成的内容不会改变文档树。特别是，它不会反馈给文档语言处理器（例如，用于重新解析）。”所以这意味着它是真正的“展示”，而不是向页面添加“内容”，对吧？
我不认为我赞同这个不应该使用它的论点，因为它在页面中添加了“内容”。添加一点“必需”的宣传内容只不过是 CSS 已经传达的背景图像、图标或信息颜色。它不应该用于插入段落，但对于这样的事情，我认为它在语义上是完全合适的。也就是说... IE 不太支持它。我要做的是使用该死的标签，然后我们 JS 只在损坏的浏览器中修复它。
@Mark：“添加一点“必需”的宣传语只不过是 CSS 已经传达的背景图像、图标或信息颜色而已。”如果 CSS 是通知用户该字段是必填字段的唯一方式，那么它就是内容，不应该在 CSS 中。
@Paul：也许吧。但它仍然不是关键任务。大概您对表单进行了某种验证。这一切都只是洒水。

【解决方案2】：

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

content 支持不够广泛（IE 完全不支持 IIRC）。

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

【讨论】：

请参阅我上面的评论@Pranay Rana。如果我使用“背景图像”属性，它与“内容”属性是否相同，唯一的区别是在“内容”的情况下我添加一个字符串，而在“背景图像”我添加一个图片？两者都不是“内容”，但两者都添加了一些视觉呈现的“数据”，对吧？
@Zabba 严格来说，是的。它与分离内容和表示的哲学都不同步。但是，如果这对您有用，考虑到所有缺点（图形文本在屏幕阅读器中不可读，无法打印等），我倾向于说没关系。
@Zabba：不同的是background-image被广泛支持。
接受；我认为@Pranay Rana 的评论中的@Mark 也有一个很好的观点。总之，我认为最好使用@Pekka 的解决方案来使用 CSS 内容属性，然后为可怜的 IE 用户使用 JavaScript :)
添加一个词来表示某物的类型不应被视为内容。如果这恰好是您的约定，它只提供背景红色的信息。这是一个文体选择，即使它恰好是字母。它属于css。

【解决方案3】：

绝对不应该使用 CSS 来做到这一点！上帝不！ :p

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

【讨论】：

我不同意这种特殊情况：开始使用服务器端语言来构建表单比使用一点 CSS 来呈现星号要麻烦得多。不过，总的来说，您是对的。
不，很公平 - 我确实说过要使用 javascript，但解决方法是服务器端脚本。

【解决方案4】：

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

jQuery 是一个 javascript 库：

在标题中写下这段代码

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

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

【讨论】：

这是一个完美的解决方案，即使有代码示例。：+1。考虑使用“you”而不是“u”，它会让你的写作风格看起来更成熟
对我不起作用（语法错误）。我可以让它工作的一种方法是： $(document).ready(function(){ $('span.required').text('*'); });

【解决方案5】：

正如其他人所指出的那样，CSS 可以做到这一点，但它并未得到完全支持，而且它也不是解决此问题的正确方法。如果“必需”文本的出现绝对重要，那么您必须将其添加到 HTML 中。 Javascript 在某种程度上是一个合适的解决方案，但前提是您无法编辑源代码。虽然可以使用 JS 生成内容，但它显然只会出现在启用 JavaScript 的人面前，而且它增加了维护的复杂性。当有人在五年后看到页面上的代码更改时，他们最初会想知道“必需”文本来自哪里。

另一个相当快速和简洁的选项是给跨度一个星号的背景图像，并在表单上方包含一个键：

* required field

【讨论】：

我喜欢“当有人在五年后查看页面以进行代码更改时”的部分 - 谢谢，没有想到这个角度。

【解决方案6】：

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

【讨论】：

感谢 Extrakun，我应该提到我想为此避免使用 JavaScript。更新了问题。
我认为除了 JavaScript 之外没有任何其他的客户端解决方案。然后你可能想看看服务器端编程，它允许你使用模板和一些简单的编程来复制内容。

【解决方案7】：

您确实应该在 HTML 中添加此文本。其他解决方案无法访问——例如，盲人用户不会知道该字段是必需的。

【讨论】：