html5注册页面代码（制作HTML5百科页面）

本篇文章给大家谈谈html5注册页面代码，以及制作HTML5百科页面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、这个首页的html5网站设计代码（尤其是头部那登录注册代码怎么写）
• 2、注册/登陆页面HTML代码该怎么写？
• 3、html5写这个注册页面怎么写啊？

这个首页的html5网站设计代码（尤其是头部那登录注册代码怎么写）

首先先说一下HTML5的代码只是在原有的XHTML基础上增加了一些新的标签（还有一些新的特性，例如数据库和缓存等特性）

以下为此页面的结构代码：

!doctype html

html

head

meta charset="utf-8"

meta name="revised" content="" /

meta name="keywords" content="" /

meta name="description" content="" /

meta name="author" content=""  /

meta name="robots" content="all" /

title页面标题/title

/head

body

header

div/div!--登陆注册区域--

/header!--头部[html5新标签]--

nav/nav!--导航[html5新标签]--

div/div!--banner--

div/div!--左上--

div/div!--右上--

div/div!--左下--

div/div!--右下--

footer/footer!--底部[html5新标签]--

/body

/html

注：以上为页面的大的框架，相对用HTML5新的标签更合理的，全用上了新的带有语义标签。

另外多说一下，[注册登陆]这块在html5的新标签里面没有很合适的语义化的标签，所以依然采用原有的div标签为最合理。html5只是在原有的技术的基础上更细化了，咱在制作代码的过程中没必要必须用HTML5的代码，主要看是否合理，合理的为较合适的。

多说的：不管用XHTML还是HTML5写代码，结构（HTML5）与样式（CSS）尽量要分离！

希望能帮到你！

注册/登陆页面HTML代码该怎么写？

以下为个人原创教学例子，任何人引用需注明出自百度知道用户am7972,楼主可供参考

该例子涵盖了文本框、密码框、下拉菜单、单选框、复选框及文本区的使用

同时在数据的使用方面涵盖了文本型、数值型、日期型、布尔型的使用

也涵盖了在会员信息入数据库前，进行严格的数据检查

不足处，JS验证还不是太完善，不过有服务端认证足够了

title会员注册/title

script type="text/javascript"

!--function CheckForm()

{

if(document.userinfo.username.value == "")

{ alert("请输入姓名,姓名不能为空！");

document.userinfo.username.focus();

return false;

}

if(document.userinfo.username.value.length 10)

{

alert("输入的姓名长度最多为10个字符！");

document.userinfo.username.focus();

return false;

}

}

//--/script

/head

body

table border="1" width="53%" bordercolorlight="#000000" cellspacing="0" id="table1" height="358" bordercolor="#000000" bordercolordark="#FFFFFF" cellpadding="0"

form method="POST" action="bb.asp" name="userinfo" onsubmit="return CheckForm();"

trtd colspan="2" height="37" p align="center"会员注员/td /tr

tr td width="37%" align="right"姓名：/td td width="61%" input type="text" name="username" value="libin" size="13" /td /tr

tr td width="37%" align="right"密码：/td td width="61%" input type="password" name="userPassword" size="20" value="123"/td /tr

tr td width="37%" align="right"性别：/td td width="61%"input type="radio" value="True" checked name="Sex"男 input type="radio" name="Sex" value="False"女/td /tr

tr td width="37%" align="right"生日：/td td width="61%" input type="text" name="userSR" size="11" value="1985-03-12"/td /tr

tr td width="37%" align="right"年龄：/td td width="61%"input type="text" name="userNL" size="9" value="13"/td /tr

tr td width="37%" align="right"爱好：/td td width="61%" input type="checkbox" name="ah" value="sw"上网 input type="checkbox" name="ah" value="ds" checked读书 input type="checkbox" name="ah" value="ty"体育/td /tr

tr td width="37%" align="right"上网方式：/td td width="61%"

select size="1" name="swfs" option selected value="bhsw"拨号上网/option option value="wxsw"无线上网/option option value="gxsw"光纤上网/option /select

/td /tr

