＜input type=“password“ name=“pass“＞

于 2022-07-25 21:45:06 发布
阅读量293 收藏
点赞数
文章标签： servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/korey__/article/details/125984060
版权

HTML CSS 表单设计 用户体验 网页交互
关键词由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            /* margin: 50px auto; */

            list-style: none;

        }

        .wrap {

            width: 429px;

            height: 409px;

            border: 1px solid black;

            margin: 50px auto;

        }

        .a1 {

            margin-top: 43px;

        }

        form .wrap .a7 {

            width: 268px;

            height: 42px;

            background-color: #ff4a00;

            line-height: 38px;

            color: white;

            border: 1px solid #ff6600;

        }

        .a8 {

            /* display: block; */

            padding-right: 59px;

            text-align: right;

            line-height: 53px;

            position: relative;

            /* text-align: 409px; */

        }

        .a2,

        .a3,

        .a4,

        .a5,

        .a6 {

            width: 264px;

            height: 38px;

        }

        .a9 {

            font-size: 14px;

        }

        img {

            width: 45px;

            height: 30px;

            position: absolute;

            bottom: 167px;

            left: 300px;

        }

        .a10 {

            position: absolute;

            bottom: 105px;

            left: 285px;

            font-size: 12px;

            text-decoration: none;

        }

       

    </style>

</head>

<body>

    <form action="https://www.baidu.com/" target="_blank" method="get">

        <div class="wrap">

            <ul class="a8">

                <li class="a1">

                    手机：<input class="a2" type="text" placeholder="请输入手机号" name="user">

                </li>

                <li>

                    创建密码：<input class="a3" type="password" placeholder="请输入密码" name="pass">

                </li>

                <li>

                    确认密码：<input class="a4" type="password" placeholder="请再次输入密码" name="pass">

                </li>

                <li>

                    验证码：<input class="a5" type="text" placeholder="请输入验证码" name="user">

                    <img src="./images/验证码.png" alt="">

                </li>

                <li>

                    短信验证：<input class="a6" type="text" placeholder="请输入验证码" name="user">

                    <a class="a10" style="color: #333333;" href="#">免费获取短信</a>

                </li>

                <li>

                    <input class="a7" type="submit" value="注册">

                </li>

                <li>

                    <p class="a9">已有账号，请<a href="#" style="color:#ff6600 ;">登录</a></p>

                </li>

            </ul>

        </div>

    </form>

</body>

</html>

