html中含提示文字的输入框

最新推荐文章于 2024-06-19 22:40:10 发布

petrel_zhu

最新推荐文章于 2024-06-19 22:40:10 发布

阅读量9.7k

点赞数

分类专栏：网页（html php js）

本文链接：https://blog.csdn.net/petrel_zhu/article/details/47359899

版权

网页（html php js）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一般制作登录界面时的代码就是：

       <span style="font-size:18px;">  用户名 ：
        <input type="text" name="usename" /><br />
         密   码：
        <input type="password" name="password" /> <br /></span>

其效果是

为了美化登录界面，我就将其做成有提示文字的输入框。

首先介绍一种简单的方法，在html5中只要简单的一句代码就可以实现了

   <input type="text" placeholder="用户名或邮件地址" name="username"/>

但是在html中没有placeholder一说，要实现起来有点麻烦。

用户名输入的代码为

<input name="usename" type="text" id="textfield" value="请输入用户名"  onFocus="if (value =='请输入用户名'){value =''}" onBlur="if (value ==''){value='请输入用户名'}" style="color:#CCC; font-size:18px"/>

这样是没有问题的，但是密码不是简单吧type=text改成password，如果这样改了其效果是：

因为type是password类型，所以显示的文字也成了黑点，此时我们需要稍微改动下

 <div class="login-form">
      <input type="text"  id="textfield" value="请输入密码" οnfοcus="if(this.value==defaultValue) {this.value='';this.type='password'}" οnblur="if(!value) {value=defaultValue; this.type='text';}" style="color:#CCC; font-size:18px" />
   </div>

这样密码框中的就能输出文字了。