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

最新推荐文章于 2021-06-16 23:01:47 发布

学习伴随着我与生俱来的直觉

最新推荐文章于 2021-06-16 23:01:47 发布

阅读量1.5k

点赞数 1

分类专栏： web前端 placeholde form表单文章标签： javascript web前端字体 web

本文链接：https://blog.csdn.net/weixin_40165325/article/details/79085812

版权

web前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

form表单

2 篇文章 0 订阅

订阅专栏

placeholde

1 篇文章 0 订阅

订阅专栏

在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>

学习伴随着我与生俱来的直觉

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
WEB前端登录注册页面的form中使用placeholder占位符

在web的开发中有的时候我们需要用户登录注册页面需要在输入框的里面有灰色字体进行提示我之前都是使用复杂的JavaScript来实现实现点击出现字符出现与消失以及字符的颜色在灰色和黑色中变换特别是密码输入框中需要涉及到两个输入框的显示与隐藏非常麻烦但是使用了placeholder占位符就不一样了可以方便快捷的实现这个功能示例代码：<body> <div
复制链接

扫一扫

专栏目录