代码之家  ›  专栏  ›  技术社区  ›  Zabba fl00r

通过CSS将__Required_文本添加到HTML表单

  •  6
  • Zabba fl00r  · 技术社区  · 14 年前

    我有一个 <form> 看起来是这样的:

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

    我要做的是显示一些文本,例如 * Required <span> 元素,而不是“硬编码”每一个这样的地方的文本,我需要的文本,使表单看起来像这样:

    [input box] Required
    

    我搜索了一下,发现可以用CSS样式 content 例如:

    .required:before
    {
      content: "aaaa"
    }
    

    但是,我应该使用这种技术(例如,在每个主要浏览器中都支持它)还是有一种更好的方法来做这种事情?

    谢谢

    更新 我不想用JavaScript来做这个,只是简单的CSS。

    7 回复  |  直到 14 年前
        1
  •  3
  •   Pekka    14 年前

    我同意在大多数情况下使用CSS添加内容是不正确的。但是,用视觉突出显示一个我认为完全可以这样做的必需字段。

    content 支持不够广泛(即根本不支持IIRC)。

    你什么 能够 Do是让“必需”范围包含包含“必需”文本或星号的背景图像。使用图形文本有一些缺点,但是基于jQuery的解决方案也没有这样的缺点。

        2
  •  5
  •   Pranay Rana    14 年前

    检查以下内容: content

    请检查此兼容性

    不要使用

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

    请检查此兼容性 alt text

    不要使用

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

        3
  •  2
  •   Thomas Clayson    14 年前

    绝对不应该用CSS来完成这个任务!天哪!P

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

        4
  •  2
  •   Felix Kling    14 年前

    你可以使用jquery来处理这个问题。

    jquery是一个javascript库:

    在标题中写入此代码

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

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

        5
  •  2
  •   Mark Chorley    14 年前

    正如其他人所指出的,CSS可以做到这一点,但它并没有得到充分的支持,而且它也不是解决这个问题的正确方法。如果“必需”文本的出现是绝对关键的,那么您必须将其添加到HTML中。在某种程度上,JavaScript是一个合适的解决方案,但前提是您不能编辑源代码。虽然内容可以使用JS生成,但显然只有启用了JavaScript的人才能看到,这增加了维护的复杂性。当有人在五年的时间里在页面上进行代码更改时,他们开始想知道“必选”文本是从哪里来的。

    另一个相当快速和整洁的选择是给跨度一个星号的背景图像,并在表单上方包含一个键:

    * required field
    
        6
  •  1
  •   Extrakun    14 年前

    我觉得你应该看看javascript。将内容添加到具有特定类/id的标记中是Javascript的一个用途。有许多库可以加速开发时间——jquery、prototype、dojo和mootools。

        7
  •  1
  •   Paul D. Waite    14 年前

    您真的应该在HTML中添加此文本。其他的解决方案是“不可访问”的无视力用户(例如)不会意识到该字段是必需的。