JavaScript实验程序设计——页面设置与表单验证

JavaScript实验程序设计——页面设置与表单验证

预 习 报 告

实验题目：页面设置与表单验证 预习内容：

1.HTML基础：HTML 网页的基本结构、设置网页背景和颜色、设置字体属性、超级链接、图像和动画、表格、使用框架、其他常用标签。
2.数据类型、常量和变量：数据类型、常量、变量
3.常用语句：注释、赋值语句、if语句、switch语句、循环语句
4.HTML表单概述：定义表单、文本框、文本区域、单选按钮、复选框、组合框、按钮。
5.使用JavaScript访问和操作表单元素：获取表单对象、获取表单元素对象、操作表单元素。

实验目的与要求（及主要实验仪器、设备）：

掌握HTML界面设计、布局的方法。
掌握各种控件的使用方法。
掌握对界面项目进行表单验证的方法。
掌握表单标记，表单提交方式、编码方式等知识点。
实验环境： Windows 7/Windows 10 + HBuilderX

实验原理（方法与与原理分析）：

1.onload 页面或一幅图像完成加载时触发
2.onerror 如果在加载文档或图像时发生错误，则触发
3.onresize 窗口或框架被重新调整大小
4.onbeforeunload 当前页面的内容将要被改变时触发
5.onunload 用户退出页面时触发

实验步骤（程序代码与实验过程）：

<form action="out.html" method="get" name="form" onsubmit="return check();">
			<p>电子邮箱：<input style="height: 30px; width: 200px;" type="email" name="email" value=""/></p>
			<p id="b1">如果没有邮箱，你可以用<a href="1">账号注册</a></p>
			<p>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：<input style="height: 30px;width: 200px;" type="text" name="name" value=""/></p>
			<p>创建密码：<input style="height: 30px; width: 200px;" type="password" name="createpassword" value=""/></p>
			<p>确认密码：<input style="height: 30px; width: 200px;" type="password" name="truepassword" value=""/><p>
<li><a style="text-decoration: none; color:black;" href="main.html">首页</a> </li>
<li><a style="text-decoration: none; color:black;" href="bookhome.html">书库</a> </li>
<li><a style="text-decoration: none; color:black;" href="#">排行</a> </li>
<li><a style="text-decoration: none; color:black;" href="#">完本</a> </li>
<td colspan="3" style="font-size: 30px;font-weight:bold;">剑仙在此</td>
</tr><tr>
<td><img style="height: 100px" src="http://static.zongheng.com/upload/cover/c2/da/c2da0505bb634c19d140941497242342.jpeg"></td>
 <td style="width: 200px;vertical-align: top;line-height: 30px">作者:乱世狂刀<br/>出版社:纵横中文网<br />出版时间：2019年10月20日<br />页数：1198页<br />类别：奇幻玄幻<br /></td>
 <td style="vertical-align:top;"><div id="star">
 <span>评价：一个不正常的人连带着一个不正常的世界，内容有毒，谨慎入坑防止上不来。</span><br />
<ul>
<li class="listar"><a href="javascript:;">1</a></li>
<li class="listar"><a href="javascript:;">2</a></li>
<li class="listar"><a href="javascript:;">3</a></li>
<li class="listar"><a href="javascript:;">4</a></li>
 <li class="listar"><a href="javascript:;">5</a></li>
</ul>
<li><a style="text-decoration: none; color:black;" href="main.html">首页</a> </li>
<li><li><a style="text-decoration: none; color:black;" href="bookhome.html">书库</a> </li></li>
<li><li><a style="text-decoration: none; color:black;" href="#">排行</a> </li></li>
<li><li><a style="text-decoration: none; color:black;" href="#">完本</a> </li></li>
<tr> <td style="text-align: left" colspan="3">优秀书籍推送</td></tr><tr>
 <td><div><img width="100" height="150" src="http://static.zongheng.com/upload/cover/c2/da/c2da0505bb634c19d140941497242342.jpeg"><br/><astyle="text-decoration:none;color:black;"href="http://book.zongheng.com/book/907701.html">剑仙在此</a></br><div><a style="text-decoration: none;color:black;"href="http://home.zongheng.com/show/userInfo/3697424.html">乱世狂刀</a><br></div></div></td>
<td><div><imgwidth="100"height="150"src="http://static.zongheng.com/upload/cover/2017/07/1500036390863.jpg" ><br/><a style="text-decoration:none;color:black;"href="http://book.zongheng.com/book/578305.html">一世独尊</a></br><div><a style="text-decoration:none;color:black;"href="http://home.zongheng.com/show/userInfo/12435157.html">月如火1991</a><br></div></div></td>
 <td><div><imgwidth="100"height="150" src="http://static.zongheng.com/upload/cover/2017/05/1496234539057.JPG" ><br/><a style="text-decoration: none; color:black;"href="http://book.zongheng.com/book/672340.html">剑来</a></br><div><a style="text-decoration: none; color:black;"href="http://home.zongheng.com/show/userInfo/166130.html">烽火戏诸侯</a><br></div></div></td>
</tr><tr>
<td><div><img width="100" height="150" src="http://static.zongheng.com/upload/cover/8c/a0/8ca016d5cdba543c2107859fcf9048a4.jpeg"><br/><a style="text-decoration:none;color:black;"href="http://book.zongheng.com/book/578305.html">赘婿出山</a></br><div><a style="text-decoration:none;color:black;"href="http://home.zongheng.com/show/userInfo/12435157.html">李闲鱼</a><br></div></div></td><td><div><img width="100" height="150"src="http://static.zongheng.com/upload/cover/4c/6c/4c6c3ef834cb2f8b3b8e9591667062ab.jpeg"><br/><a style="text-decoration:none;color:black;"href="http://book.zongheng.com/book/578305.html">国医无双</a></br><div><a style="text-decoration:none;color:black;"href="http://home.zongheng.com/show/userInfo/12435157.html">步履无声</a><br></div></div></td>
<td><div><imgwidth="100"height="150"src="http://static.zongheng.com/upload/cover/37/a6/37a673f56bbae7cc1c00a9beed6e1d4a1561101624387.jpeg" ><br/><a style="text-decoration: none; color:black;"href="http://book.zongheng.com/book/578305.html">盖世</a></br><div><a style="text-decoration: none; color:black;"href="http://home.zongheng.com/show/userInfo/12435157.html">逆苍天8326</a><br></div></div></td></tr>

实验结果（数据分析与结论）：

• 首页
• 表示标题“首页”，且main.html为该首页的HTML文件 字体为黑色 ```   

  
  
  
  
  process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1YW55dWFuY2h1bg==,size_16,color_FFFFFF,t_70#pic_center)
  

  问题讨论：

  问：如何添加音频？
  答：

  其中"雪之梦钢琴版.mp3"下载完与该html文件放于一个文件夹里