<!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>