<html>
<head>
<title>用Javascript自动生成各种表单webjx.com</title><!--标题部分-->
<style type="text/css">
body{
}
div{
border:1 solid silver;
width:300px;
height:350px;
padding:px;
font-size:12px;
color:green;
position:absolute;
left:0px;
top:0px;
padding-top:10px;
}
textarea{
position:absolute;
left:310px;
top:0px;
width:400px;
height:300px;
color:maroon;
}
input{
font-size:12px;
}
.NUM{
width:30px;
border:1 solid #000;
height:20px;
}
.opt{
font-size:11px;
border:1 solid red;
width:100px;
height:20px;
}
</style>
<script type="text/javascript" defer="defer">
function Make_Code(){
//code_value.value="";
var obj=document.getElementsByTagName("form")[0];
var n=obj.elements[0].value; //表单的个数;
if(n==""){
alert("请输入要生成的表单个数!\n\t^_^");
}
n=Number(n);
var sel_value=obj.elements[1].options[obj.elements[1].selectedIndex].value; //表单类型;
//alert(n+" : "+typeof n+"\n"+sel_value);
code_value.value+="<form>";
for(var i=0;i<n;i++){
if(sel_value=="image"){
obj.elements[3].style.display="block";
var img_src=obj.elements[3].value;
code_value.value+="<input type=\""+sel_value+"\" name=\""+sel_value+"_"+i+"\" src=\""+img_src+"\" />";
}
else if(sel_value=="radio"){
code_value.value+="<input type=\""+sel_value+"\" name=\""+sel_value+"_"+n+"\" />"+sel_value+"_"+i+" ";
}
else if(sel_value=="checkbox"){
code_value.value+="<input type=\""+sel_value+"\" name=\""+sel_value+"_"+i+"\" />"+sel_value+"_"+i+" ";
}
else if(sel_value=="text"){
code_value.value+=sel_value+"_"+i+" : <input type=\""+sel_value+"\" name=\""+sel_value+"_"+i+"\" /><br>";
}
else{
code_value.value+="<input type=\""+sel_value+"\" name=\""+sel_value+"_"+i+"\" value=\""+sel_value+"_"+i+"\" /> ";
}
}
code_value.value+="</form>";
}
function run_code(){
var win_code=window.open("","new_win","");
win_code.document.writeln(code_value.value);
win_code.document.close();
}
function check_type(){
var obj=document.getElementsByTagName("form")[0];
if(obj.elements[1].value=="image"){
obj.elements[3].style.display="block";
}
else{
obj.elements[3].style.display="none";
}
}
</script>
</head>
<body>
<div>
<form>
<center><h3>自动生成表单</h3></center>
表单个数:<input type="text" class="NUM" />
表单类型:
<select class="opt" onChange="check_type()">
<option value="file" checked>file
<option value="text">text
<option value="button">button
<option value="image">image
<option value="radio">radio
<option value="checkbox">checkbox
<option value="reset">reset
<option value="submit">submit
</select>
<button onclick="Make_Code()" style="height:22px;padding:0px;width:50px;">确定</button><br>
<input type="file" style="width:300px;display:none;" />
</form>
</div>
<textarea id="code_value">
</textarea>
<div id="buttons" style="text-align:center;padding-top:10px;width:400px;height:50px;position:absolute;left:310px;top:300px">
<button onclick="run_code()">运行代码</button>
<button onclick="code_value.value='';">清除代码</button>
</div>
</body>
</html>