一般制作登录界面时的代码就是:
<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>
这样密码框中的就能输出文字了。