您的位置：首页 > Web前端

WEB前端登录注册页面的form中使用placeholder占位符

2018-01-17 15:24 519 查看
在web的开发中有的时候我们需要用户登录注册页面

需要在输入框的里面有灰色字体进行提示

我之前都是使用复杂的JavaScript来实现

实现点击出现字符出现与消失

以及字符的颜色在灰色和黑色中变换

特别是密码输入框中需要涉及到两个输入框的显示与隐藏

非常麻烦

但是使用了placeholder占位符就不一样了

可以方便快捷的实现这个功能

示例代码：

<body>
<div id="div1">
<div style="position: relative;">
<img src="../img/headportrait-login-register.png" class="img1">
<input id="button_login" class="button1" type="button" value="登录" style="color:#E59A00" onclick="login_onclick()">
<input id="button_register" class="button1" type="button" value="注册" style="color: black;" onclick="register_onclick()">
</div>
<div class="line"></div>
<div id="user_register" style="display: none;">
<input placeholder="用户名" id="user_register_username" name="用户名" class="input1" type="text" />
<input placeholder="邮箱/手机号" id="user_register_contact" name="邮箱/手机号" class="input1" type="text" />
<input placeholder="密码" id="user_register_password" name="密码1" class="input1" type="password" />
<input placeholder="确认密码" id="user_register_ensurepassword" name="确认密码1" class="input1" type="password" />
<input placeholder="验证码" name="验证码" class="securitycode" type="text" /><input value="获取验证码" class="securitycode_made" type="button"><br>
<input value="同意协议并注册" name="同意协议并注册" class="agreement" type="radio"><span class="agreement">同意协议并注册</span><br>
<input value="注册" id="user_register_button" class="button2" type="button" onclick="ajax_user_register()" />
</div>
<form id="merchant_register" style="display: none">
<input placeholder="用户名" value="" name="用户名" class="input1" type="text" />
<input placeholder="邮箱/手机号" value="" name="邮箱/手机号" class="input1" type="text" />
<input placeholder="密码" value="" name="密码3" class="input1" type="password" />
<input placeholder="确认密码" value="" name="确认密码3" class="input1" type="password" />
<input placeholder="验证码" value="" name="验证码" class="securitycode" type="text"><input value="获取验证码" class="securitycode_made" type="button"><br>
<!-- style="color: #747474;"-->
<div class="havefile" id="leftfile">
<input name="店铺门面照" class="file" id="photo" type="file">
<span class="infile">店铺门面照</span>
</div>
<div class="havefile" id="rightfile">
<input name="经营许可证" class="file" type="file">
<span class="infile">经营许可证</span>
</div><br>
<input value="同意协议并注册" name="同意协议并注册" class="agreement" type="radio"><span class="agreement">同意协议并注册</span><br>
<input value="注册" type="submit" class="button2">
</form>
<form id="login" style="display: block;">
<input placeholder="用户名/邮箱/手机号" id="login_username_email_mobilephone" name="用户名/邮箱/手机号" class="input2" type="text">
<input placeholder="密码" id="login_password" name="密码2" class="input2" type="password">
<input placeholder="验证码" name="验证码" class="securitycode" type="text"><input value="获取验证码" class="securitycode_made" type="button"><br>
<input value="登录" type="button" class="button2" style="margin-top: 20px;" onclick="ajax_login()">
</form>
<div>
<input id="button_merchant" class="button1" type="button" value="商家" style="color: black;" onclick="merchant_onclick()">
<input id="button_user" class="button1" type="button" value="用户" style="color: rgb(229, 154, 0);" onclick="user_onclick()">
</div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript web前端 字体 web
相关文章推荐
新的分享
章节导航