Measure the test taker's knowledge about the form elements of HTML forms.
Directory [1] form name [2] Character Set [3] submit Address [4] Open Mode [5] data encoding [6] data transmission [7] Automatic completion of [8] Form Verification previous
A form is an interactive tool between a webpage and a user. It consists of a <form> element as a container, encapsulates any number of other form controls, and any other labels available in the <body> element.
A form can contain <input>, <menus>, <textarea>, <fieldset>, <legend>, <label>, and other form control elements.
[Note] nested forms in a form are not allowed.
Form Element
The form element has eight attributes: accept-charset, action, autocomplete, enctype, method, name, novalidate, and target. The action and name attributes are required.
Form nameThe name attribute specifies the form name. If name = "test", Javascript can use document. forms. test to obtain the form.
<form method="get" action="form.php" name="test"></form> <script> var oForm = document.forms.test; console.log(oForm.method);//get</script>
Character Set
The accept-charset attribute specifies which character set is used by the server to process form data. This parameter is not specified, so the character encoding of the page will be used.
Submission address
The action attribute specifies where the form data is sent when a form is submitted. If this attribute is ignored, the form will be redirected to the URL of the form.
Open Mode
The target attribute specifies where the action URL is opened. There are 5 values in total: _ blank, _ self, _ parent, _ top, and framename.
The usage of the target attribute is now
Data Encoding
The enctype attribute specifies how the form data is encoded before being sent to the server. In most cases, this attribute does not need to be set.
Application/x-www-form-urlencoded encode all characters before sending (default)
Multipart/form-data is not character encoded. This value must be used when using a form containing a file upload control.
Convert text/plain spaces to "+" plus signs, but do not encode special characters
Data Transmission
Form can send data in two ways: GET and POST. The default method is GET.
POST method
If the POST method is used, the browser will send data in the following two steps. First, the browser will establish a connection with the form processing server specified in the action attribute. Once a connection is established, the browser will send the data to the server based on the multipart transmission method.
On the server side, once a POST-style application starts to execute, it should read parameters from a flag location. Once the parameters are read, before the application can use these form values, these parameters must be decoded. The user-specific server will specify how the application should accept these parameters.
[Application Scenario]
[1] Big Data Processing, because the POST method processes more fields than the GET Method
[2] Security data, because the GET method places form parameters directly in the URL of the application, so that Web visitors can easily capture them, the POST method does not have this vulnerability.
GET Method
If the GET method is used, the browser establishes a connection with the form processing server and then directly sends all form data in one transmission step: the browser directly attaches the data to the form's action URL. The two are separated by question marks.
[Application Scenario]
[1] GET the best form transmission performance, because GET sends only a few simple Fields
[2] simple processing, because the GET method does not need to process the encoding and decoding method
[3] Passing parameter processing, because the GET method allows the form parameters to be included as part of the URL
<H3> get method// The URL of the GET method is shown as: http: // 127.0.0.1/form. php? The URL of the x = 1 & y = 2 // POST method is shown as: 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>Automatic completion
The autocomplete attribute specifies whether the Automatic completion function should be enabled for the form. When you start to type a field, the browser displays the options entered in the field based on the previously typed value.
<Form autocomplete = "on | off"> This attribute is on by default. When it is set to off, enable auto-completion <button id = "btn1"> enable auto-completion </button> <button id = "btn2"> disable auto-completion </button> <form method =" get "action =" # "name =" test "> <p> <label> x: <input name = "x"> </label> </p> <label> y: <input name = "y"> </label> </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>Form Verification
The novalidate attribute specifies that a form is not verified when it is submitted.
<Button id = "btn1"> enable verification </button> <button id = "btn2"> disable verification </button> <form method = "get" action = "#" name = "test"> Email: <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>
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
