iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >HTML5中怎么制作一个注册页面
  • 284

0
分享到

HTML5中怎么制作一个注册页面

2024-04-02 19:04:59 284人浏览 安东尼
摘要

本篇文章为大家展示了HTML5中怎么制作一个注册页面，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。<!DOCTYPE html> <ht

本篇文章为大家展示了HTML5中怎么制作一个注册页面，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

<!DOCTYPE html> 

<html>
<head>
<title>reGISter.html</title>
<meta Http-equiv="keyWords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<LINK rel="Shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/CSS" href="css/register.css" />
<script src="js/checkbox.js" type="text/javascript">
</script>
<script type="text/javascript">
function play(){
document.getElementById("menu_item").style.display = "";
}
function noplay(){
document.getElementById("menu_item").style.display = "none";
}
function passwd(){
var pass = document.getElementById("password").value;
var tip = document.getElementById("tip");
if (pass.length < 4) {
document.getElementById("meter").value = pass.length;
tip.innerHTML = "差";
}
else
if (pass.length <= 8) {
document.getElementById("meter").value = pass.length;
tip.innerHTML = "中";
}
else {
document.getElementById("meter").value = pass.length;
tip.innerHTML = "高";
}
}
</script>
</head>
<body>
<div id="3" >
<fORM id="f1" action="register.html" method="post">
<table align="center" cellspacing="0" class="table">
<tr class="thead">
<td align="center">
会员注册
</td>
</tr>
<tr>
<td>
<table id="registertable" border="0px" align="center" border="0px" cellspacing="0" cellpadding="5px">
<tr>
<tr>
<td align="right">
员工编号：
</td>
<td align="left">
<input type="text" name="username" placeholder="用户名" required/>
</td>
</tr>
<tr>
<td align="right">
密 码：
</td>
<td align="left">
<input type="password" name="password" id="password" placeholder="密码" required onkeyup="passwd()"/>
<meter min="1" max="10" low="5" high="8" value="0" id="meter">
</meter>
<span id="tip"></span>
</td>
</tr>
<tr>
<td align="right">
密码确认：
</td>
<td align="left">
<input type="password" name="password2" placeholder="确认密码" required/>
</td>
</tr>
<tr>
<td align="right">
生 日：
</td>
<td align="left">
<input type="date" name="borthday" />
</td>
</tr>
<tr>
<td align="right">
性 别：
</td>
<td align="left">
<input type="radio" name="gender" value="0" checked/>男
<input type="radio" name="gender" value="1"/>女
</td>
</tr>
<tr>
<td align="right">
邮 箱：
</td>
<td align="left">
<input type="email" name="email" placeholder="邮箱" id="email" required/>
</td>
</tr>
<tr>
<td align="right">
手 机：
</td>
<td align="left">
<input type="tel" pattern="[0-9]{11}" id="p" name="phone" placeholder="请输入11位数字" />
</td>
</tr>
<tr>
<td align="right">
地 址：
</td>
<td align="left">
<input type="text" name="address" placeholder="地址" list="l"/>
<datalist id="l">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="js">江苏</option>
<option value="zz">郑州</option>
<option value="sz">深圳</option>
</datalist>
</td>
</tr>
<tr>
<td align="right">
个人网页：
</td>
<td align="left">
<input type="url" name="page" placeholder="主页网址" />
</td>
</tr>
<tr>
<td align="right">
起床时间：
</td>
<td align="left">
<input type="time" name="bed" onblur="pro()"/>
</td>
</tr>
<tr>
<td align="right">
头像：
</td>
<td align="left">
<input type="file" id="f" accept="image/jpeg" onchange="show()"/><span><img id="img" src="" width="60" height="60" /></span>
<script>
function show(){
var file = document.getElementById("f").files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(){
document.getElementById("img").src = fileReader.result;
}
}
</script>
</td>
</tr>
<tr>
<td colspan="2">
<details>
<p>
允许注册
<mark>
许可证
</mark>信息
</p>
<summary>
注册许可信息
</summary>
</details>
</td>
</tr>
<tr>
<td align="right">
验证码：
</td>
<td valign="middle">
<input type="text" name="captcha" size="11" maxlength="4" title="输入右边的验证码" />
<span id="span"></span>
<script>
var span = document.getElementById("span");
span.innerHTML=Math.floor(Math.random());
</script>
</td>
</tr>
<tr height="60px">
<td align="center" colspan="2">
<input type="button" value="转到登录" onclick="window.location.replace('login.html')" id="btn1" onmousemove="changeBGColor('btn1')" onmouseout="recoverBgColor('btn1')" class="submit" /> <input type="submit" accesskey="enter" value="注册" id="btn" onmousemove="changeBgColor('btn')" onmouseout="recoverBgColor('btn');" class="submit" formmethod="post"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

代码如下:


body {
background-image: url("../images/bg.jpg");
text-align: center;
background-repeat: repeat-x;
background-position: 0px 0px ;
background-size：
}
.table {
border: 1px solid #90BFFF;
width:810px;
}
tr {
font-family: 微软雅黑;
font-weight:800;
color: #448EF3;
}
input{
border: 1px solid #448EF3;
color: #448EF3;
font-weight:bold;
font-family: "微软雅黑";
height: 35px;
line-height: 30px;
border-radius:5px;
}
.submit {
width: 150px;
height: 40px;
cursor :hand;
font-size: 20px;
color: #ffffff;
background-color: #448EF3;
border: 0px;
}
.thead {
height: 40px; background : #90BFFF;
font-family: "微软雅黑";
font-size: 30px;
font-weight: 700;
color: #ffffff;
background: #90BFFF;
}
#3{
margin-bottom: 100px;
}

