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

Linux touch command usage examples

Detailed explanation of linux touch command: 1. C...

Share 20 JavaScript one-line codes

Table of contents 1. Get the value of browser coo...

Detailed explanation of adding security group rules to Alibaba Cloud Server (graphic tutorial)

Overview of Alibaba Cloud Security Group Sharing ...

Example code of Vue3 encapsulated magnifying glass component

Table of contents Component Infrastructure Purpos...

CSS implements horizontal scrolling navigation bar on mobile devices (also applicable to PC devices)

Function Origin I was recently working on an H5 t...

Solve the problem that the service cannot be started when installing the decompressed version of mysql 5.7.18 winx64 on Win7 x64

Today I downloaded mysql-5.7.18-winx64.zip from t...

Weather icon animation effect implemented by CSS3

Achieve results Implementation Code html <div ...

TypeScript enumeration basics and examples

Table of contents Preface What are enums in TypeS...

Summarize several common ranking problems in MySQL

Preface: In some application scenarios, we often ...

A simple way to restart QT application in embedded Linux (based on QT4.8 qws)

Application software generally has such business ...

Detailed explanation of the production principle of jQuery breathing carousel

This article shares the specific process of the j...

How to Check Memory Usage in Linux

When troubleshooting system problems, application...

How to introduce Excel table plug-in into Vue

This article shares the specific code of Vue intr...

Vue implements the method example of tab routing switching component

Preface This article introduces the use of vue-ro...

A brief analysis of MySQL cardinality statistics

1. What is the cardinality? Cardinality refers to...