Home > Daily Programming > HTML Knowledge > HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

藏色散人
Release: 2018-09-11 17:32:54
Original
5090 people have browsed it

This article mainly introduces you to the specific operation method of submitting data in the multi-select box in the HTML form and the analysis of the reasons why multiple data cannot be submitted.

HTML forms are usually used to collect data entered by users and then submit the data to the server for interaction. Then everyone should know that HTML can collect user data through radio button or multi-select boxes.

Below we will introduce to you the related operations of obtaining data from the HTML form multi-select box through specific code examples.

HTML form code example is as follows:

<form action="upload.php" method="post">
    <input type="checkbox" name="like" value="篮球">篮球<br>
    <input type="checkbox" name="like" value="足球">足球<br>
    <input type="checkbox" name="like" value="排球">排球<br>
    <input type="checkbox" name="like" value="乒乓球">乒乓球<br>
    <input type="submit" value="确定">
</form>
Copy after login

Accessed through the browser, the multi-select box effect is as follows:

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

From the above HTML form code and pictures, you can see that when we select two options and click OK, the selected options will be submitted to the upload.php file through post submission.

upload.php code is as follows:

<?php
var_dump($_POST);
Copy after login


Then PHP processes the data submitted by the HTML form and prints it The result is as shown below:

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

Everyone should have noticed at this time that we clearly submitted two data, why only one data is displayed? Below we will continue to analyze the reasons for this situation.

We changed the method submission method in the above HTML code to get, and then changed the PHP code to

<?php
var_dump($_GET);
Copy after login

Then select the new option, and submit the result accessed through the browser after confirmation As shown below:

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

##Here we can also find that although we selected three values, the submission was successful. Only one value is obtained. In fact, the main reason is because the names in the input are all the same, and when the name values ​​in the HTML form input are the same, the last value will overwrite the previously selected value. For example, in the above example, upload.php only receives one value of "volleyball", and the previous two values ​​​​are overwritten.

If you want to get multiple data, you need to use the JS method, which has been introduced to you in this article [

How to get multiple values ​​selected in the checkbox in js] , friends in need can refer to it.

So the above is an introduction to the operation method of submitting data in the multi-select box in the HTML form and the analysis of the reasons why multiple data cannot be submitted. We also have the corresponding

video tutorial[In the HTML form Analysis of the reasons why multiple data in the multi-select box cannot be submitted to the background] is available for everyone to learn from.

The above is the detailed content of HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template