Rumah >hujung hadapan web >Tutorial H5 >H5制作一个注册页面的代码实例
H5制作一个注册页面的代码实例
- Y2Jasal
- 2017-05-23 13:45:329783semak imbas
HTML5写的注册页面，正在学习html5的朋友可以参考下
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>register.html</title>
<meta http-equiv="
key
words" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; char
set
=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>
<p id="3" style="
position
: relative;
top
: 100px;
z-index
: 3;">
<
for
m 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" cell
padding
="5px">
<tr>
<tr>
<td align="right">
员工编号：
</td>
<td align="
left
">
<input type="text" name="username" placeholder="用户名"
require
d/>
</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="g
end
er" 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="mid
dl
e">
<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>
</p>
</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
【相关推荐】
1. HTML5免费视频教程
4. H5与传统html的区别
Atas ialah kandungan terperinci H5制作一个注册页面的代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：通过H5实现拍照功能的实例详解Artikel seterusnya：教你用H5绘图的基础方法