HTML form submission method case study

HTML form submission method case study

To summarize the form submission method:

1. Use the submit button to submit. When you click the submit button, the onclick event is triggered. The function in JavaScript determines whether the input content is empty. If it is empty, it returns false and does not submit. If it is not empty, it submits to the address specified by action.

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("Please enter your user account!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("Please enter your login password!");
                    form.password.focus();
                    return false;
                 }
                 return true;
         }
</script>
<form action="login.do?act=login" method="post">
    User Account<input type=text name="userId" size="18" value="" ><br>
    Login password<input type="password" name="password" size="19" value=""/>      
           <input type=submit name="submit1" value="Login" onclick="return check(this.form)">  
</form>

2. Use a button to submit. When you click the button, the onclick event is triggered. The function in JavaScript determines whether the input content is empty. If it is empty, it returns false and does not submit. If it is not empty, it submits to the address specified by the action. Since the button does not have the function of automatic submission, submission is implemented by JavaScript.

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("Please enter your user account!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("Please enter your login password!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="login.do?act=login" name="myform" method="post">
    User Account<input type=text name="userId" size="18" value="" ><br>
    Login password<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="Login" onclick="check(this.form)">  
</form>

3. Use the submit button to implement submission. When the submit button is clicked, the onsubmit event is triggered first. The function in JavaScript determines whether the input content is empty. If it is empty, it returns false and does not submit. If it is not empty, it submits to the address specified by action.

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("Please enter your user account!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("Please enter your login password!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
    User Account<input type=text name="userId" size="18" value="" ><br>
    Login password<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="Login"> 
</form>

The above are the three common ways to submit forms. If you have any questions, please feel free to contact me on QQ: 317856821

This is the end of this article about the detailed case study of HTML form submission method. For more relevant HTML form submission content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • HTML form basic introduction case explanation
  • Analysis of HTML5 XHR2 + FormData + File API file upload operation examples under PHP
  • HTML form and Django form
  • PHP uses HTML5 FormData object to submit form operation example
  • Asp.net webForm setting allows form submission Html method
  • Java Web uses Html5 FormData to implement multiple file uploads
  • Detailed explanation of HTML5 video tag video ratio stretching by transform
  • C# method to call WinForm through HTML

<<:  Analysis of MySQL cumulative aggregation principle and usage examples

>>:  Detailed explanation of the problem that the space is not released after the Linux file is deleted

Recommend

Detailed process of building nfs server using Docker's NFS-Ganesha image

Table of contents 1. Introduction to NFS-Ganesha ...

Detailed explanation of the difference between chown and chmod commands in Linux

In Linux system, both chmod and chown commands ca...

Detailed explanation of sshd service and service management commands under Linux

sshd SSH is the abbreviation of Secure Shell, whi...

How to use html table (to show the visual effect of web page)

We know that when using HTML on NetEase Blog, we ...

How to express relative paths in Linux

For example, if your current path is /var/log and...

MySQL DML statement summary

DML operations refer to operations on table recor...

Linux swap partition (detailed explanation)

Table of contents linux 1. What is SWAP 2. What d...

Solution to inconsistent display of cursor size in input box

The cursor size in the input box is inconsistent T...

Tutorial on installing mysql under centos7

Recently, I plan to deploy a cloud disk on my hom...

How to use type enhancement without typingscript

Preface Due to the weak typing of JS, loose writi...

VMware Workstation virtual machine installation operation method

Virtual machines are very convenient testing soft...

In-depth analysis of MySQL execution plans

Preface In the previous interview process, when a...

Practical example of Vue virtual list

Table of contents Preface design accomplish summa...

Detailed explanation of MySQL Group by optimization

Table of contents Standard execution process opti...

Take you to a thorough understanding of the prototype object in JavaScript

Table of contents 1. What is a prototype? 1.1 Fun...