등록 페이지를 만들기 위한 H5 코드 예시
- Y2J원래의
- 2017-05-23 13:45:329728검색
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; }코드는 다음과 같습니다.
아아아아------------------------------- ------- -
위 파일의 순서는 다음과 같습니다. --------- ---------------
배경
사진
: bg.jpg
【관련 추천】
위 내용은 등록 페이지를 만들기 위한 H5 코드 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.