Home>Web design tutorial>HTML tutorial

Implementation of form submission in html

Author：Eve Cole Update Time：2025-01-18 12:48:01

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: Address for form submission --> <!-- method: method of submitting policy --><div class=name> <label for=name>username</label> <input type=text name=name id=name placeholder =Please enter the 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 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 selected to be displayed on the page--> </select></div><div class=hobby > <label for=hobby>Hobby</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><!-- The form can be submitted--><input type=submit value=submit> <!-- The form can be submitted--><input type=button value=button><!-- The form cannot be submitted--><input type=reset value=reset><!-- Reset the content that has been entered in the form--></form></body>< /html>
2. Terminal operation

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

Use the command line http-server to open the static server. After opening, two IP addresses will appear. 127.xxx is the local access address, and 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 a browser. Use http://127.0.0.1:8080 to replace the local file address.

Click the check-network-header to see the information submitted by the form.

3. The difference 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 url of the post is very clean
  • The amount of data submitted varies, and get can submit up to 1k data. If the browser limit is exceeded, the data will be truncated. Post is theoretically unlimited, subject to server restrictions
  • The data submitted by get is in the browser history and has poor security
  • The important thing about get is to give, the important thing about post is to give
4. Things to note

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.

Related Articles