时间戳

首页 > 解决方案 > 使用 HTML 在凭证字段中添加灰色文本

html - 使用 HTML 在凭证字段中添加灰色文本

问题描述

一些网站在所需凭据旁边的空白处写有灰色文本，例如Gmail（遗憾的是，我不允许添加图片），但是，当您单击该框时，灰色文本会消失。我在 HTML 中有以下代码，但我不知道是否可以添加该功能：

<html>
    <head>
        <title>My code</title>
    </head>
    <body>
        <h1>Registration form</h1>

        <form>
            <fieldset>
                
                <label for="fname">First Name</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label for="lname">Last Name</label> 
                <input type="text" id="lname" name="lname"><br><br>
                <label for="email">Email</label>
                <input type="email" id="Email" name="Email"><br><br>
                <label for="password">Password</label>
                <input type="password" id="Password" name="Password">
            </fieldset>
        </form>
    </body>
</html>

当我运行此代码时，框/字段显示为空，并且不显示灰色文本（如“电子邮件”）。谁能告诉我如何使用 HTML 添加该功能？

标签： html

解决方案

您可以使用placeholder属性。

<input type="text" placeholder="hello">

::placeholder注意：您可以使用 css伪元素更改占位符的样式。

编辑：如果您想在聚焦时隐藏占位符，请执行以下操作：

#myInput:focus::placeholder{
  color: transparent;
}
<input type="text" placeholder="hello" id="myInput">

推荐阅读