Html5为输入框增加了新的属性,如 placeholder (占位符) ,它表示在文本框中预先放一些文本。占位符就是文本框可以接受的示例内容,一般颜色都是灰色。只要一石击文本框,他就消失了。如果把已输入的内容全部删除,然后单机文本框外部,它又会出现。试用JavaScript 当然也可以实现这个功能。但是html5只用一个 placeholder 属性就解决了问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{padding: 100px;} input{ display: block; width: 300px; height: 30px; line-height: 30px; outline: none; text-indent: 10px; margin-bottom: 10px; } </style> </head> <body> <input type="text" placeholder="这里就是提示文本,占位符,可以输入“白小虫”"> <input type="text" placeholder="这里就是提示文本,占位符"> </body> </html>
如下图所示: