个人信息注册静态页面

最新推荐文章于 2024-04-14 17:57:58 发布

weixin_34146410

最新推荐文章于 2024-04-14 17:57:58 发布

阅读量1.7k

点赞数

文章标签： php javascript python ViewUI

原文链接：https://my.oschina.net/june6502/blog/208078

版权

2019独角兽企业重金招聘Python工程师标准>>>

作业1 个人信息注册静态页面

作业类型：验证性实验

实验目的：使用HTML标签熟练编写静态页面

实验内容：

1. 根据所提供的界面，编写register.html文件（表单form）。

2. 要求输入的数据中：用户名、密码、确认密码为必填项。即单击提交时如果这3项没有填写，界面给出提示必须填写。提示：使用HTML5或JavaScript实现。

3. 要求2次填写的密码相同，如果不同，单击提交时给出提示。提示：用JavaScript实现。

提交文档：使用页内JavaScript，把register.html文件压缩为zip或rar上传。

<!DOCTYPE HTML>
<html>
<head>
 <title>JSP第一个作业-个人信息填写（By王映君）</title>
 <meta charset='utf-8'>
 <!--插入CSS代码-->
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
  list-style: none;
 }
 body{
  background-color: #95788A;
  font-family: sans-serif,Verdana, Helvetica, Arial;
 }
     #main{
      padding-left: 350px;
     }
    .kv-item{
 padding-left: 100px;
 padding-bottom: 20px;
   }
    .kv-label{
 display: inline;
 height: 28px;
 line-height: 28px;
 margin-left: -100px;
 float: left;
 text-align: right;
 width: 100px;
   }
   .text-align{
 border:1px solid #474E63;
 color: #0A1844;
 height: 26px;
 line-height:26px;
 padding:0 2px;
 width: 177px; 
 text-align: left;
    }
    #submit{
 margin-left: 80px;
 border:1px solid #474E63;
 height: 26px;
 font-weight: bold;
   }
   #reset{
 border:1px solid #474E63;
 height: 26px;
 font-weight: bold;
   }
     </style>
 <!--CSS部分结束-->
 <!--此处插入JS代码-->
 <script type="text/javascript">
//判断前三个表单元素（用户名、密码、确认密码是否为空）
function check(Form){
 var check=true;
 var flag=0;
 for(i=0;i<3;i++){
  if(Form.elements[i].value=="")
  {alert(Form.elements[i].title+"不能为空！");
  Form.elements[i].focus();
  check=false;
  return false;}
  //判断两次输入的密码是否相同
  if(i==2)
  if(Form.pwd.value!=Form.repwd.value)
   {alert("两次输入密码不同，请重新输入！");
  Form.repwd.value="";
     Form.pwd.value="";
  //Form.pwd.focus();
  i=i-2;
  continue;
  }
  
 }
return check;
}
     </script>
 <!--JS代码结束-->
</head>
<body>
 <div id="main">
  <form name="personalForm" method="post" action="" onSubmit="return check(this)">
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="username">用户名：</label>
    </span>
    <input type="text" name="username"class="text-align" id="username" placeholder="*必填项" autofocus size="25" title="用户名"></div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="pwd">密&nbsp;码：</label>
    </span>
    <input type="password" name="pwd" class="text-align" id="pwd" placeholder="*必填项" size="25" title="密码" ></div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="repwd">确认密码：</label>
    </span>
    <input type="password" name="repwd" class="text-align" id="repwd" placeholder="*必填项" size="25" title="确认密码"></div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="sex_boy">性&nbsp;别：</label>
    </span>
    <input type="radio" name="sex" id="sex_boy" value="男" checked >
    男
    <input type="radio" name="sex"  id="sex_girl" value="女">女</div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="student">职&nbsp;业：</label>
    </span>
    <select name="job">
     <option id="student" value="学生" selected="selected">学生</option>
     <option value="职员">职员</option>
     <option value="经理">经理</option>
     <option value="军人">军人</option>
     <option value="自由人">自由人</option>
    </select>
   </div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl">个人爱好：</label>
    </span>
    <input type="checkbox" name="Computer" value="电脑网络">
    电脑网络&nbsp;
    <input type="checkbox" name="Vedio" value="影视娱乐">
    影视娱乐&nbsp;
    <input type="checkbox" name="Card" value="棋牌娱乐">
    棋牌娱乐
    <br>
    <input type="checkbox" name="Book" value="读书读报">
    读书读报&nbsp;
    <input type="checkbox" name="Food" value="美酒佳肴">
    美酒佳肴&nbsp;
    <input type="checkbox" name="Art" value="绘画书法">绘画书法</div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl">个人说明：</label>
    </span>
    <textarea class="text" rows="10" cols="30"></textarea>
   </div>
   <div class="kv-item">
    <input type="submit" name="submit" id="submit" value="提交" >
    <input type="reset" name="reset" id="reset" value="重置"></div>
  </form>
 </div>
</body>
</html>

在firefox、IE、chorme中对html、CSS的解析效果不同，同个输入，可能在不同的浏览器中预览效果不同。

label中文字的纵向对齐不能仅靠空格（ ）解决，因为不同浏览器预览效果不同，可能在firefox中是对齐的，而在IE中却是纵向错开的，因而要靠span来组合行间元素，同时用class和id来配合控制。
    label中文字的对齐主要是用到text-align:right。
    同时一个label（由span组装,label的class设置为“tsl”，span的class设置为“kv-label”）和同一行的input要组合成div，方便控制表单上下信息的对齐。
    不同行的div设置相同的class（“kv-item”）。
    要区别不同的label或者input项，最好结合id控制。

/**
此实验的纵向控制参照淘宝网，不过javascript的验证没有做到向淘宝那么严格，只是简单按照实验要求判断下而已，要高效率的判断，最好结合ajax，进行异步请求，这样就不用每次判断出现问题就重新刷新啦！
不过我在实验中仅用js，若密码输入错误，也不用重新刷新，其它已填好的数据不被清除，只清除了“密码”和“确认密码”
谢谢老师！
*/

转载于:https://my.oschina.net/june6502/blog/208078