Form is a web page interaction with a user tool, made as an element constituting the container, any other number of packages form controls, as well as any other <body>elements in the label is available
Forms can contain <input>, <menus>, <textarea>, <fieldset>, <legend>, <label>and other form control elements
Note: The form is not allowed in nested form
form elements
form element has accept-charset, action, autocomplete, enctype, method, name, novalidate, target attributes 8, where action is required and the property item name
Form Name
name attribute specifies the name of the form, if name = "test", you can use Javascript to get the form document.forms.test
<form method="get" action="form.php" name="test"></form>
<script>
var oForm = document.forms.test;
console.log(oForm.method);//get
</script>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
character set
accept-charset attribute is a space-separated list of character sets, the server provides the data processing form the accepted character set. accept-charset attribute allows you to specify a range of characters, the server must support these character sets, and thus able to correctly interpret the data in a form. The value of this attribute is a quoted character set that contains a list of names. If the character acceptable character set used by the user, i.e. it does not match, the browser may choose to ignore the form or forms treated differently. The default value of this property is "unknown", represents a form of the character set and character set of the document that contains the form of the same. In previous versions of HTML, the different character encoding may be separated by spaces or commas. In HTML5, only the space may be allowed as a delimiter
Submitted address
When the action attribute specifies the form is submitted, where to send the form data; if ignore this attribute, the form will be redirected to the URL form located. This value can be <button>or <input>formaction attribute overload elements (cover)
Open
target attribute specifies where to open the action URL. Values of 5 * blank, * self, * parent, * top, framename.
Data encoding
enctype attribute specifies before being sent to the server how to encode the form data. This property does not require setting in most cases. This value can be <button>or <input>formenctype attribute overload elements (covered). When the method attribute is post, enctype form is submitted to the MIME type of the content server. Possible values are:
application / x-www-form-urlencoded encoding before sending all characters (default)
multipart / form-data does character encoding. When using the form contains file upload control, you must use that value
text / plain spaces converted to "+" plus, but not a special character encoding
Data transmission
Form data may be transmitted in two ways (method): GET and POST, GET method by default. This attribute value may be overloaded or formmethod elements (cover)
POST method
If POST method, the browser will transmit data in the following two steps. First, the browser with the specified action attribute form processing server to establish contact, once the connection is established, the browser according to the method of transmitting data segments transmitted to the server
On the server side, once the POST style application begins executing, the parameters should be read from a flag, once read parameter values in these forms can be used before the application, these parameters must be decoded. How user-specific server application should explicitly accept these parameters
[Scenarios]
1, a large data processing, in terms of the POST method as compared to the GET method, the processing more fields
2, data security, because the GET method to form URL parameters directly in the application, so the network snoopers can easily catch them, you can also extract from the log file server; and the POST method is not in this area loophole
GET method
If the GET method, the browser establishes a connection with a form processing server then sends all data directly form a transmitting step: after the browser sends data directly attached form action URL. Separated by a question mark between the two.
[Scenarios]
1, form the best transmission performance, because only a few simple send GET field
2, the processing is simple, because the GET method process without encoding and decoding method
3, the processing parameter passing, because the method allows GET parameter forms included as part of the 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>
<?php
if(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){
echo "x: " .$_REQUEST["x"] ."<br>";
echo "y: " .$_REQUEST["y"];
}
?>
</p>
automatic completion
autocomplete HTML5 is a new property, whether prescribed form should enable auto-completion. When a user starts typing in the field, the browser-based typed before the value, it should show to fill in the field Options
Note: IE browser does not support the property, only the element has name attribute, which is valid
<form autocomplete="on | off"> //该属性默认为on，当设置为off时，规定禁用自动完成功能</pre>
<pre style="-webkit-tap-highlight-color: transparent; font-family: Courier, "Courier New", monospace; display: block; padding: 1em; border: 2px solid rgb(221, 221, 221); border-radius: 4px; overflow-x: auto; line-height: 1.6; background: rgb(248, 248, 248);"><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>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
form validation
novalidate HTML5 is a new property, shall not be verified when the form is submitted
Note: IE9- not supported
<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>
