【HTML/CSS】简单登录注册表单制作

article/2025/9/23 20:12:37

实现效果：
在这里插入图片描述

<!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>CSS控制表单样式</title><link rel="stylesheet"  type="text/css" href="form.css"></head>
<body><form action="#" method="post"><p><span>账号：</span><input type="text" name="username" value="admin" class="num" pattern="^[a-zA-z][a-zA-Z0-9_]{4,15}$"/></p><p><span>密码：</span><input type="password" name="password" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/></p>
<p><input type="button" class="btn01" value="登录"/><input type="button" class="btn02" value="注册"/>
</p></form>
</body>
</html>

form.css

body{font-size: 12px; font-family: "宋体";}
body,form,input,p{padding: 0; margin: 0;border: 0;}
form{width: 320px;height: 150px;padding-top: 20px;margin: 50px auto;background: #f5f6fd;border-radius: 20px;border: 3px solid #4faccd;
}
p{margin-top: 17px; text-align: center;}
p span{
width: 40px;
display: inline-block;
text-align: right;
}
.num,.pass{width: 153px;height: 16px;border:2px solid #35a1df;/* 22px:给图标留出位置 */
padding: 2px 2px 2px 22px  ;
}
.num{background: url(img/1.png) no-repeat left center #fff;background-size: 15px;color: #999;
}
.pass{background: url(img/2.png) no-repeat left center #fff;background-size: 15px;}
.btn01,.btn02{width: 60px;height: 26px;border-radius: 3px;border: 2px solid #6b5b60;margin-left:30px ;
}
.btn01{background: #3bb7ea;}
.btn02{background: #fbbc18;}

复合属性的写法
书写格式
background : background-color background-image background-repeat background-attachment background-position;
默认值
background: transparent none repeat scroll 0% 0%;
上述这种写法是对的，我的HTML书本上还包含有background-size属性，我建议这个单独写，
Microsoft Edge这个浏览器就不显示（支持）background-size包含在background这个复合属性里面。
至于正则表达式，我还是喜欢在JS里面单独判定给出提示
对了，图标也放在这里吧：
在这里插入图片描述