HTML5上机实践——设计注册页面
strength.innerHTML="中";
else {
strength.innerHTML="强"; } } //验证两次输入密码是否一致 function checkPSW() { var psw1 = document.getElementById("psw1").value; var psw2 = document.getElementById("psw2").value; var pswInfo = document.getElementById("pswInfo"); if(psw1!=psw2) {
第3章 HTML5的表单
3.1 新的input输入类型及属性 3.2 表单的验证方式 3.3 上机实践——设计注册页面
3.3 上机实践——设计注册页面
3.3.1 实践目的 使用HTML5的新表单元素打造一个注册页面，该页面将应用新的表单元素及表单的输入验证。通过本上机实 践，读者能够熟练掌握HTML5中新增表单元素的应用，以及表单验证方法的使用。 3.3.2 设计思路 一个相对完善的注册页面应该提供用户身份信息和用户个人信息两种用户信息。用户登录信息包括用户名、 密码、邮箱，用户身份信息包括姓名、性别、出生年月日、住址等。同时对于用户各个输入信息，还应该进 行输入合法性的校验。 根据以上分析，我们设定设计步骤如下。 （1）使用HTML5表单原色设计页面基本结构。 （2）添加各表单验证方法。 3.3.3 实现过程 根据上面的分析，我们设计代码如下。
<!DOCTYPE html> <html> <meta charset="gb2312" /> <script> //验证密码强度 function checkStrength() {
var strength = document.getElementById("strength"); var psw1 = document.getElementById("psw1").value; var length = psw1.length; if (length>=1&&length<3) {
pswInfo.innerHTML='两次输入的密码必须一致'; } } //注册方法
function reg() {
var username = document.getElementById("username").value; var email = document.getElementById("email").value; var gender = document.getElementById("gender").value; var birth = document.getElementById("birth").value; var address = document.getElementById("address").value; if(document.getElementById("username").checkValidity()//判断用户名是否通过校验 &&document.getElementById("psw1").checkValidity()//判断密码是否通过校验 &&document.getElementById("psw2").checkValidity()//判断重复密码是否通过校验 &&document.getElementById("email").checkValidity()//判断电子邮箱是否通过校验 &&document.getElementById("birth").checkValidity()//判断生日是否通过校验 &&document.getElementById("address").checkValidity()//判断地址是否通过校验 ) {
<td>邮箱</td> <td><input id="email" type="email" required="true"/></td> <td><font color="red">*</font></td>
</tr> <tr>
<td>密码</td> <td><input id="psw1" type="password" required="true" onkeyup= "checkStrength()"/></td> <td><font color="red">*</font> <span id="strength"></span></td> </tr> <tr> <td>确认密码</td> <td><input id="psw2" type="password" required="true" onblur=" checkPSW()"/></td> <td><font color="red">*</fonБайду номын сангаас> <span id="pswInfo"></span></td> </tr> </table> </div>
alert( '确认注册信息\n'+ '用户名：'+username+'\n'+
'生日：'+birth+'\n'+ '住址：'+address+'\n' ) } } </script> <form> <fieldset> <legend>用户注册页面</legend> <center> <div style="padding:5px;width=600px"> <h4>用户登录信息</h4> <table width='100%'> <tr> <td width='20%'>用户名</td> <td width='40%'><input id="username" type="text" required="true"/></td> <td width='40%'><font color="red">*</font></td> </tr>
html5教程做页面
html5教程做页面HTML5是一种用于构建和呈现网页的标记语言，它是HTML （超文本标记语言）的最新版本。
HTML5引入了很多新功能和元素，使得网页开发更加强大和灵活。
本教程将介绍如何使用HTML5创建一个基本的网页，并提供一些常用的HTML5元素和特性。
首先，我们需要了解HTML5的文档结构。
HTML5的文档结构与之前的HTML版本相似，都是由HTML头部和主体组成。
HTML头部包含一些必要的信息，例如文档类型定义（DOCTYPE）和字符编码等。
主体则是真正的内容所在的部分。
在HTML5中，有很多新的语义化元素可以用来组织和描述网页内容。
一些常见的元素包括<header>、<nav>、<section>、<article>和<footer>等。
这些元素帮助我们更好地组织和理解网页结构，提高可访问性和搜索引擎优化。
除了语义化元素，HTML5还提供了许多新的表单输入类型和属性，以及一些新的API和功能。
其中一些值得注意的功能包括本地存储和离线访问、多媒体支持（如音频和视频）、绘图和动画效果、地理位置定位等。
通过利用这些功能，我们可以创建更加丰富和交互性强的网页体验。
接下来，我们将通过一个简单的示例来演示如何使用HTML5来构建页面。
首先，我们创建一个基本的HTML文档结构：```<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML5 Tutorial</title></head><body><header><h1>Welcome to HTML5 Tutorial</h1></header><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></nav><section><h2>About HTML5</h2><article><h3>What is HTML5?</h3><p>HTML5 is the latest version of the Hypertext Markup Language used for structuring and presenting content on the World Wide Web.</p></article></section><footer><p>© 2021 HTML5 Tutorial. All rights reserved.</p></footer></body></html>```在这个示例中，我们定义了一个网页标题（<title>）并设置了字符编码（<meta charset="UTF-8">）。
html—登录及注册页面设计
html—登录及注册页⾯设计⼀、⽂字处理1、⽂字加粗：<strong><\strong>2、⽂字换⾏：<br/>3、⽂档标题：title4、整体⽂字居中<body align="center">5、整体字体颜⾊：<body style="color:white">6、段落：<p>7、标题：<h1>~<h6>⼆、超链接设置1、字体链接：<a href="链接地址">2、按钮链接：<input type="button" value="注册" onclick="window.open('链接地址')"3、弹出窗⼝设置：<input type="button" value="提交" onclick=alert("提交成功！")>备注：alert() ⽅法⽤于显⽰带有⼀条指定消息和⼀个 OK 按钮的警告框。
三、样式设置1、外框设置<body>---<DIV CLASS="bodered" >。
</DIV><HEAD>---.bodered{bodered-style:solid;width:300px;height:300px}2、图⽚⼤⼩设置：2.1 背景图⽚ <body background="链接地址">2.2 区域背景图⽚<BODY>----<div id="tp"><head>----#tp{width:200px;height:200px;background:url("链接地址")}四、表单设置：4.0 表单定义设置<form id="myform2" name="myform2" action="#" method="post">4.1 按钮 <input type="button" value="登录" style="width:300px;height=:200px">4.2 下拉菜单<SELECT id="place" name="place" style="width: 300px;height:30px"><option value="shuoshi">硕⼠及以上</option><option value="benke">本科</option><option value="dazhuang">⼤专</option><option value="gaozhong">⾼中及以下</option></select>4.3 下拉表单<select id="software" name="software" multiple="mulyiple" size="3" style="width:300px;height: 50px;"> <option value="OFFICE" id="of" name="of">OFFIC办公软件</option><option value="Corel Draw" id="cdr" name="cdr">Corel Draw</option><option value="AUTOCAD" id="cad" name="cad">AUTOCAD</option><OPYION value="spss" id="sp" name="sp">SPSS</OPYION><option value="matlab" id="mat" name="mat">MATLAB</option></select>4.4 多⾏⽂本<textarea row="50" cols="30" id="recommend" style="width:300px;height:50px;">此处输⼊⽂本</textarea>4.5 单选框<input type="radio" id=“male” name="xingbie" value="男" >男<input type="radio" id=“female” name="xingbie" value="⼥" >⼥单选框选之⼀：name需要⼀致！！4.6 复选框<input type="checkbox" name="aihao" id="aihao" value="唱歌"/>唱歌<input type="checkbox" name="lq" id="lq" value="篮球"/>篮球<input type="checkbox" name="ym" id="ym" value="⽻⽑球"/>⽻⽑球<input type="checkbox" name="yw" id="tw" value="跳舞"/>跳舞</DD>4.7 ⽂件上传 <input type="file" id="photo"/>4.8 表单容器盒⼦fieldset<fieldset><legend><h1 align="center" >登录页⾯</h1></legend></fieldset>五、代码：<！--登录--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><title>登录页⾯</title><style type="text/css">.bordered {border-style:solid;width:600px;height:300px;}#bg{width:600px;height:310px;background: url(678.png);}</style></head><body><body align="center"><body style="color:black"/><br/><br/><br/><br/> <div id="bg"><div class="bordered" ><fieldset><legend><h1 align="center" >登录页⾯</h1></legend><br/> <br/><form id="myform" name="myform" action="#" method="post"><p><strong >⽤户名</strong> <input type="text" id="yonghuming"/></p><br/><p ><STRONG>密 码</STRONG> <input type="password" id="mima"/></p><br/><p><input type="button" value="登录" style="width:70px;height:30px" /> <input type="button" value="注册" style="width:55px;height:30px" onclick="window.open('注册页⾯.HTML')"/></P></form></fieldset></div></div></body></html><!--注册--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><title>个⼈信息注册</title><style type="text/css">#tp{width:600px;height: 620px;background:url("12345.jpg")}</style></head><body><form id="myform2" name="myform2" action="#" method="post"><div id="tp"><body style="color:white"/><fieldset><legend><h1 align="center">个⼈信息注册</h1></legend><hr align="center"><dl><dt><dd><strong>⽤ 户 名 </strong> <input type="text" id="yhm" name="yhm" style="width:300px; height: 30px;"/></dd><br/><dd><strong>请设置密码 </strong> <input type="password" id="mima" name="mima"style="width:300px; height: 30px;"/> </dd><br/><dd><strong>请确认密码 </strong><input type="password" id="rmima" name="rmima"style="width:300px; height: 30px;"/></dd><br/><dd><strong>性 别 </strong><input type="radio" id="male" name="xingbie"/>男 <input type="radio" id="female" name="xingbie"/>⼥</dd> <br/><dd><strong>学 历</strong><SELECT id="place" name="place" style="width: 300px;height:30px"><option value="shuoshi">硕⼠及以上</option><option value="benke">本科</option><option value="dazhuang">⼤专</option><option value="gaozhong">⾼中及以下</option></select><br/><br/><DD><strong>精通软件</strong><select id="software" name="software" multiple="mulyiple" size="3" style="width:300px;height: 50px;"><option value="OFFICE" id="of" name="of">OFFIC办公软件</option><option value="Corel Draw" id="cdr" name="cdr">Corel Draw</option><option value="AUTOCAD" id="cad" name="cad">AUTOCAD</option><OPYION value="spss" id="sp" name="sp">SPSS</OPYION><option value="matlab" id="mat" name="mat">MATLAB</option></select></DD><br/><DD><strong>爱 好 </strong><input type="checkbox" name="aihao" id="aihao" value="唱歌"/>唱歌<input type="checkbox" name="lq" id="lq" value="篮球"/>篮球<input type="checkbox" name="ym" id="ym" value="⽻⽑球"/>⽻⽑球<input type="checkbox" name="yw" id="tw" value="跳舞"/>跳舞</DD><br/><DD><strong>⾃我介绍 </strong><textarea row="50" cols="30" id="recommend" style="width:300px;height:50px;">此处输⼊⽂本</textarea></DD><br/><br/><dd><strong>请提供jpg或png格式照⽚</strong><input type="file" id="photo"/></dd></dt></dl><P><input type="button" value="提交" onclick=alert('提交成功，请重新登录！') style="width:70px;height:40px;" /></P></fieldset></div></form></body></html>。
HTML5表单-注册页面
HTML表单-注册页面设计一个用户注册界面，注册项目包括用户名，密码，Email, 手机号码，短信验证码等内容。
1，网页效果如下：2，代码示例：<!doctype html><html><head><meta charset="UTF-8"><title>注册用户</title><style>p label {width: 180px;float: left;text-align: right;padding-right: 10px}table { margin-left: 150px }</style></head><body><form action="#" method="post"><p><label for="name">用户名：</label><input type="text" name="name" /></p><p><label for="password"> 密码：</label><input type="text" name = "password"/></p><p><label for="confirm">确认密码：</label><input type="text" name="confirm"/></p><p><label for="email">电子邮件：</label><input type="text" name="email" /></p><p><label for="telphone">手机号码：</label><input type="text" name="telphone" /></p><p><label for="verification">短信验证码：</label><input type="text" name="verification" /><input type="button" value="发送短信验证码" /></p><table border="0"><tr><td> <input type="submit" value="提交" /></td><td><input type="radio" value="suerInfo" />同意网站服务条款</td> </tr></table></form></body></html></body></html>3，注意：这是一个简单的用户注册页面，部分表单元素的对齐问题需要CSS来控制位置。
html5注册页面示例代码
代码如下:<!doctype html><html><head><title>register.html</title><meta http-equiv=keywords content=keyword1,keyword2,keyword3> <meta http-equiv=description content=this is my page><meta http-equiv=content-type content=text/html; charset=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 = 差;}elseif (pass.length <= 8) {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 中;}else {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 高;}}</script></head><body><div id=3 style=position: relative; top: 100px; z-index: 3;><form id=f1 action=register.html method=post><table align=center cellspacing=0 class=table><td align=center>会员注册</td></tr><tr><td><table id=registertable border=0px align=center border=0px cellspacing=0 cellpadding=5px><tr><tr><td align=right>员工编号：</td><td align=left><input type=text name=username placeholder=用户名required/></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><input type=date name=borthday /></td></tr><tr><td align=right>性别：</td><td align=left><input type=radio name=gender 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=middle><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></div></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。
HTML用户注册页面设置源码
<h3>用户注册：</h3>
4
0
<hr>
4
1 4
<p>用户昵称：<span class="a1" id="as"><input type="text"
2 required placeholder autofocus></span> <hr></p>
4
3 4
<p>注册邮箱：<span class="a1" id="as"><input type="email
6
<meta name="viewport" content="width=device-width, initial-scal
7 e=1.0">
8
<title>Document</title>
9
1
<style>
0
1
form{
1
width: 800px;
1
height: 700px;
2
border: 1px solid red;
3
background: rgb(81, 187, 125);
0
color: white;
3
}
1
3
span#as:hover input{
2
width: 300px;
3
height: 40px;
3
}
3
4
3
注册页面html模板
注册页面html模板注册页面HTML模板。
在网站开发中，注册页面是用户进行注册和创建账户的重要页面之一。
一个简洁、明了的注册页面可以提高用户体验，增加用户注册的成功率。
因此，设计一个合适的注册页面HTML模板是非常重要的。
下面我们将介绍一个基本的注册页面HTML模板，希望对大家在网站开发中有所帮助。
首先，我们需要创建一个HTML文件，并命名为register.html。
在文件的头部，我们需要添加文档类型声明和字符集设置，代码如下：```html。
<!DOCTYPE html>。
<html lang="en">。
<head>。
<meta charset="UTF-8">。
<meta name="viewport" content="width=device-width, initial-scale=1.0">。
<title>注册页面</title>。
<link rel="stylesheet" href="styles.css">。
</head>。
<body>。
<div class="container">。
<h1>用户注册</h1>。
<form action="register.php" method="post">。
<div class="form-group">。
<label for="username">用户名，</label>。
<input type="text" id="username" name="username" required>。
用HTML代码制作简单的登录界面
用HTML代码制作简单的登录界面在跟着《用HTML代码和记事本制作简单网页》做完之后，我们还可以对网页进行进一步的美化、修饰！具体步骤如下：第一步，设计一个自己的理想界面；第二步，根据构思，进行制作。
输入以下代码：<html><head><title>我的第一个网页</title></head><body><h1 align="center"><font face="楷体">我的第一个主页</font><h1></body></html>得到如下的结果：第三步，继续输入代码，在网页中插入图片，代码如下：<html><head><title>我的第一个网页</title></head><body><h1 align="center"><font face="楷体">我的第一个主页</font><h1><p align="center"><img src="C:\Documents and Settings\AllUsers\Documents\My Pictures\示例图片" width="50"height="60" align="middle"></body></html>得到如下的结果：第四步，接着输入代码，在网页中插入欢迎语、用户提交界面，代码如下：<html><head><title>我的第一个网页</title></head><body><h1 align="center"><font face="宋体">我的第一个主页</font><h1><p align="center"><img src="C:\Documents and Settings\AllUsers\Documents\My Pictures\示例图片\Blue hills.JPG" width="80" height="60" align="middle"><font color="#00FF00" size="4">欢迎光临我的第一个主页</font><form method="POST" action=" "><p align="center">用户<input type="text"name="yh"><br><input type="submit" value="登录" name="dl"></form></body></html>得到如下的结果：这样，一个简单的欢迎、用户登录界面网页就制作好了！。
HTML5+CSS3网页设计与制作实用教程单元4 表单应用与制作注册登录页面
【任务4-1-1】创建电脑版用户注册网页
4．在网页中插入表格 在网页040101.html 的表单域中插入一个9 行3 列的表格，该表格的id 设置为“table01”， “宽”设置为“700 像素”，“边框”设置为“1”，“填充”设置为“3”，“间距”设置为
“0”，“ 对齐”方式设置为“居中对齐”，对应的【属性】面板如图4-6 所示。
图4-9 单行文本域的“属性”设置
【任务4-1-1】创建电脑版用户注册网页
5．插入单行文本域
如果在文本框【属性】面板中的“类型”选项组中选择“密码”单选按钮，则文本框将 转换成密码框，密码框和文本框的设置完全一致，只是在浏览时，密码框中输入字符时，字符 将自动以符号“*”或“ · ”显示，文本内容被隐藏，从而起到保密作用。 在“密 码：*”行的第2 个单元格中和“再次输入密码：*”行的第2 个单元格中分别插 入1 个“单行文本域”，这两个文本框的类型为“密码”，“最多字符数”设置为“16”，名
【任务4-1-1】创建电脑版用户注册网页
表单域的属性设置完成后，其【属性】面板如图4-5 所示。
图4-5 表单域的属性设置
对应的HTML 代码如下所示：
<form action="register.aspx" method="post" name="form1" target="_blank" id="form1"> </form>
2．插入表格域 一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须要 放入这个框内才能起作用。如果看不见插入到页面中的标记表单域的红色虚线区域，则可以选
择菜单命令【查看】→【可视化助理】→【不可见元素】，使红色虚线可见，如图4-4 所示。
注册页面实验报告
Web前端技术实验报告实验（三）实验题目：指导老师：实验类型：实验地点：专业班级：实验：利用JavaScript模拟一个注册页面一、实验目的和要求掌握JavaScript的基本语法掌握JavaScript对象的常用方法二、实验内容使用HTML制作注册页面使用表单对象模拟注册页面三、实验重点和难点Form对象的灵活使用模拟注册页面四、实验过程1.设置表单<tr align="center"><td><div align="right">居住地:</div></td><td><div align="left"><select name="text18"><option value="北京">北京</option><option value="天津">天津</option><option value="上海">上海</option><option value="成都">成都</option><option value="重庆">重庆</option><option value="太原">太原</option></div></td></tr><tr align="center"><td><div align="right">学历:</div></td><td><div align="left"><select name="text6"><option value="专科">专科</option><option value="本科">本科</option><option value="硕士">硕士</option><option value="其他">其他</option></select></div></td></tr>截图如下：2.JavaScript设置警告对话框设置alert<script language="javascript">function checkname(){var div = document.getElementById("div1");div.innerHTML = "";var name1 = document.form1.text1.value;if (name1 == "") {div.innerHTML = "<font color=red>姓名不能为空!</font>";document.form1.text1.focus();return false;}if (name1.length < 4 || name1.length > 16) {div.innerHTML = "<font color=red>姓名输入的长度4-16个字符!</font>"; document.form1.text1.select();return false;}return true;}function checkpassword(){var div = document.getElementById("div2");div.innerHTML = "";var password = document.form1.text2.value;if (password == "") {div.innerHTML = "<font color=red>密码不能为空!</font>";document.form1.text2.focus();return false;}if (password.length < 4 || password.length > 12) {div.innerHTML = "<font color=red>密码长度4-12位</font>"; document.form1.text2.select();return false;return true;}function checkrepassword(){var div = document.getElementById("div3");div.innerHTML = "";var password = document.form1.text2.value;var repass = document.form1.text3.value;if (repass == "") {div.innerHTML = "<font color=red>密码不能为空!</font>";document.form1.text3.focus();return false;}if (password != repass) {div.innerHTML = "<font color=red>输入密码和确认密码长度不一致</font>";document.form1.text3.select();return false;}return true;}function checkEmail(){var div = document.getElementById("div4");div.innerHTML = "";var email = document.form1.text4.value;var sw = email.indexOf("@", 0);var sw1 = email.indexOf(".", 0);var tt = sw1 - sw;if (email.length == 0) {div.innerHTML = "<font color=red>电子邮件不能为空</font>";document.form1.text4.focus();return false;}if (email.indexOf("@", 0) == -1) {div.innerHTML = "<font color=red>电子邮件格式不正确，必须包含@符号!</font>";document.form1.text4.select();return false;}if (email.indexOf(".", 0) == -1) {div.innerHTML = "<font color=red>电子邮件格式不正确，必须包含.符号!</font>";document.form1.text4.select();return false;if (tt == 1) {div.innerHTML = "<font color=red>邮件格式不对。
登录注册页面的实训报告
一、实训背景随着互联网的快速发展，网站和应用程序的登录注册功能已成为用户日常使用中的基本需求。
为了提高用户体验，优化产品功能，我们进行了一次登录注册页面的实训，旨在通过本次实训，掌握登录注册页面的设计原则、实现方法以及相关技术。
二、实训目标1. 理解登录注册页面的设计原则和功能需求；2. 掌握HTML、CSS、JavaScript等前端技术；3. 学会使用jQuery、Bootstrap等前端框架；4. 实现一个功能完善、界面美观的登录注册页面。
三、实训内容1. 需求分析在本次实训中，我们需要设计一个登录注册页面，满足以下功能需求：（1）用户可以通过手机号、邮箱进行注册和登录；（2）注册时，用户需要填写用户名、密码、手机号、邮箱等信息；（3）登录时，用户需要输入用户名和密码；（4）支持密码找回和邮箱验证；（5）界面简洁美观，操作方便。
2. 设计方案（1）页面布局登录注册页面分为三个部分：头部、主体内容和尾部。
头部包含网站logo和导航栏；主体内容分为登录和注册两个部分，分别展示登录表单和注册表单；尾部展示版权信息。
（2）页面风格采用简洁、现代的设计风格，以白色为主色调，搭配蓝色、绿色等辅助色，营造清新、舒适的视觉效果。
（3）交互设计登录注册页面支持鼠标和键盘操作，表单输入框具有提示信息，方便用户输入。
按钮点击时，有明显的反馈效果。
3. 技术实现（1）HTML使用HTML5标签结构，实现登录注册页面的基本框架。
（2）CSS使用CSS3样式，实现页面布局、颜色、字体等样式设置。
（3）JavaScript使用JavaScript实现表单验证、密码加密等功能。
（4）jQuery使用jQuery简化JavaScript代码，提高开发效率。
（5）Bootstrap使用Bootstrap框架实现响应式布局，使页面在不同设备上均能正常显示。
四、实训过程1. 确定需求：与项目相关人员沟通，明确登录注册页面的功能需求。