代码如下:


function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
}
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
function changeBgColor(btn){
var btn = document.getElementById(btn);
btn.style.backgroundColor = "#90BFFF"
}
function recoverBgColor(btn){
var btn = document.getElementById(btn);
btn.style.backgroundColor = "#448EF3"
}

上述内容就是HTML5中怎么制作一个注册页面，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网VUE频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: HTML5中怎么制作一个注册页面

本文链接: https://www.lsjlt.com/news/74847.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • HTML5中怎么制作一个注册页面
    本篇文章为大家展示了HTML5中怎么制作一个注册页面，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。<!DOCTYPE html> <ht...
    99+
    2024-04-02
  • H5如何制作一个注册页面
    这篇文章将为大家详细讲解有关H5如何制作一个注册页面，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下:<!DOCTYPE html> ...
    99+
    2024-04-02
  • 用javascript制作qq注册动态页面
    目录一.前言1. 基础布局2. 自动切换图片3. 添加内容4. 自动缩放，控件的显示和隐藏5.响应用户输入操作一.前言 我们来看如何用html写一个注册页面并使用js加载用户输入响应...
    99+
    2024-04-02
  • html5中怎么制作一个loading图
    本篇文章给大家分享的是有关html5中怎么制作一个loading图，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。<!DOCTYPE&nb...
    99+
    2024-04-02
  • html5中怎么制作一个五角星
    html5中怎么制作一个五角星，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。<canvas></canvas...
    99+
    2024-04-02
  • 使用html和css怎么制作一个可翻转登录注册界面
    这期内容当中小编将会给大家带来有关使用html和css怎么制作一个可翻转登录注册界面，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。Html<body>  <div&n...
    99+
    2023-06-08
  • 怎么用HTML制作一个简单的页面
    这篇文章主要介绍“怎么用HTML制作一个简单的页面”，在日常操作中，相信很多人在怎么用HTML制作一个简单的页面问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用HTML制...
    99+
    2024-04-02
  • 怎么在SpringBoot利用Mybatis实现一个登录注册页面
    怎么在SpringBoot利用Mybatis实现一个登录注册页面？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。环境jdk8 ： “1.8.0_281”Maven...
    99+
    2023-06-06
  • HTML怎么制作一个简单的面页布局
    这篇文章将为大家详细讲解有关HTML怎么制作一个简单的面页布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。互联网多数的网页都是由html编写的，html配合css布局做...
    99+
    2024-04-02
  • 怎么打开navicat注册页面
    如何打开 navicat 注册页面？访问 navicat 官网：https://www.navicat.com.cn/点击“注册”链接填写注册信息验证电子邮件点击验证链接完成注册 如何...
    99+
    2024-04-24
    navicat
  • Android怎么实现注册页面
    本文小编为大家详细介绍“Android怎么实现注册页面”，内容详细，步骤清晰，细节处理妥当，希望这篇“Android怎么实现注册页面”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。实现的效果图：代码：package...
    99+
    2023-06-30
  • HTML5怎么制作一个重力感应球
    这篇“HTML5怎么制作一个重力感应球”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“HTM...
    99+
    2024-04-02
  • 怎么在python中创建一个操作页面
    这篇文章给大家介绍怎么在python中创建一个操作页面，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。python可以做什么Python是一种编程语言，内置了许多有效的工具，Python几乎无所不能，该语言通俗易懂、容易...
    99+
    2023-06-14
  • 怎么在HTML5页面中实现一个音乐播放器
    这篇文章给大家介绍怎么在HTML5页面中实现一个音乐播放器，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。<audio id="music1">浏览器不支持audio标签<...
    99+
    2023-06-09
  • 注册页面怎么跟mysql连接
    PHP注册页面连接mysql数据库的方法通过在注册页面源码中添加以下代码即可连接到MySQL数据库<!DOCTYPE html><html><head>   &nb...
    99+
    2024-04-02
  • 怎么在Html5页面中使用JSON实现一个动画
    今天就跟大家聊聊有关怎么在Html5页面中使用JSON实现一个动画，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.demo.html里面有很多内联的东西，使用时堆积在页面内不好看仔...
    99+
    2023-06-09
  • Knative Eventing中怎么实现一个Registry 事件注册机制
    Knative Eventing中怎么实现一个Registry 事件注册机制，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。背景作为事件消费者，之前是无法事先知道哪些事件可以被消...
    99+
    2023-06-19
  • HTML5怎么制作网页游戏
    这篇文章主要讲解了“HTML5怎么制作网页游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML5怎么制作网页游戏”吧！ 　　（一）游戏规则： 　　...
    99+
    2024-04-02
  • 使用Three.js制作一个3D奖牌页面
    目录背景效果实现引入资源场景初始化光照效果Three.js 提供的光源添加网格和地面创建奖牌奖牌UI素材生成Three.js 中的贴图MeshPhysicalMaterial 物理材...
    99+
    2024-04-02
  • Dreamvear中怎么创建一个html5网页
    这篇文章给大家介绍Dreamvear中怎么创建一个html5网页，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。步骤首先打开自己的电脑，运行Dreamvear软件。软件打开后，出现如图的界面，然后选择中间一排的更多选项。...
    99+
    2023-06-08
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作