表单是网页与用户的交互工具，由一个<form>元素作为容器构成，封装其他任何数量的表单控件，还有其他任何<body>元素里可用的标签
form元素
表单名称
<form method="get" action="form.php" name="test"></form> <script> var oForm = document.forms.test; console.log(oForm.method);//get </script>
字符集
提交地址
打开方式
blank、self、parent、top、framename。
数据编码
数据发送
POST方法
【应用场景】
GET方法
【应用场景】
<h3>get方法</h3> <form method="get" action="form.php" target = "_blank"> <p><label>x:<input name="x"></label></p> <p><label>y:<input name="y"></label></p> <p><button type="submit">Submit</button></p> </form> <a title="form.php?x=28&y=66" href="form.php?x=28&y=66">a标签传参</a> <h3>post方法</h3> <form method="post" action="form.php" target = "_blank"> <p><label>x:<input name="x"></label></p> <p><label>y:<input name="y"></label></p> <p><button type="submit">Submit</button></p> </form>
//GET方法的URL显示为： http://127.0.0.1/form.php?x=1&y=2 //POST方法的URL显示为：http://127.0.0.1/form.php <p> <?php if(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){ echo "x: " .$_REQUEST["x"] ."<br>"; echo "y: " .$_REQUEST["y"]; } ?> </p> 自动完成
<form autocomplete="on | off"> //该属性默认为on，当设置为off时，规定禁用自动完成功能
<button id="btn1">打开自动完成</button> <button id="btn2">关闭自动完成</button> <form method="get" action="#" name="test"> <p><label>x:<input name="x"></label></p> <p><label>y:<input name="y"></label></p> <p><button type="submit">Submit</button></p> </form> <script> var oForm = document.forms.test; btn1.onclick = function(){ oForm.autocomplete = 'on'; }; btn2.onclick = function(){ oForm.autocomplete = 'off'; }; </script> 表单验证
<button id="btn1">打开验证</button> <button id="btn2">关闭验证</button> <form method="get" action="#" name="test"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> <script> var oForm = document.forms.test; btn1.onclick = function(){ oForm.removeAttribute('novalidate'); }; btn2.onclick = function(){ oForm.setAttribute('novalidate',''); }; </script>