tr td width="37%" align="right"个人简介：/td td width="61%"textarea rows="9" name="userGrjs" cols="34"/textarea/td /tr tr td colspan="2" height="38" p align="center"input type="submit" value="提交" name="B1" input type="reset" value="重置" name="B2"/td

/tr

/form

/table

====bb.asp的会员注册非法数据监测====

%

username = Request("username")

userPassword = Request("userPassword")

Sex = Request("Sex")

userSR = Request("userSR")

userNL = Request("userNL")

ah = Request("ah")

swfs = Request("swfs")

userGrjs = Request("userGrjs")

'判断数据合法性，绝对不能让非法数据进入系统

'判断姓名username合不合法，是否包含非法数据

username = Trim(username) '例如：" 张 三 "经过处理之后变成"张 三"

If username ="" Then

Response.write "姓名不能为空"

Response.End

End If

If Len(username)10 Then

Response.write "姓名字数不能超过10个字" 'Len("Z")=1 Len("国")=2

Response.End

End If

For i = 1 To Len(username)

q = Mid(username,i,1)

If InStr("!@#$%^*()_-+|?/"",.",q)0 Then

Response.write "姓名不能包含特殊符号!@#$%^*()_-+|?/"",."

Response.End

End If

Next

'判断密码合不合法，是否包含非法数据userPassword = Trim(userPassword)If userPassword ="" Then Response.write "密码不能为空" Response.EndEnd If

If Len(userPassword)20 Then

Response.write "密码字数不能超过20个字"

Response.End

End If

'判断密码合不合法，是否包含非法数据

Sex = Trim(Sex)

If Sex = "" Then

Response.write "性别不能为空"

Response.End

End If

If Sex "True" And Sex "False" Then

Response.write "性别不能为不男不女"

Response.End

End If

'判断生日合不合法，是否包含非法数据

userSR = Trim(userSR)

If userSR ="" Then

Response.write "生日不能为空"

Response.End

End If

If Len(userSR)8 Or Len(userSR)10 Then '例如：2012-6-3 2012-11-23

Response.write "你输入的生日字数不对，应为2012-6-3或2012-11-23格式"

Response.End

End If

If IsDate(userSR)=False Then

Response.write "你输入的生日格式不能转化为日期，请核实"

Response.End

End If

If DateDiff("yyyy",userSR,Date())1 Or DateDiff("yyyy",userSR,Date())200 Then

Response.write "根据你输入的生日你可能小于1岁或已经超过200岁了，请核查重新输入"

Response.End

End If

'判断年龄合不合法，是否包含非法数据userNL = Trim(userNL)If userNL ="" Then

Response.write "年龄不能为空"

Response.End

End If

If IsNumeric(userNL)=False Then

Response.write "你输入的年龄不能转化为数值，请核查"

Response.End

End If

userNL = CInt(userNL)

If userNL0 Or userNL200 Then

Response.write "你输入的年龄不能小于0岁或者大于200岁，请核查"

Response.End

End If

'判断爱好合不合法，是否包含非法数据ah = Trim(ah) '选择多个爱好则系统会用，分开 //测试

ah = Replace(ah," ","")

arrAh = Split(ah,",")

For i = LBound(arrAh) To UBound(arrAh)

If arrAh(i)"sw" And arrAh(i)"ds" And arrAh(i)"ty" Then

Response.write i "你选择的爱好有问题，请核查" arrAh(i)

Response.End

End If

Next

'判断上网方式合不合法，是否包含非法数据swfs = Trim(swfs)If swfs = "" Then

Response.write "上网方式不能为空"

Response.End

End If

If swfs"bhsw" And swfs"wxsw" And swfs"gxsw" Then

Response.write "你选择的上网方式有问题，请核查"

Response.End

End If

'判断个人简介是否为空，是否超出1000个字

userGrjs = Trim(userGrjs)

If userGrjs = "" Then

Response.write "个人简介不能为空"

Response.End

End If

If Len(userGrjs) 1000 Then

Response.write "个人简介不能超过1000个字"

Response.End

End If

Response.write "数据合法性检测通过"

%

====登陆的HTML代码可相信楼主参照会员注册代码应该没问题了====

html5写这个注册页面怎么写啊？

!DOCTYPE html

html

head

meta charset="utf-8" /

