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

Implementation of form submission in html

JS realizes picture digital clock

A complete list of common Linux system commands for beginners

JavaScript to achieve fancy carousel effect

Example of using nested html pages (frameset usage)

A brief analysis of the differences and functions between transition, transform, and translate in CSS3

Detailed explanation of homology and cross-domain required for front-end interviews

Docker Compose installation methods in different environments

How to modify port 3389 of Windows server 2008 R2 remote desktop

Methods and steps to use http-proxy-middleware to implement proxy cross-domain in Node

Detailed steps to install Nginx on Linux

Recommend

Example code for hiding element scrollbars using CSS

How to install WSL2 Ubuntu20.04 on Windows 10 and set up the docker environment

How to set static IP in centOS7 NET mode

Implementation of IP address configuration in Centos7.5

How to write high-quality JavaScript code

Creative opening effect achieved by combining CSS 3.0 with video

CSS code to control the background color of the web page

vue-electron problem solution when using serialport

Detailed explanation of pure SQL statement method based on JPQL

Vue implements a movable floating button

A brief discussion on the use of React.FC and React.Component

JS ES new feature of variable decoupling assignment

Brief analysis of centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

MySQL optimization query_cache_limit parameter description

HTML hyperlink style (four different states) setting example