足球游戏_中国足彩网¥体育资讯$

HTML5注册页面示例代码
来源:易贤网 阅读:11322 次 日期:2014-07-14 14:40:45
温馨提示:易贤网小编为您整理了“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=gbk">

<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

名单

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网页制作
易贤网手机网站地址:HTML5注册页面示例代码
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标