meta name="viewport" content="width=device-width, initial-scale=1"

titleBootstrap 4/title

link rel="stylesheet" href=""

integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"

link rel="stylesheet" href="bootstrap-colorpicker/css/bootstrap-colorpicker.css"

link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datetimepicker.min.css"

style type="text/css"

.main-box {

width: 640px;

margin: 40px auto;

}

/style

/head

body

div class="main-box"

form

div class="form-group row"

label for="name" class="col-sm-2 col-form-label"用户名/label

div class="col-sm-10"

input type="text" class="form-control" id="name" placeholder="请输入用户名"

/div

/div

div class="form-group row"

label for="pwd" class="col-sm-2 col-form-label"密码/label

div class="col-sm-10"

input type="password" class="form-control" id="pwd" placeholder="请输入密码"

/div

/div

div class="form-group row"

label for="pwd2" class="col-sm-2 col-form-label"确认密码/label

div class="col-sm-10"

input type="password" class="form-control" id="pwd2" placeholder="请输入确认密码"

/div

/div

div class="form-group row"

label for="area" class="col-sm-2 col-form-label"区域/label

div class="col-sm-10"

select class="form-control form-control-lg" id="area"

option四川省/option

/select

/div

/div

fieldset class="form-group"

div class="row"

legend class="col-form-label col-sm-2 pt-0"性别/legend

div class="col-sm-10"

div class="form-check form-check-inline"

input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"

checked="true"

label class="form-check-label" for="inlineRadio1"男/label

/div

div class="form-check form-check-inline"

input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"

label class="form-check-label" for="inlineRadio2"女/label

/div

/div

/div

/fieldset

div class="form-group row"

label for="age" class="col-sm-2 col-form-label"年龄/label

div class="col-sm-10"

input type="email" class="form-control" id="age" placeholder="请输入年龄"

/div

/div

div class="form-group row"

label for="age" class="col-sm-2 col-form-label"生日/label

div class="col-sm-10"

input size="16" type="text" value="2012-06-15" readonly class="form-control form_datetime"

/div

/div

div class="form-group row"

label for="phone" class="col-sm-2 col-form-label"手机号/label

div class="col-sm-10"

input type="text" class="form-control" id="phone" placeholder="请输入手机号"

/div

/div

div class="form-group row"

label for="phone" class="col-sm-2 col-form-label"头像/label

div class="col-sm-10"

input type="file" class="form-control-file" id="exampleFormControlFile1"

/div

/div

div class="form-group row"

label for="site" class="col-sm-2 col-form-label"主页/label

div class="col-sm-10"

input type="text" class="form-control" id="site" placeholder="请输入主页"

/div

/div

div class="form-group row"

label for="email" class="col-sm-2 col-form-label"Email/label

div class="col-sm-10"

input type="email" class="form-control" id="email" placeholder="请输入Email"

/div

/div

div class="form-group row"

label class="col-sm-2 col-form-label"喜欢的颜色/label

div class="col-sm-10"

input id="likeColor" type="text" class="form-control" value="#5367ce" /

/div

/div

div class="form-group row"

div class="col-sm-2"/div

div class="col-sm-10"

div class="form-check"

input class="form-check-input" type="checkbox" value="" id="defaultCheck1"

label class="form-check-label" for="defaultCheck1"

同意服务条款

/label

/div

/div

/div

div class="form-group row"

div class="col-sm-10"

button type="submit" class="btn btn-primary"注册/button

button type="submit" class="btn"取消/button

/div

/div

/form

/div

script src=""

integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"

/script

script src=""

integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"

/script

script src=""

integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"

/script

script src="bootstrap-colorpicker/js/bootstrap-colorpicker.js"/script

script src="bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"/script

script

$('#likeColor').colorpicker();

$(".form_datetime").datetimepicker({

format: 'yyyy-mm-dd',

weekStart: 1,

todayBtn:  1,   //今日日期按钮

autoclose: 1,   //自动关闭

todayHighlight: 1,   //高亮今日日期

startView: 2,       //从日期视图开始

minView: 2,

forceParse: 0

});

/script

/body

/html

案例下载

关于html5注册页面代码和制作HTML5百科页面的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。