岄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS手风琴效果
xingmengIT的博客
08-31 1169
以下是代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c...
DAY004-CSS基础
qq_45579661的博客
08-03 369
1.思维导图 2.作业+练习 可参考 a.导航栏+hover b.侧边栏+hover 例： <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"conten...
css手风琴
吃不胖的程序猿历程
08-23 216
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;11&lt;/title&gt; &lt;style&gt; * {
css实现手风琴效果
sgfzd的博客
07-01 3069
css实现手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <form id="enroll"> <h1>注册账号</h1><br><br> <label for="name">名 字：</label><input type="text" id="name" value="" ><br><br> <label for="mail">邮 箱：</label><input type="text" id="mail" value=""><br><br> <label for="password1">密 码：</label><input type="text" id="password1" value=""><br><br> <label for="password2">确认密码：</label><input type="text" id="password2" value=""><br><br> <button type="reset" value="重置">重置</button> <button type="button" value="提交" onclick="namejudge(username,usermail,userpass1,userpass2)" >提交</button> <script> var username = document.getElementById('name').value; var usermail = document.getElementById('mail').value; var userpass1 = document.getElementById('password1').value; var userpass2 = document.getElementById('password2').value; function namejudge(username,usermail,userpass1,userpass2) { if (username===''||userpass1===''||usermail===''||userpass2===''){alert('用户信息不能为空')} else{alert(username+usermail+userpass1+userpass2)} } </script> </form> </body> </html>这段代码为什么不能在浏览器中打印我输入的用户信息
05-25
<label for="password1">密 码：</label><input type="text" id="password1" value=""><br><br> <label for="password2">确认密码：</label><input type="text" id="password2" value=""><br><br> <button type=...
美化此页面要求只使用页内样式：<div id="control"> <p>注册</p> <div>账号：<input placeholder="请输入账号" id="username" name="username" required v-model="pass.username"></div> <div id="check1"></div> <br> <div>密码：<input type="password" placeholder="请输入密码" id="password" name="password" required v-model="pass.password"> </div> <div id="check2"></div> <!-- <button id="btn" @click="ad()">登录</button>--> <a href="login.html"> <button>登录</button> </a> <a @click="ad"> <button>注册</button> </a> </div>
最新发布
06-12
<div>密码：<input type="password" placeholder="请输入密码" id="password" name="password" required v-model="pass.password"></div> <div id="check2"></div> <a href="login.html"><button>登录</button></...
html页面账号<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <h1>管理员登录界面</h1> <ul><input type="text" id="uName" class="uName" placeholder="请输入管理员用户名"></ul> <ul><input type="password" id="pass" class="pass" placeholder="请输入管理员密码"></ul> <ul><input type="button" id="sm" class="sm" value="登录"></ul> </form> </body> </html> 利用JS声明指定账号和密码存入一个数组，并需要在页面输入指定的账号和密码才能实现点击登陆跳转页面
06-09
<ul><input type="password" id="pass" class="pass" placeholder="请输入管理员密码"></ul> <ul><input type="button" id="sm" class="sm" value="登录"></ul> </form> <script> var users = [ {username: ...
帮我美化此登录页面要求全部使用页内样式：<script src="../js/vue.js"></script> <script src="../plugins/elementui/index.js"></script> <script type="text/javascript" src="../js/jquery.min.js"></script> <script src="../js/axios-0.18.0.js"></script> <style> #control{ margin-left: 600px; background-color: #0abdfe;width: 180px;border-radius:20%} p{ margin-left: 80px;} </style> <body> <div id="control"> <p>登录</p> <div>账号：<input placeholder="请输入账号" id="username" name="username" required v-model="pass.username"></div> <div id="check1"></div> <br> <div>密码：<input type="password" placeholder="请输入密码" id="password" name="password" required v-model="pass.password"> </div> <div id="check2"></div> <!-- <button id="btn" @click="ad()">登录</button>--> <a @click="ad()"> <button>登录</button> </a> <a href="register.html"> <button>注册</button> </a> </div>
06-12
密码：<input type="password" placeholder="请输入密码" id="password" name="password" required v-model="pass.password"> </div> <div id="check2"></div> <button @click="ad()">登录</button> <a href=...
【程序阅读题：】填空补充（为了自动阅卷，不要填写多余空格；如$a=2;不要写成$a = 2 ;或者$a =2 ;或者$a =2 ;等等） <form method="post"> ID :<input type="text" name="id"><br> 密码:<input type="password" name="pass"><br> <input type="submit" name="postmethod" value="登录"> </form> <?php if(isset($_POST["postmethod"])) //判定是否点击了登录按钮 { $userid = $_POST[“id”]; $flag = preg_match("/^[1-9]{3,6}$/", $userid); //$flag：检查$userid是否在3~6位数字之间：是1否0 $password= ____________________ ; //接收表单中填写的密码值 } ?>
06-09
密码:<input type="password" name="pass"><br> <input type="submit" name="postmethod" value="登录"> </form> <?php if(isset($_POST["postmethod"])) //判定是否点击了登录按钮 { $userid = $_POST["id"]; ...
html css 两款超级漂亮实用的CSS导航栏
02-11
html css 两款超级漂亮实用的CSS导航栏
div+css制作的几款好看的导航栏
11-07
网页特效，几款好看的导航栏，鼠标点击变斜体导航栏目网页特效，利用了div+css制作而成
纯css实现手风琴效果
知识点沉淀包括不限于前端
07-18 333
效果图 代码 html <div class="demo"> <ul> <li> <p>剑<br>侠<br>客</p> <div>不达成功誓不休。</div> </li> <li> &l
通过CSS样式实现 手风琴 效果
qq_30306717的博客
07-24 488
视频效果 ↓ CSS手风琴样式 源代码及注释（插入图片即可实现效果） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
Css手风琴效果
yuguofenglin的博客
05-29 1174
这次给大家带来一个css手风琴小案例。 先把HTML框架打出来，放三个div标签，里面分别包含ul和li标签，然后在给他们设置类名。 把大div盒子和里面一个单独div设置样式。 再把内部div和ul和li设置样式。 下面展示效果。 ...
CSS实现手风琴效果
qq_42838139的博客
04-14 374
效果图片 HTML代码 CSS代码 主要CSS部分 这里设置过渡效果为类名为div_ul的高度属性（当鼠标移到类名为sfq_div上面的时候，改变类名为div_ul的高度。） （面向百度编程的第n天，有错误请谅解，请指出会铭记于心，谢谢） ...
手风琴实现效果纯css
qq_39081958的博客
08-28 950
在做css实现手风琴的效果过程中，发现了一个有趣的现象： 当使用背景图片的时候，最后一个图片的animation效果会出现问题。 我相出的原因是，因为图片是作为li的背景图片的，而当hover时候li的宽度变了，背景图片的改变是一样快的。 但是使用img标签，虽然li的宽度变了，但是img的宽度不会改变 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head...
css手风琴效果
程序猿成长之路
05-31 592
垂直手风琴 .accordionMenu { background: #fff; color:#424242; font: 12px Arial, Verdana, sans-serif; margin:0 auto; padding: 10px; width: 500px; } .accordionMenu h2 { margin:5px 0; padding:0
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值