recherche

Maison >interface Web >Tutoriel H5 >Exemple de code H5 pour créer une page d'inscription

Exemple de code H5 pour créer une page d'inscription

Y2J
Y2Joriginal
2017-05-23 13:45:329783parcourir

Page d'inscription écrite en HTML5, les amis qui apprennent le html5 peuvent se référer au code

comme suit : 

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

code comme suit : 

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; }

codez comme suit : 

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" }

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

L'ordre des fichiers ci-dessus est : registre.html registre.css checkbox..js

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

Contexte Image : bg .jpg

[Recommandations associées]

1 Tutoriel vidéo gratuit HTML5

2.

Explication détaillée des problèmes de compatibilité du navigateur avec les nouvelles balises H5

3

Aperçu général de la façon d'utiliser H5 pour créer des pages Web.

4.

H5 Différences par rapport au HTML traditionnel

5

Explication détaillée d'exemples de prise de photos via H5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée d'exemples de mise en œuvre de la fonction caméra via H5Article suivant：Explication détaillée d'exemples de mise en œuvre de la fonction caméra via H5

Articles Liés

Voir plus