通过学生基本信息表案例来了解HTML5表单功能方法
Posted 鴻陽不是鸿阳
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过学生基本信息表案例来了解HTML5表单功能方法相关的知识，希望对你有一定的参考价值。
目录
一、前言
1.本文讲解的响应式开发技术（html5+CSS3+Bootstrap）的变形中的HTML5表单功能方法代码，这只是利用表单功能实现的，还不能实现提交信息成功跳转信息界面。这也是很多教材的一个典型案例；
2.本文将讲解涉及到3D转换、旋转等功能的知识点，其它方面会大致讲一下；
3.本代码是使用visual Studio Code编写的，其他软件如DW，HBX等都是可以的；
4.运行浏览器是谷歌，同时推荐使用谷歌浏览器；
5.这个案例是我上学跟老师所讲做出来的，有些地方不是很完美，请见谅也请多赐教；
二、知识点讲解及代码架构
这里知识点就不详细的讲解了，若想了解可以在我发布的博文《通过一些小案例来了解HTML5表单的功能方法》了解，下附链接：
https://mp.csdn.net/mp_blog/creation/editor/129886839
本文分为index.html和elli.css两个代码段,其中.css代码段我没有写多少，若想要页面完美，可以讲css文件设置一下
三、实现效果
四、实现的代码及功能
1.index.html
下面定义了学生基本信息表中姓名学号的输入框
<li>
<label>姓 名：</label>
<input class="right" type="text" value="您的姓名" maxlength="6">
</li>
<li>
<label>学 号：</label>
<input class="right" type="text" value="" maxlength="6">
</li>
下面采用日历方式定义了学生基本信息表中的入学日期
<li>
<label>入学日期：</label>
<input class="right" type="date">
</li>
下面定义了学生基本信息表中的性别选项
<li>
<label>性 别：</label>
<input type="radio" name="sex"/>
<label for="nan">男</label>
<input type="radio" name="sex"/>
<label for="nv">女</label>
</li>
下面采用多选单选的方式定义了学生基本信息表中的二级学院和专业
<li>
二级学院：
<select>
<option>-请选择-</option>
<option selected="selected">信息工程学院</option>
·······································
</select><br /><br />
</li>
<li>
所学专业:
<select multiple="multiple" size="3">
<option>软件专业</option>
························································
</select>
</li><br />
下面定义了学生基本信息表中的班级选型
<li>
<label for="">班级：</label>
<input type="checkbox">软件202101班
<input type="checkbox">软件202102班
<input type="checkbox">软件202103班
</li>
下面定义了学生基本信息表中的备注信息选项
<li>
<label>备注：</label>
<textarea name="opinion" cols="50" rows="15"></textarea>
</li>
最后定义了学生基本信息表中的提交重置按钮
<li></label><br />
<input type="submit">
<input type="reset">
</li>
2.elli.css
这里设置了uili里每行之间的高度，同时padding，margin最大作用就是去掉每行文字前的小圆点，如果每有，就会是下面图片的效果
ul,li
padding: 0;
margin: 0;
height: 55px;
到这就将这个学生基本信息表案例讲完了，下面是完整代码
五、案例完整代码
1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生基本信息表案例</title>
<link rel="stylesheet" href="css/elli.css" />
</head>
<body>
<form>
<h2>学生基本信息表</h3>
<ul>
<li>
<label>姓 名：</label>
<input class="right" type="text" value="您的姓名" maxlength="6">
</li>
<li>
<label>学 号：</label>
<input class="right" type="text" value="" maxlength="6">
</li>
<li>
<label>入学日期：</label>
<input class="right" type="date">
</li>
<li>
<label>性 别：</label>
<input type="radio" name="sex"/>
<label for="nan">男</label>
<input type="radio" name="sex"/>
<label for="nv">女</label>
</li>
<li>
二级学院：
<select>
<option>-请选择-</option>
<option selected="selected">信息工程学院</option>
<option>机电工程学院</option>
<option>土木工程学院</option>
<option>财经管理学院</option>
<option>旅游管理学院</option>
<option>建筑经济学院</option>
<option>环境工程学院</option>
<option>工商管理学院</option>
</select><br /><br />
</li>
<li>
所学专业:
<select multiple="multiple" size="3">
<option>软件专业</option>
<option>大数据专业</option>
<option>计算机网络专业</option>
<option>虚拟现实专业</option>
<option>人工智能专业</option>
</select>
</li><br />
<li>
<label for="">班级：</label>
<input type="checkbox">软件202101班
<input type="checkbox">软件202102班
<input type="checkbox">软件202103班
</li>
<li>
<label>备注：</label>
<textarea name="opinion" cols="50" rows="15"></textarea>
</li>
<li></label><br />
<input type="submit">
<input type="reset">
</li>
</ul>
</form>
</body>
</html>2.elli.css
ul,li
padding: 0;
margin: 0;
height: 55px;
使用文档对象在页面上创建学生信息表。 信息表包括学号姓名性别电子邮件联系电话个人主页和联系地址， 信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
描述：使用文档对象在页面上创建学生信息表。
信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址，
信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20个字符，
每输入一名学生的信息，提交后，表格增加一行，表格不能被选择、复制。
-->
<body style="text-align: center; background:url(img/3.1.jpg);background-size: 100%;">
<div style="padding-top: 20px; font-family: ‘楷体‘;">
<form >
学 号：<input type="text" id="userName" ><br><br>
姓 名：<input type="text" id="userPass"><br><br>
性 别：
男<input type="radio" name="xingbie" value="男">
女<input type="radio" name="xingbie" value="女"> <br><br>
电子邮箱：<input type="text" id="Email" ><br><br>
联系电话：<input type="text" id="photo" ><br><br>
个人主页：<input type="text" id="net" ><br><br>
联系地址：<br>
<textarea id="ztext" style="width: 220px;"></textarea><br><br>
<input style="width: 230px;" type="button" value="提交" onclick="doSubmit()">
</form>
<br><br>
<table style="-moz-user-select:none; width:500px;" border="0" align="center" id="TableA">
<thead>
<tr>
<td>学号</td><td>姓名</td><td>性别</td><td>电子邮箱</td><td>联系电话</td><td>个人主页</td><td>联系地址</td>
</tr>
</thead>
</table>
</div>
<script>
//获取ID值
var Email=document.getElementById("Email")
var photo=document.getElementById("photo")
var net=document.getElementById("net")
var ztext=document.getElementById("ztext")
var userName=document.getElementById("userName")
var userPass=document.getElementById("userPass")
//添加表格
var a=true;
function doSubmit(){
yz();
if(a==true){
var radio = document.getElementsByName("xingbie");
var row = document.getElementById("TableA").insertRow();
if(row!=null){
cell=row.insertCell();
cell.innerHTML=userName.value;
cell = row.insertCell();
cell.innerHTML=userPass.value;
cell=row.insertCell();
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
cell.innerHTML=radio[i].value
}
}
cell = row.insertCell();
cell.innerHTML=Email.value;
cell = row.insertCell();
cell.innerHTML=photo.value;
cell = row.insertCell();
cell.innerHTML=net.value;
cell = row.insertCell();
cell.innerHTML=ztext.value;
}
}
qk();
}
onload=qk()
function qk(){
if(a==true){
userName.value="";
userPass.value=""
Email.value=""
photo.value=""
net.value=""
ztext.value=""
}
}
//验证
function yz(){
var pat=/^[\u4E00-\u9FA5]{0,20}$/;
if(pat.test(ztext.value)==false){
alert("地址不得超过20个汉字！！");
a=false;
}
}
//雪花特效
var num=15;
x= new Array();
y= new Array();
doc_width=document.documentElement.clientWidth;
doc_height=document.documentElement.clientHeight;
for(i=0; i<num; i++){
x[i]=Math.random()*(doc_width-50);
y[i]=Math.random()*doc_height;
str="<img src=‘img/snow.png‘ style=‘position:absolute; height:20px;width:20px";
str+="top:"+y[i]+"px;left:"+x[i]+"px;‘id=‘dot"+i+"‘>"
document.write(str);
}
function snow(){
for(i=0;i<num;i++){
x[i]+=Math.random()*3;
x[i]-=Math.random()*3;
y[i]+=5;
if(y[i]>(doc_height-50))
{
y[i]=-20;
}
document.all["dot"+i].style.top=y[i]+"px";
document.all["dot"+i].style.left=x[i]+"px";
}
setTimeout("snow()",10);
}
snow();
</script>
</body>
</html>
以上是关于通过学生基本信息表案例来了解HTML5表单功能方法的主要内容，如果未能解决你的问题，请参考以下文章