HTML Form Enctype Property test

Last Update:2014-12-27 Source: Internet

Author: User

Tags html form

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML Form Enctype

Http://www.w3.org/TR/html401/interact/forms.html#h-17.13.1%E2%80%8D

enctype= Content-type [CI]
This
attribute specifies the content type used to submit the form to the server if the value of is method "p OST "). The default value for this attribute is "application/x-www-form-urlencoded". The value "Multipart/form-data" should is used in combination with the INPUT element, type = "file".

Enctype if not written, the default is application/x-www-form-urlencoded, and if the commit contains a file INPUT element, the type should be multipart/form-data .

What does enctype mean?

and see the following description, the browser processes the form of the third step, the form data collection encoding, encoding is the Content-type value specified by Enctype. The encoding format is part of the HTTP protocol that both the client and server follow.

Step three:encode The form data set
The form data set is then encoded according to the content type specified by the enctype attribute of the FORM element.

But is enctype in either of these types?

Looking at the specification description, only the UA is required to support these two types, and the other Content-type types are not defined.

17.13.4 form Content types
The enctype attribute of the form element specifies the content type used to encode the form data set for submission to the server. User agents must support the content types listed below. Behavior for other content types is unspecified.

...
application/x-www-form-urlencoded
This is the default content type. Forms submitted with this content type must is encoded as follows:

....
multipart/form-data

...

enctype Usage Test

First, the enctype only takes effect when the Post method is used, and the Get method uses the Application/x-www-form-urlencoded encoding method by default.

If method The IS "get" and the is an action HTTP URI, the user agent takes the value action of, appends a to `?‘ it, then app Ends the form data set, encoded using the "application/x-www-form-urlencoded" content type. The user agent then traverses the link to this URI. In this scenario, form data is restricted to ASCII codes.

If method The IS "post" and the action was an HTTP URI, the user agent conducts an HTTP "post" transaction using the value of The action attribute and a message created according to the content type specified by the enctype attribute.

Constructs a form containing the file control, and also includes an input box, which changes enctype to the following values, and the view request messages are encoded according to application/x-www-form-urlencoded:

1, do not write Enctype properties

2, write Enctype but the value is empty:

3, writing enctype value is undefined value:

4, writing enctype for

Code:

<HTML><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <Scriptsrc= "./jquery.js"></Script>    <Linkrel= "stylesheet"href= "./test.css" /></Head><Body>    <style>    </style>    <formID= "FileUpload"name= "FileUpload"Method= "POST"Action= "/index.php"enctype= "SSS">        <inputtype= "File"name= "Testfile"></BR>        <inputtype= "text"name= "TextInput"value= "Textinputvalue"></BR>        <inputtype= "Submit"value= "Upload"></BR>    </form>    <Script>    </Script></Body></HTML>

Grab Bag:

POST http://wwwtestcom/index.php http/1.1
Host:wwwtestcom
user-agent:mozilla/5.0 (Windows NT 6.1; rv:32.0) gecko/20100101 firefox/32.0
accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-encoding:gzip, deflate
dnt:0
referer:http://wwwtestcom/fileupload.php
Connection:keep-alive
content-type:application/x-www-form-urlencoded
content-length:56

Testfile=%e5%91%a8%e6%8a%a5.txt&textinput=textinputvalue

Modify Enctype to Multipart/form-data

Grab Bag:

POST http://wwwtestcom/index.php http/1.1
Host:wwwtestcom
user-agent:mozilla/5.0 (Windows NT 6.1; rv:32.0) gecko/20100101 firefox/32.0
accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-encoding:gzip, deflate
dnt:0
referer:http://wwwtestcom/fileupload.php
Connection:keep-alive
Content-type:multipart/form-data; boundary=---------------------------734115918637
content-length:299

-----------------------------734115918637
Content-disposition:form-data; Name= "Testfile"; Filename= "Test.txt"
Content-type:text/plain

-----------------------------734115918637
Content-disposition:form-data; Name= "TextInput"

Textinputvalue
-----------------------------734115918637--

Also, demonstrate that the following file control can select multiple files:

Code:

<HTML><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <Scriptsrc= "./jquery.js"></Script>    <Linkrel= "stylesheet"href= "./test.css" /></Head><Body>    <style>    </style>    <formID= "FileUpload"name= "FileUpload"Method= "POST"Action= "/index.php"enctype= "Multipart/form-data">        <inputtype= "File"name= "Testfile"multiple= "multiple"></BR>        <inputtype= "text"name= "TextInput"value= "Textinputvalue"></BR>        <inputtype= "Submit"value= "Upload"></BR>    </form>    <Script>    </Script></Body></HTML>

Select two files, grab the bag--you can see the newspaper style, there are two testfile part, each of which corresponds to a file:

POST http://wwwtestcom/index.php http/1.1
host:wwwtestcom
user-agent:mozilla/5.0 (Windows NT 6.1; rv:32.0) gecko/20100101 firefox/32.0
accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-encoding:gzip, deflate
dnt:0
referer:http:/ /wwwtestcom/fileupload.php
connection:keep-alive
Content-type:multipart/form-data; boundary=------------- --------------25276621921226
content-length:451

-----------------------------25276621921226
Content-disposition:form-data; Name= "Testfile"; Filename= "Test.txt"
Content-type:text/plain

-----------------------------25276621921226
Content-disposition:form-data; Name= "Testfile"; Filename= "Test1.txt"
Content-type:text/plain

-----------------------------25276621921226
Content-disposition:form-data; Name= "TextInput"

textinputvalue
-----------------------------25276621921226--

HTML Form Enctype Property test

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More