【HTML+CSS+JS】注册页面模板

简介: 写一个简单的注册页面

 利用基本的html+css逻辑实现一个简易的注册页面

image.gif编辑

image.gif编辑

源码如下:

<html>
<style>
body{
  background-image:url("/i/paper.jpg");
}
</style>
<body>
<h1 style="background-color:hsl(39, 100%, 50%)" align=center>注&nbsp册</h1>
<style>
div{
  text-align:center;
  color:black;
    font-size:18;
    font-weight:900;
}
.button {
  background-color:#555555;
  border-radius: 4px;
  transition-duration: 0.4s;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li {
  float: left;
}
li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #ddd;
}
li a.active {
  color: white;
  background-color: #4CAF50;
}
input[type=text1] {
  width: 30%;
  padding:20px ;
  margin:10px 0;
  box-sizing: border-box;
  text-align:left;
}
</style>
<ul>
  <li><a class="active" href="###">首页</a></li>
  <li><a href="###">公告</a></li>
  <li><a href="###">客服</a></li>
  <li><a href="###">关于我们</a></li>
  <li style="float:right"><a class="active" href="###">退出</a></li>
</ul>
<script>
window.alert("欢迎注册,编程猿!");
</script>
<div>
<form  method="get" action="login.jsp">
设置用户名:<br>
<input type="text" name="beginNum" value="请输入用户名" maxlength="10" size="40" ><br><br>
性别:
<input type="radio" name="sexy" value="男" checked="true">男
<input type="radio" name="sexy" value="女" >女<br><br>
设置密码:<br>
<input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br>
确认密码:<br>
<input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br>
学历:
<select >
  <option value="volvo">初中</option>
  <option value="saab">高中</option>
  <option value="opel">专科</option>
  <option value="audi">本科</option>
</select><br>
就业方向:
<input type="radio" name="subject" value="java" checked="true">Java后端
<input type="radio" name="subject" value="web" >web前端
<input type="radio" name="subject" value="C#" >C#
<input type="radio" name="subject" value="python">python<br><br>
期望薪资:
<input list="money" name="money">
<datalist id="money">
  <option value="5k以上">
  <option value="8-10k">
  <option value="10k-12k">
  <option value="12-15k">
  <option value="15k以上">
</datalist>
<input  type="submit"><br>
备注:
<input type="text1" name="beginNum" value="说点什么吧....."   maxlength="1000" size="40" ><br><br>
<button class="button button1" type="button" onclick="alert('注册成功')" align=center>点击完成注册</button>
<input class="button button1" type="reset" value="退出">
</div>
</form>
</body>
</html>

image.gif

如果觉得起到帮助,帮忙一键三连哦~~~

相关文章
|
10月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
787 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
631 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
825 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
289 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
606 33
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
302 2
|
JavaScript 前端开发 Java
【JavaScript】注册事件
通过prototype可以给一个类动态的扩展函数和属性
364 0
【JavaScript】注册事件
|
JavaScript 前端开发
js中一次性注册多个事件
在js中,如果想一次性给一个控件或者标签初测多个事件的方法:          假如有个标签:                      现在要对这个input标签,同时注册失去焦点(blur)和按enter事件(e.
1040 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
397 2