html中含提示文字的输入框

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

<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="请输入密码" onfocus="if(this.value==defaultValue) {this.value='';this.type='password'}" onblur="if(!value) {value=defaultValue; this.type='text';}" style="color:#CCC; font-size:18px" />
</div>

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