“实例:表单验证”的版本间的差异

来自CloudWiki
跳转至: 导航搜索
实例:用户调查表
第1行: 第1行:
 +
 
==实例:用户调查表==
 
==实例:用户调查表==
 
  <nowiki><!DOCTYPE html>
 
  <nowiki><!DOCTYPE html>
第8行: 第9行:
 
     function show(){
 
     function show(){
 
         var f=form;
 
         var f=form;
         var str="";
+
         var x="";
         alert("姓名  "+f.name.value);
+
         x +="姓名  "+f.name.value+"<br>";;
 
         for(i=0;i<f.sex.length;i++){
 
         for(i=0;i<f.sex.length;i++){
 
             if(f.sex[i].checked){
 
             if(f.sex[i].checked){
                 str+=f.sex[i].value;
+
                 x += f.sex[i].value+"<br>";;
 
             }
 
             }
 
         }
 
         }
         alert(str);
+
         x += "喜欢的爱好:";
        str="喜欢的运动:";
 
 
         for(i=0;i<f.inst.length;i++){
 
         for(i=0;i<f.inst.length;i++){
 
             if(f.inst[i].checked){
 
             if(f.inst[i].checked){
                 str+=f.inst[i].value+"、";
+
                 x += f.inst[i].value+"、";
 
             }
 
             }
 
         }
 
         }
         alert(str);
+
         document.getElementById("demo").innerHTML=x;
 
     }
 
     }
 
</script>
 
</script>
第36行: 第36行:
 
         <input type="button" value="显示" onclick="show()">
 
         <input type="button" value="显示" onclick="show()">
 
     </form>
 
     </form>
 +
    <p id="demo"></p>
 
</body>
 
</body>
 
</html></nowiki>
 
</html></nowiki>

2018年2月9日 (五) 09:48的版本

实例:用户调查表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function show(){
        var f=form;
        var x="";
        x +="姓名   "+f.name.value+"<br>";;
        for(i=0;i<f.sex.length;i++){
            if(f.sex[i].checked){
                x += f.sex[i].value+"<br>";;
            }
        }
        x += "喜欢的爱好:";
        for(i=0;i<f.inst.length;i++){
            if(f.inst[i].checked){
                x += f.inst[i].value+"、";
            }
        }
        document.getElementById("demo").innerHTML=x;
    }
</script>
</head>
<body>
    <form name="form" action="" method="post">
        姓名:<input type="text" name="name" size="6"> <br>
        性别:<input type="radio" name="sex" value="男" checked="checked"> 男
        <input type="radio" name="sex" value="女">女  <br>
        兴趣:<input type="checkbox" name="inst" value="游泳" checked="checked">游泳
        <input type="checkbox" name="inst" value="滑冰">滑冰
        <input type="checkbox" name="inst" value="编程">编程
        <input type="button" value="显示" onclick="show()">
    </form>
    <p id="demo"></p>
</body>
</html>