<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
form {
width: 241px;
}
textarea,select,button,input,span{
display: none;
}
.btn {
border: 1px solid #666666;
padding: 2px;
width: 60px;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ece9d8);
}
.txt {
border: 1px solid #666666;
padding: 3px;
}
.img {
padding: 2px;
border: 1px solid #CCCCCC;
}
.div {
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
padding: 5px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("#p1").click(function () {
$("#form1 div").html("表单共找出input类型元素：" +
$("#form1 :input").length);
$("#form1 div").addClass("div");
});
$("#p2").click(function () {
$("#form1 :text").show("normal");
$("#form1 textarea").show("normal");
});
$("#p3").click(function () {
$("#form1 :password").show("normal");
});
$("#p4").click(function () {
$("#form1 :radio").show("normal");
$("#form1 #span1").show("normal");
});
$("#p5").click(function () {
$("#form1 :checkbox").show("normal");
$("#form1 #span2").show("normal");
});
$("#p6").click(function () {
$("#form1 :submit").show("normal");
});
$("#p7").click(function () {
$("#form1 :image").show("normal");
});
$("#p8").click(function () {
$("#form1 :reset").show("normal");
});
$("#p9").click(function () {
$("#form1 :button").show("normal");
});
$("#p10").click(function () {
$("#form1 :file").show("normal");
});
});
</script>
</head>
<body>
<form id="form1">
<textarea class="txt">TextArea</textarea><br>
<select><option value="0">Item 0</option></select><br>
<input type="text" value="Text" class="txt"><br>
<input type="password" value="Password" class="txt"><br>
<input type="radio"><span id="span1">Radio</span><br>
<input type="checkbox"><span id="span2">Checkbox</span><br>
<input type="submit" value="submit" class="btn"><br>
<input type="image" title="Image" src="images/logo.gif" class="img"><br>
<input type="reset" value="Reset" class="btn"><br>
<input type="button" value="Button" class="btn"><br>
<input type="file" title="File" class="txt"><br>
<div id="divShow"></div>
<p id="p1">divshow</p>
<p id="p2">:text</p>
<p id="p3">:password</p>
<p id="p4">:radio</p>
<p id="p5">:checkbox</p>
<p id="p6">:submit</p>
<p id="p7">:image</p>
<p id="p8">:reset</p>
<p id="p9">:button</p>
<p id="p10">:file</p>
</form>
</body>
</html>