了解HTML表单之form元素_html/css_WEB-ITnose

目录 [1]表单名称 [2]字符集 [3]提交地址 [4]打开方式 [5]数据编码 [6]数据发送 [7]自动完成 [8]表单验证

前面的话

　　表单是网页与用户的交互工具，由一个

元素作为容器构成，封装其他任何数量的表单控件，还有其他任何元素里可用的标签

　　表单能够包含、、、<fieldset>、<legend>、<label>等表单控件元素</label> </legend> </fieldset>

　　[注意]表单里嵌套表单是不允许的

 

form元素

　　form元素有accept-charset、action、autocomplete、enctype、method、name、novalidate、target共8个属性，其中action和name属性为必需项

表单名称

　　name属性规定表单名称，如果name="test"，则Javascript可以使用document.forms.test来获取该表单

<form method="get" action="form.php" name="test"></form>    <script>    var oForm = document.forms.test;    console.log(oForm.method);//get</script>

 

字符集

　　accept-charset属性规定服务器用哪种字符集处理表单数据，通常不指定，那么页面的字符编码会被使用

 

提交地址

　　action属性规定提交表单时，向何处发送表单数据；如果忽略这个属性，表单会重定向到表单所在的URL

 

打开方式

　　target属性规定在何处打开action URL。共5个值_blank、_self、_parent、_top、framename。

　　关于target属性的使用移步至此

 

数据编码

　　enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。大多数情况下该属性不需要设置

　　application/x-www-form-urlencoded 　　在发送前编码所有字符（默认）

　　multipart/form-data 　　　　　　　　   不对字符编码。在使用包含文件上传控件的表单时，必须使用该值

　　text/plain 　　　　　　　　　　　　      空格转换为 "+" 加号，但不对特殊字符编码

 

数据发送

　　表单可以用两种方式发送数据：GET和POST，默认为GET方法。

POST方法
　　如果采用POST方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与action属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

　　在服务器端，一旦POST样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

【应用场景】

　　[1]大数据处理，因为POST方法相比GET方法而言，处理更多字段

　　[2]安全数据，因为GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录；而POST方法则没有这方面的漏洞

GET方法

　　如果采用GET方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的action URL之后。这两者之间用问号进行分隔。

【应用场景】

　　[1]获得最佳表单传输性能，因为GET发送只有少数简单字段

　　[2]简单处理，因为GET方法无需处理编码解码方法

　　[3]传参处理，因为GET方法允许把表单的参数包括进来作为 URL 的一部分

<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><?phpif(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){    echo "x: " .$_REQUEST["x"] ."<br>";    echo "y: " .$_REQUEST["y"];}?>    </p>

 

自动完成

　　autocomplete属性规定表单是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项

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

 

表单验证

　　novalidate属性规定当提交表单时不对其进行验证

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