首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5注册页面示例代码

Posted in HTML / CSS onMarch 27, 2014

复制代码
代码如下:

<!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

HTML5注册页面示例代码

HTML5注册页面示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3教程：background-clip和background-origin
Oct 17 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
html5实现微信打飞机游戏
Mar 27 #HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 #HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 #HTML / CSS
用html5实现语音搜索框的方法
Mar 18 #HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 #HTML / CSS
HTML5 Notification（桌面提醒）功能使用实例
Mar 17 #HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 #HTML / CSS
Centos(8) 伪静态(1) 跨域(4) lnmp(1)  AD域(1) lamp(1) Windows server 2012(17) 组策略(1) destoon(1) Rewrite(4)
You might like
我常用的几个类
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
jQuery实现评论模块
2020/08/19 jQuery
vue+element实现动态加载表单
2020/12/13 Vue.js
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Pycharm安装python库的方法
2020/11/24 Python
网络安全方面的面试题
2015/11/04 面试题
房地产项目策划书
2014/02/05 职场文书
学习交流会主持词
2014/04/01 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
程序员求职信
2014/04/16 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
运动会广播稿200字
2014/10/18 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers