如何在<input>元素内创build一个标签？
我想插入一个描述性的文字内的input元素，消散当用户点击它。
我知道这是一个很常见的伎俩，但我不知道该怎么做。
什么是最简单/更好的解决scheme？
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search"> SOsearchbutton就是一个更好的例子！ 这就是我从这里得到的代码。 查看页面源是一个有价值的工具。
如果您使用HTML5，则可以使用placeholder属性。
<input type="text" name="user" placeholder="Username">
在我看来，最好的解决scheme不涉及图像，也不使用input的默认值。 相反，它看起来像David Dorward的解决scheme。
屏幕阅读器和没有javascript的用户很容易实现和降级。
看看这两个例子： http : //attardi.org/labels/
我通常在表单上使用第二种方法（labels2）。
常用的方法是使用默认值作为标签，然后在字段获得焦点时将其删除。
我真的不喜欢这种方法，因为它具有可访问性和可用性的含义。
相反，我会从字段旁边的标准元素开始。
然后，如果JavaScript处于活动状态，请在祖先元素上设置一个类，这会导致一些新的样式应用于：
- 相对定位包含input和标签的div
- 绝对放置标签
- 将input绝对放在标签顶部
- 删除input的边框，并将其背景颜色设置为透明
然后，也是每当input失去焦点，我testing，看看input是否有一个值。 如果是这样，确保祖先元素有一个类（例如“隐藏标签”），否则确保它没有这个类。
每当input获得焦点时，设置该类。
样式表将在select器中使用该类名来隐藏标签（通常使用text-indent：-9999px）。
这种方法为所有用户提供了一个体面的体验，包括禁用JS的用户和使用屏幕阅读器的用户。
我已经把@Cory Walker提出的解决scheme放在一起@Rafael的扩展和@Tex巫婆对我来说有点复杂，并提出了一个有希望的解决scheme
使用javascript和CSS禁用了防错function。
它使用表单字段的背景颜色来显示/隐藏标签。
<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
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
也添加一个onblur事件。
当你开始input时，它将消失。如果它是空的，它将再次出现。
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>
最简单的方法
请使用PlaceHolder.JS其在所有浏览器中的作品，非HTML5兼容的浏览器很容易http://jamesallardice.github.io/Placeholders.js/
有关HTML属性占位符和标签textarea的一个提示，请确保<textarea>和</textarea>之间没有空格，否则占位符不起作用，例如：
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
这是行不通的，因为有一个空间…
用这个
样式：
<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（）函数。
好工作
你不需要一个Javascript代码…
我认为你的意思是占位符属性。 这里是代码：
<input type="text" placeholder="Your descriptive text goes here...">
默认的文字是灰色的，点击的话会消失的！
这是一个简单的例子，它只是覆盖一个图像（无论你想要什么措辞）。 我在某处看到了这种技术。 我正在使用原型库，所以你需要修改，如果使用别的东西。 在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(http://img.dovov.comsearch_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>
