찾다

집  >  기사  >  웹 프론트엔드  >  등록 페이지를 만들기 위한 H5 코드 예시

등록 페이지를 만들기 위한 H5 코드 예시

Y2J
Y2J원래의
2017-05-23 13:45:329731검색

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(&#39;login.html&#39;)" id="btn1" 
onmousemove
="changeBgColor(&#39;btn1&#39;)" 
onmouseout
="recoverBgColor(&#39;btn1&#39;)" class="submit" /> <input type="submit" accesskey="enter" value="注册" id="btn" onmousemove="changeBgColor(&#39;btn&#39;)" onmouseout="recoverBgColor(&#39;btn&#39;);" 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; }

코드는 다음과 같습니다.

아아아아

------------------------------- ------- -

위 파일의 순서는 다음과 같습니다. --------- ---------------

배경
사진
: bg.jpg

【관련 추천】

HTML5 무료 동영상 튜토리얼

2.

H5 새로운 태그의 브라우저 호환성 문제에 대한 자세한 설명

3.

H5를 사용하여 웹 페이지를 만드는 방법에 대한 전체 개요

4.

H5와 기존 HTML의 차이점

5.

H5를 통한 카메라 기능 구현의 자세한 예

위 내용은 등록 페이지를 만들기 위한 H5 코드 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：H5를 통한 카메라 기능 구현 사례에 대한 자세한 설명다음 기사：H5를 통한 카메라 기능 구현 사례에 대한 자세한 설명

관련 기사

더보기