如何在 <input> 元素内创建标签？
Posted
技术标签:
【中文标题】如何在 <input> 元素内创建标签？【英文标题】：How to create a label inside an <input> element? 【发布时间】：2010-10-21 08:32:00 【问题描述】：我想在输入元素中插入描述性文本，当用户点击它时会消失。
我知道这是一个很常见的技巧，但我不知道该怎么做..
什么是最简单/更好的解决方案？
【问题讨论】：
郑重声明，Tex 建议的attardi.org/labels 解决方案实际上比 Cory Walker 的解决方案更好。 糟糕的用户体验，一次又一次的证明。 图片无效。从帖子中删除。在revision 3 中仍然可用。 【参考方案1】：<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
一个更好的例子是 SO 搜索按钮！我就是从那里得到这个代码的。查看页面源代码是一个很有价值的工具。
【讨论】：
稍微扩展您的解决方案： 您可以使用 defaultValue 属性，因此您只需在代码中写入标签文本一次（在 value 属性中），而不是三次：【参考方案2】：常见的做法是使用默认值作为标签，然后在字段获得焦点时将其移除。
我真的不喜欢这种方法，因为它会影响可访问性和可用性。
相反，我将从使用字段旁边的标准元素开始。
然后，如果 javascript 处于活动状态，则在祖先元素上设置一个类，这会导致应用一些新样式：
相对定位一个包含输入和标签的div 绝对定位标签 将输入绝对定位在标签顶部 删除输入的边框并将其背景颜色设置为透明然后，每当输入失去焦点时，我都会测试输入是否有值。如果有，请确保祖先元素有一个类（例如“隐藏标签”），否则确保它没有那个类。
只要输入获得焦点，就设置该类。
样式表会在选择器中使用该类名来隐藏标签（通常使用文本缩进：-9999px）。
这种方法为所有用户提供了良好的体验，包括禁用 JS 的用户和使用屏幕阅读器的用户。
【讨论】：
【参考方案3】：这是一个简单的例子，它所做的只是覆盖一个图像（用你想要的任何措辞）。我在某处看到了这种技术。我正在使用原型库，因此如果使用其他内容，您需要进行修改。在 window.load 之后加载图像，如果禁用 javascript，它会优雅地失败。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
<meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css" >
input.searcher
background-image: url(/images/search_back.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: center;
</style>
<script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
<input type="text" id="q" name="q" value="" />
<script type="text/javascript" language="JavaScript" >
// <![CDATA[
function f(e)
$('q').removeClassName('searcher');
function b(e)
if ( $F('q') == '' )
$('q').addClassName('searcher');
Event.observe( 'q', 'focus', f);
Event.observe( 'q', 'blur', b);
Event.observe( window, 'load', b);
// ]]>
</script>
</body>
</html>
【讨论】：
【参考方案4】：在我看来，最好的解决方案既不涉及图像，也不涉及使用输入的默认值。相反，它看起来有点像 David Dorward 的解决方案。
对于没有 javascript 的屏幕阅读器和用户来说，它很容易实现并且可以很好地降级。
看看这里的两个例子： http://attardi.org/labels/
我通常在表单上使用第二种方法（labels2）。
【讨论】：
在透明输入后面带有标签的解决方案实际上是我见过的最干净的实现。 非常好的解决方案 - 更好地控制外观和感觉，无需担心验证/表单后干扰。 谢谢！寻找满足可访问性要求的解决方案。使用 value 和 placeholder 属性显然还不够。 -_- 开发者已经贬值了这个github.com/steadicat/labels【参考方案5】：使用这个
风格：
<style type="text/css">
.defaultLabel_on color:#0F0;
.defaultLabel_off color:#CCC;
</style>
html:
javascript：
function defaultLabelClean()
inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++)
if (inputs[i].value == inputs[i].getAttribute("innerLabel"))
inputs[i].value = '';
function defaultLabelAttachEvents(element, label)
element.setAttribute("innerLabel", label);
element.onfocus = function(e)
if (this.value==label)
this.className = 'defaultLabel_on';
this.value = '';
element.onblur = function(e)
if (this.value=='')
this.className = 'defaultLabel_off';
this.value = element.getAttribute("innerLabel");
if (element.value=='')
element.className = 'defaultLabel_off';
element.value = element.getAttribute("innerLabel");
defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");
记得在提交表单之前调用 defaultLabelClean() 函数。
干得好
【讨论】：
【参考方案6】：如果您使用的是 HTML5，则可以使用 placeholder 属性。
<input type="text" name="user" placeholder="Username">
【讨论】：
另外，根据this site，IE 直到 IE9 才支持此功能。 我只是为这些浏览器添加github.com/serby/jquery.placeholder.js/blob/master/… 之类的内容。 占位符文本不可替代标签元素：w3.org/html/wg/drafts/html/master/… 我更喜欢这个，而不是标记的答案。为此 +1。 这应该是答案。【参考方案7】：<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
也添加一个 onblur 事件。
【讨论】：
【参考方案8】：我汇总了由 @Cory Walker 与 @Rafael 的扩展 @Tex 女巫的一种形式对我来说有点复杂 并想出了一个很有希望的解决方案
在禁用 javascript 和 CSS 的情况下防错。
它使用表单域的背景颜色来显示/隐藏标签。
<head>
<style type="text/css">
<!--
input position:relative;background:transparent;
-->
</style>
<script>
function labelPosition()
document.getElementById("name").style.position="absolute";
// label is moved behind the textfield using the script,
// so it doesnt apply when javascript disabled
</script>
</head>
<body onload="labelPosition()">
<form>
<label id="name">Your name</label>
<input type="text" onblur="if(this.value=='')this.style.background='transparent';" onfocus="this.style.background='white'">
</form>
</body>
查看正在运行的脚本：http://mattr.co.uk/work/form_label.html
【讨论】：
【参考方案9】：当你开始输入时它会消失。如果为空它会再次出现。
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>
最简单的方法...
【讨论】：
【参考方案10】：请使用 PlaceHolder.JS，它适用于所有浏览器，对于不兼容 html5 的浏览器非常容易 http://jamesallardice.github.io/Placeholders.js/
【讨论】：
【参考方案11】：您不需要为此编写 Javascript 代码... 我认为您的意思是占位符属性。代码如下：
<input type="text" placeholder="Your descriptive text goes here...">
默认文本为灰色，点击后会消失！
【讨论】：
【参考方案12】：关于HTML属性placeholder和标签textarea的提示，请确保<textarea>和</textarea>之间没有空格，否则占位符 不起作用，例如：
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
这行不通，因为...之间有空格
【讨论】：
【参考方案13】：我认为保留标签而不使用上面提到的占位符是好的。它对 UX 有好处，如下所述： https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/
此处输入字段中带有标签的示例： codepen.io/jdax/pen/mEBJNa
【讨论】：
以上是关于如何在 <input> 元素内创建标签？的主要内容，如果未能解决你的问题，请参考以下文章
如何控制 <input type="number"> 标签来创建选择元素？
如何从 index.html 自定义元素标签接收数组作为@Input？