HTML5注册页面示例代码

前端技术 2023/09/09 HTML

复制代码
代码如下:

<!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\" 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=\"\" 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

本文地址：https://www.stayed.cn/item/24130

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案