Basic use of form

form Attributes of the tag  

1.action The value of the property should be a value provided by the backend url Address , This url The address is specifically responsible for receiving the data submitted by the form  

When <form> Expressed in unspecified action In the case of attribute values ,action The default value of is... Of the current page url Address  

Be careful : When the form is submitted , The page will immediately jump to action Property specified url Address  

2. target Property is used to specify where to open action URL

 3. method Property is used to specify how to submit form data to action url . Optional values are get and post

By default ,method The value of is get, Said by url Submit the form data to action url 

Be careful : Get This method is suitable for submitting a small number of 、 Simple data ,

         Post This method is suitable for submitting a large number of 、 complex 、 Or contain the data uploaded by the file  

4. enctype Property is used to specify before sending form data How to encode data  

---

Synchronous submission of forms and its disadvantages  

1. What is synchronous submission of forms  

By clicking on submit Button , Action that triggers form submission , So that the page jumps to action URL act , Synchronous submission of forms .

2. Disadvantages of form synchronous submission  

• <form> After the form is submitted synchronously , The whole page will jump , Jump to action url The address pointed to , The user experience is terrible .
• < form> After the form is submitted synchronously , The status and data before the page will be lost .

3. How to solve the shortcomings of form synchronous submission  

The form is only responsible for collecting data ,Ajax Responsible for submitting data to the server  

---

Listen for form submission Events

1. stay jQuery in , Two ways can be used , Listen to the submission event of the form

    <form action="/login" id="f1">        <input type="text" name="user_name" />        <input type="password" name="password" />        <button type="submit"> Submit </button>    </form>    <script>        // The first way         $(function() {            //     $('#f1').submit(function() {            //         alert(' Listening to the submission event of the form  ')            //     })            // The second way             $('#f1').on('submit', function() {                alert(' Listening to the submission event of the form ')            })        })    </script>

2. Block the default form submission behavior

When the supervisor hears the submission event of the form , You can call the... Of the event object event.preventDefault() function , To prevent form submission and page Jump , The sample code is as follows ：

 <script>        // The first way         $(function() {            $('#f1').submit(function(e) {                // Prevent form submission and page Jump                 e.preventDefault()            })            // The second way             // $('#f1').on('submit', function(e) {            // Prevent form submission and page Jump             //e.preventDefault()            // })        })    </script>

3. Get form data quickly

  Use serialize() function , The function example is as follows ：

    <script>        // The first way         $(function() {            $('#f1').submit(function(e) {                    // Prevent form submission and page Jump                     e.preventDefault()                    var data = $(this).serialize()                    console.log(data);                })              })    </script>

   Be careful : In the use of serialize() Function to get form data quickly , You must add... For each form element name attribute