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 explanation of HTML document types

Mine is: <!DOCTYPE html> Blog Garden: <!...

React nested component construction order

Table of contents In the React official website, ...

In-depth analysis of the diff algorithm in React

Understanding of diff algorithm in React diff alg...

Solution to the problem of web page flash animation not displaying

<br />The solution steps are as follows: Sta...

Some questions about hyperlinks

<br />I am very happy to participate in this...

Summary of the differences between Html, sHtml and XHtml

For example: <u> This has no ending characte...

Have you carefully understood Tags How it is defined How to use

Preface : Today I was asked, "Have you carefu...

Detailed explanation of Linux mpstat command usage

1. mpstat command 1.1 Command Format mpstat [ -A ...

Axios cancel request and avoid duplicate requests

Table of contents origin status quo Cancel reques...

Restart all stopped Docker containers with one command

Restart all stopped Docker containers with one co...

The difference between shtml and html

Shtml and asp are similar. In files named shtml, s...

How to configure the pdflatex environment in docker

Technical Background Latex is an indispensable to...

The three new indexes added in MySQL 8 are hidden, descending, and functions

Table of contents Hidden, descending, and functio...

Nginx configuration SSL and WSS steps introduction

Table of contents Preface 1. Nginx installation 1...