Implementation of form submission in html

Implementation of form submission in html

Form submission code

1. Source code analysis

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form action="/form.html" method="GET">
    <!-- action: the address to which the form is submitted-->
    <!-- method: method for submitting insurance policy -->
<div class="name">
    <label for="name">Username</label>
    <input type="text" name="name" id="name" placeholder="Please enter your user name">
    <!-- placeholder is a transparent prompt text -->
</div>
<div class="password">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="Please enter your password">
</div>
<div class="sex">
    <label for="sex">Gender</label>
    <input type="radio" name="sex" value="male">Male<input type="radio" name="sex" value="female">Female</div>
<div class="city">
    <label for="city">Favorite city</label>
    <select name="city" id="city">
        <option value="beijing">Beijing</option>
        <option value="shanghai">Shanghai</option>
        <option value="chongqing" selected >Chongqing</option>
        <!-- selected indicates the option that is selected and displayed on the page -->
    </select>
</div>

<div class="hobby">
        <label for="hobby">Hobbies</label>
        <input type="checkbox" name="hobby" value="read">Reading<input type="checkbox" name="hobby" value="flower">Flower arranging<input type="checkbox" name="hobby" value="sing">Singing<!-- All option names must be the same-->
</div>
<div class="area">
    <textarea id="area" name="area" cols="30" rows="10"></textarea>
</div>
<button>button</button>
<!-- You can submit the form -->
<input type="submit" value="submit"> 
<!-- You can submit the form -->
<input type="button" value="button">
<!-- Cannot submit form-->
<input type="reset" value="reset">
<!-- Reset the content already entered in the form -->

</form>
</body>
</html>

2. Terminal operation

Open the terminal gitbash and switch to the folder where html is located

Use the command line http-server to open the static server, and two IP addresses will appear after opening it. 127.xxx is the local access address, 125.xxx is the LAN access address (the premise here is that nodejs has been installed and the http-server server has been installed with npm)

Open the html file with your browser. Replace the local file address with http://127.0.0.1:8080.

Click on Check-network-header to see the information submitted by the form

3. Differences between get and post methods

  • Get concatenates the submitted data into a URL using &, which becomes the content of the query in the URL object. But the post URL is very clean
  • The amount of data submitted is different. Get can submit up to 1k data. If the browser limit is exceeded, the data will be truncated. Theoretically unlimited post, subject to server restrictions
  • The data submitted by get is in the browser history, which is not safe.
  • get is about "wanting", post is about "giving"

4. Notes

All input tags must be added with a name attribute, otherwise the data cannot be received correctly.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Summarize the common properties of BigIn functions in JavaScript

>>:  Detailed explanation on how to install MySQL database on Alibaba Cloud Server

Recommend

JavaScript implements simple calculator function

This article shares the specific code of JavaScri...

A brief discussion on the use of GROUP BY and HAVING in SQL statements

Before introducing the GROUP BY and HAVING clause...

Detailed explanation of tcpdump command examples in Linux

Preface To put it simply, tcpdump is a packet ana...

jQuery plugin to implement search history

A jQuery plugin every day - to make search histor...

How to delete garbled or special character files in Linux

Due to encoding reasons, garbled characters will ...

Example code for converting html table data to Json format

The javascript function for converting <table&g...

Non-standard implementation code for MySQL UPDATE statement

Today I will introduce to you a difference betwee...

Comment reply pop-up mask effect implementation idea compatible with ie 8/chrome/firefox

I like to pay attention to some news on weekdays a...

Three ways to check whether a port is open in a remote Linux system

This is a very important topic, not only for Linu...

Solution to BT Baota Panel php7.3 and php7.4 not supporting ZipArchive

The solution to the problem that the PHP7.3 versi...

uni-app implements NFC reading function

This article shares the specific code of uni-app ...

How to install MySQL 5.7.29 with one click using shell script

This article refers to the work of 51CTO blog aut...

React hooks pros and cons

Table of contents Preface advantage: shortcoming:...

Summary of commonly used performance test scripts for VPS servers

Here is a common one-click performance test scrip...

CSS3 implements the sample code of NES game console

Achieve resultsImplementation Code html <input...