今天小编跟大家讲解下有关HTML5注册页面示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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="https://www.aidi.net.cn//html5/favicon.ico"/> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//html5/css/register.css"/> <script src="https://www.aidi.net.cn//html5/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"style="position: relative; top: 100px; z-index: 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="https://www.aidi.net.cn//html5/"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"} ------------------------------------------------ 上面文件的顺序是：register.html register.css checkbox..js ------------------------------------------------- 背景图片：bg.jpg来源：爱蒂网
