Home > Developer > Web Develop
Forms are web pages and user interaction tools, consisting of a <form> element as a container, encapsulating any number of other form controls, and any other tags available in the <body> element
Forms can include <input>, <menus>, <textarea>, <fieldset>, <legend>, <label>, and other form control elements
[note] Nested forms in the form are not allowed
Form elementThe form element has accept-charset, action, AutoComplete, Enctype, method, name, Novalidate, Target, and a total of 8 properties, where the action and name properties are required
Form nameThe Name property specifies the form name, and if Name= "test", JavaScript can use Document.forms.test to get the form
Character<form method= "Get" action= "form.php" name= "test" ></form> <script> var oform = document.forms.test; Console.log (Oform.method); // Get</script>
The Accept-charset property specifies which character set the server uses to process the form data, which is usually not specified, so the character encoding of the page is used
Submit AddressThe Action property specifies where to send the form data when the form is submitted, and if this attribute is omitted, the form is redirected to the URL where the form is located
Open modeThe target property specifies where to open the action URL. A total of 5 values _blank, _self, _parent, _top, FrameName.
About the use of the target property
Data encodingThe Enctype property specifies how the form data should be encoded before it is sent to the server. In most cases, this property does not need to be set
Application/x-www-form-urlencoded encode all characters before sending (default)
Multipart/form-data characters are not encoded. You must use this value when you use a form that contains a file upload control
Text/plain space is converted to "+" plus, but not special character encoding
Data sendingA form can send data in two ways: Get and post, which by default is the Get method.
Post method
If the Post method is used, the browser will send the data in the following two steps. First, the browser will contact the form processing server specified in the Action property, and once the connection is established, the browser will send the data to the server in a segmented transfer.
On the server side, once the post-style application starts executing, the parameters should be read from a flag location, and once the parameters are read, the parameters must be decoded before the application can use the form values. User-specific servers explicitly specify how the application should accept these parameters.
"Application Scenario"
[1] Big Data processing because the Post method handles more fields than the Get method
[2] Security data, because the Get method puts form parameters directly in the URL of the application, so that network snooping can easily capture them, but also from the server's log file to extract, and the Post method does not have this vulnerability
Get Method
With the Get method, the browser establishes a connection to the form processing server and then sends all the form data directly in a transfer step: The browser will attach the data directly to the form's action URL. The two are separated by a question mark.
"Application Scenario"
[1] Get the best form transfer performance because get sends only a few simple fields
[2] Simple processing because the Get method does not need to handle the encoding and decoding method
[3] parameter processing, because the Get method allows to include the parameters of the form as part of the URL
Auto-complete// the URL of the Get method is displayed as: http://127.0.0.1/form.php?x=1&y=2 // the URL of the Post method is displayed as: http://127.0.0.1/form.php<p><? PHP if (Isset ($_request["x"]) && isset ($_request["y"]) { "x:". $_request["X"]. " <br> "; " Y: ". $_request[" Y "];}? > </p>The AutoComplete property specifies whether the form should enable auto-completion. When the user starts typing in the field, the browser should display the options that are filled in the field, based on the values you have previously typed.
Form validation<form autocomplete= "on | Off > This property defaults to on, when set to OFF, disable AutoComplete <button id= "btn1" > Turn auto-complete </button><button id= " BTN2 "> Close auto-complete </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 =function() { = ' on 'function() { = ' off ';}; </script>The Novalidate property specifies that the form is not validated when it is submitted
<button id= "BTN1" > Open validation </button><button id= "BTN2" > Turn off Validation </button><form method= "get" action = "#" name= "Test" > E-mail: <input type= "Email" name= "user_email"/> <input type= "Submit" /></form> <script>var oform =function() { Oform.removeattribute (' novalidate 'function() { Oform.setattribute (' Novalidate ', ');}; </script>Understanding form elements of HTML forms
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
