HTML里input标签里的placeholder、for属性的作用？

Posted 2023-04-07

placeholder是html5新增的input的一个熟悉，主要是让表单体验更加智能，相当于value属性，但是他有一个好处就是当我们聚焦输入文本的时候我们在placeholder="默认值"的文本就会自动清空，，
不过兼容性还不太好，至少ie好像要9以上才能支持，，所以很多pc端的聚焦处理还是用js来的

for属性应该是label的属性吧？？这个是和input的id绑定，当我们点击input前面的文本标识会自动聚焦到文本框，例如：
<form>
<label for="name">用户名</label>
<input type="text" name="name" accesskey="c" id="name" />
</form>
这个例子，当我点击用户名的时候，会自动聚焦到文本框里头，也就是光标会自动定位到文本框里 参考技术A placeholder 规定帮助用户填写输入字段的提示。

在input标签中没有for属性。你找的可能是这些，如下：
属性：form 值：formname 描述：规定输入字段所属的一个或多个表单。
属性：formaction 值：URL 描述：覆盖表单的 action 属性。（适用于 type="submit" 和 type="image"）
属性：formenctype 描述：覆盖表单的 enctype 属性。（适用于 type="submit" 和 type="image"）
属性：formmethod 值：get/post 描述：覆盖表单的 method 属性。（适用于 type="submit" 和 type="image"）
属性：formnovalidate 值：formnovalidate 描述：覆盖表单的 novalidate 属性。（如果使用该属性，则提交表单时不进行验证。）
属性：formtarget 值：_blank _self _parent _top framename 描述：覆盖表单的 target 属性。（适用于 type="submit" 和 type="image"）
具体详情，参考http://www.w3school.com.cn 有你想要的一切~ 参考技术B placeholder 是做提示用的，占位符，就是你一个输入框还没输入的时候，里面就实现是placeholder的内容
for作用是标签关联input，比如 <input id="aa"> <label for="aa">aa</label>,这时候点击这个标签input就会获得焦点

HTML5中input背景提示文字(placeholder)的CSS美化

之前在介绍HTML5的placeholder属性时，曾实现了一些页面例子让大家参考，但这些例子里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看，CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。

CSS代码

在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同，但相信以后会统一。

/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* mozilla专用 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

其实只是一句代码，但为了实现范围最广的浏览器支持，加上了各自的浏览器引擎前缀(Vendor Prefix)，一下子变成了10几行代码，希望这种情况会尽快的过去。

一些基本的CSS样式你都可以使用在placeholder上——颜色，字体，字体样式等。你可以还可以创造更复杂的样式，比如用GIF动画。

实例演示

下面都是input输入框，用了四种美化效果，我使用了autofocus将光标放在了第一个输入框里，但可以在其它输入框里也输入信息，看看效果：

对于input输入框的背景提示信息(placeholder)的美化虽然只是对网站应用的小小点缀，但正是这样细节上的小差别将你的网站和别人的网站区别开来。IE10也支持了placeholder属性，所以，这是一个可以大范围只是的CSS技巧。