js+html实现表单

最新推荐文章于 2022-11-12 17:57:31 发布

hanchaob323

最新推荐文章于 2022-11-12 17:57:31 发布

阅读量1.1k

点赞数

分类专栏： js+html 文章标签： html input function 投票系统 button border

本文链接：https://blog.csdn.net/hanchaob323/article/details/7384330

版权

js+html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

    <html>
     <head>
      <title>教学质量投票系统</title>
     <script type="text/javascript"> 
    <!--
    //表单
      //用户名
     function match(){
      var exp= /^[\u4e00-\u9fa5]{2,4}$/;
      var mm = document.getElementById("ren").value;
      aa(mm);
      function aa(people){
      var result = people.match(exp);
      if(!result){
       alert("投票人错误");
       }
      }
     //编号
      var exp = /^\w+$/;
      var ren = document.getElementById("renno").value;
      kk(ren);
      function kk(peopleno){
       var result = peopleno.match(exp);
      if(!result){
       alert("投票人编号错误");
       }
      }
     //日期
      var exp = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      var hiredate = document.getElementById("hiredate").value;
      ww(hiredate);
      function ww(hired){
       var result = hired.match(exp);
      if(!result){
       alert("投票人日期输入错误");
       } 
       }
      }
    //楼，房间
    var rooms = new Array(4);
    rooms["A1"] = ["A1001", "A1002", "A1003", "A1004", "A1005"];
    rooms["A2"] = ["A2001", "A2002", "A2003", "A2004", "A2005"];
    rooms["A3"] = ["A3001", "A3002", "A3003", "A3004", "A3005"];
    rooms["A4"] = ["A4001", "A4002", "A4003", "A4004", "A4005"];
    function removeOptions(optionMenu)
    {
     for (var i=0; i < optionMenu.options.length; i++) 
      optionMenu.options[i] = null; 
    }
    function addOptions(optionList,optionMenu)
    {
     removeOptions(optionMenu);  // clear out the options
     for (var i=0; i < optionList.length; i++)
      optionMenu.options[i] = new Option(optionList[i], optionList[i]);
    }
    
    //隐藏与显示问题
    
    function doClick(){
     
    var jsomObj = {"wtsm":"你对本次教学安排是否满意","wtlx":"radio","xxnr":{"a1":"满意","a2":"不满意"},"xxgs":2};
    var jsonObj ={"wtsm":"你都了解了哪些内容","wtlx":"checkbox","xxnr":{"a1":"DOM","a2":"BOM","a3":"AJAX"},"xxgs":3};
    var jsonobj = {"wtsm":"你的感想","wtlx":"textarea","cols":50 ,"rows":5};

    var q=document.getElementById("answer1")
    q.innerHTML="<p>"+ jsomObj.wtsm+"</p>"+"<input type="+jsomObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsomObj.xxnr.a1+"<input type="+jsomObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsomObj.xxnr.a2+"<br>";
    q.innerHTML=q.innerHTML+"<p>"+ jsonObj.wtsm+"</p>"+"<input type="+jsonObj.wtlx+" "+"name="+jsonObj.xxgs+">"+jsonObj.xxnr.a1+"<input type="+jsonObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsonObj.xxnr.a2+"<input type="+jsonObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsonObj.xxnr.a3+"<br>";
    q.innerHTML=q.innerHTML+"<p>"+ jsonobj.wtsm+"</p>"+"<"+jsonobj.wtlx+" "+"cols="+jsonobj.cols+" "+"rows="+jsonobj.rows+">";
      
       if(document.getElementById('answer1').style.display == 'none'){
            document.getElementById('answer1').style.display = '';
            document.testform.button.value ="隐藏问题";
          }else{
           document.getElementById('answer1').style.display = 'none';
            document.testform.button.value ="显示问题";
          }
    }      
    -->
     
    </script>
    
     </head>
     <body>
      <center>
      <form name="testform" id="testform" action="#" method="get">
       <table align="center" width="40%" border="1px"  bordercolor="yellow" bgcolor="blur" style="BORDER-COLLAPSE: collapse">
        <tr><td width="50%">投票人*</td><td width="50%"><input type="text" id="ren" name="ren" value=""/></td></tr>
        <tr><td width="50%">投票人编号*</td><td width="50%"><input type="text" id="renno" name="renno" value=""/></td></tr>
        <tr><td width="50%">日期*</td><td width="50%"><input type="text" id="hiredate" name="hiredate" value=""/></td></tr>
        <tr><td width="50%">投票地点*</td>
         <td width="50%">
          <select>
           <option  selected="selected">中国</option>
           <option>日本</option>
          </select>
         </td>
        </tr>
        <tr>
         <td width="50%">性别</td>
         <td><input type="radio" name="sex" value="boy" checked="checked"/>男
           <input type="radio" name="sex" value="girl"/>女</td>
        </tr>
        <tr>
         <td width="50%">所在楼*</td>
         <td>
          <select  name="country" id="country" οnchange="addOptions(rooms[this.options[this.selectedIndex].text],document.testform.room);">
           <option>A1</option>
           <option>A2</option>
           <option>A3</option>
           <option>A4</option>
          </select>
         </td>
        </tr>
       <tr>
         <td width="50%">所在房间*</td>
         <td width="50%">
          <select name="room" id="room">
           <option>A1001</option>
           <option>A1002</option>
           <option>A1003</option>
           <option>A1004</option>
           <option>A1005</option>
          </select>
         </td>
        </tr>
        <tr>
         <td colspan="2" id="answer" οnclick="doClick()">
          <input type="button" name="button" value="显示问题">
          </td>
        </tr>
        <tr> 
         <td colspan="2" id = "answer1" style="display:none;">
          <table width="100%" border="1">
             </table>
           </td>
         </tr>

        <tr>
         <td colspan="2">
          <center><input type="button" name="tijiao" value="提交" οnclick="match()" /></center>
         </td>
        </tr>
       </form>
      </table>
     </center>
     </body>
    </html>

hanchaob323

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js+html实现表单

教学质量投票系统 <!-- //表单 //用户名 function match(){ var exp= /^[\u4e00-\u9fa5]{2,4}$/; var mm = document.getElementById("ren").value; aa(mm); function
复制链接

扫一扫

专栏目录