【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

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

相关文章
|
16天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
22天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
13天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
13天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
58 1
|
18天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
33 3
|
21天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
34 4
|
22天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
20天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
47 0
html5+three.js公路开车小游戏源码
|
25天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
42 2
|
9天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
26 0
下一篇
无影云桌面