Html 如何在 <input> 元素内创建标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/781473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a label inside an <input> element?
提问by collimarco
I would like to insert a descriptive text inside an input element that disappers when the user click on it.
我想在输入元素中插入一个描述性文本，当用户点击它时会消失。
I know it is a very common trick, but I do not know how to do that..
我知道这是一个非常常见的技巧，但我不知道该怎么做..
What is the simplest/better solution?
什么是最简单/更好的解决方案？
回答by Rich Bradshaw
If you're using HTML5, you can use the placeholderattribute.
如果您使用的是 HTML5，则可以使用该placeholder属性。
<input type="text" name="user" placeholder="Username">
回答by Cory Walker
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
A better example would be the SO search button! That's where I got this code from. Viewing page source is a valuable tool.
一个更好的例子是 SO 搜索按钮！我就是从那里得到这个代码的。查看页面源代码是一个有价值的工具。
回答by tex
In my opinion, the best solution involves neither images nor using the input's default value. Rather, it looks something like David Dorward's solution.
在我看来，最好的解决方案既不涉及图像也不使用输入的默认值。相反，它看起来像 David Dorward 的解决方案。
It's easy to implement and degrades nicely for screen readers and users with no javascript.
对于屏幕阅读器和没有 javascript 的用户来说，它很容易实现和降级。
Take a look at the two examples here: http://attardi.org/labels/
看看这里的两个例子：http: //attardi.org/labels/
I usually use the second method (labels2) on my forms.
我通常在我的表单上使用第二种方法 (labels2)。
回答by Quentin
The common approach is to use the default value as a label, and then remove it when the field gains the focus.
常见的做法是使用默认值作为标签，然后在字段获得焦点时将其移除。
I really dislike this approach as it has accessibility and usability implications.
我真的不喜欢这种方法，因为它具有可访问性和可用性影响。
Instead, I would start by using a standard element next to the field.
相反，我会从使用字段旁边的标准元素开始。
Then, if JavaScript is active, set a class on an ancestor element which causes some new styles to apply that:
然后，如果 JavaScript 处于活动状态，则在祖先元素上设置一个类，这会导致应用一些新样式：
- Relatively position a div that contains the input and label
- Absolutely position the label
- Absolutely position the input on top of the label
- Remove the borders of the input and set its background-color to transparent
- 相对定位包含输入和标签的 div
- 绝对定位标签
- 将输入绝对定位在标签的顶部
- 删除输入的边框并将其背景颜色设置为透明
Then, and also whenever the input loses the focus, I test to see if the input has a value. If it does, ensure that an ancestor element has a class (e.g. "hide-label"), otherwise ensure that it does not have that class.
然后，每当输入失去焦点时，我都会测试输入是否有值。如果是，确保祖先元素有一个类（例如“隐藏标签”），否则确保它没有那个类。
Whenever the input gains the focus, set that class.
每当输入获得焦点时，设置该类。
The stylesheet would use that classname in a selector to hide the label (using text-indent: -9999px; usually).
样式表将在选择器中使用该类名来隐藏标签（通常使用 text-indent: -9999px;）。
This approach provides a decent experience for all users, including those with JS disabled and those using screen readers.
这种方法为所有用户提供了不错的体验，包括禁用 JS 的用户和使用屏幕阅读器的用户。
回答by Maciek
I've put together solutions proposed by @Cory Walker with the extensions from @Rafael and the one form @Tex witch was a bit complicated for me and came up with a solution that is hopefully
我已经将@Cory Walker 提出的解决方案与@Rafael 的扩展放在一起，@Tex 女巫的一种形式对我来说有点复杂，并提出了一个有希望的解决方案
error-proof with javascript and CSS disabled.
禁用 javascript 和 CSS 时防错。
It manipulates with the background-color of the form field to show/hide the label.
它使用表单字段的背景颜色来显示/隐藏标签。
<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>
View the script in action: http://mattr.co.uk/work/form_label.html
查看正在运行的脚本：http: //mattr.co.uk/work/form_label.html
回答by Thaha kp
When you start typing it will disappear.If empty it will appear again.
当您开始输入时，它会消失。如果为空，它将再次出现。
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>
Simplest way...
最简单的方法...
回答by Thaha kp
Please use PlaceHolder.JS its works in all browsers and very easy for non html5 compliant browsers http://jamesallardice.github.io/Placeholders.js/
请使用 PlaceHolder.JS，它适用于所有浏览器，对于非 html5 兼容的浏览器非常容易 http://jamesallardice.github.io/Placeholders.js/
回答by Alex V
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
Add an onblur event too.
也添加一个 onblur 事件。
回答by cn123h
One hint about HTML property placeholderand the tag textarea, please make sure there is no any space between <textarea>and </textarea>, otherwise the placeholderdoesn't work, for example:
关于 HTML 属性占位符和标签textarea 的一个提示，请确保<textarea>和之间没有任何空格</textarea>，否则占位符不起作用，例如：
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
This won't work, because there is a space between...
这是行不通的，因为...
回答by Mohammed
I think its good to keep the Label and not to use placeholder as mentioned above. Its good for UX as explain here: https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/
我认为保留 Label 而不是如上所述使用占位符是很好的。正如这里解释的那样，它对 UX 有好处：https: //www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/
Here example with Label inside Input fields: codepen.io/jdax/pen/mEBJNa
这是输入字段内带有标签的示例：codepen.io/jdax/pen/mEBJNa
