Formulaire HTML faire une certaine "action" lorsque vous cliquez sur le bouton Soumettre

Je voudrais apprendre sur les formulaires HTML. Par exemple, j'ai 2 champs de saisie de texte pour le prénom et nom de famille et un bouton envoyer. Lorsque le bouton envoyer est cliqué, je voudrais que la page web à afficher quelque chose comme: Votre Nom est "prénom" "Nom de famille".

<!DOCTYPE html>
<html>
   <body>
      <form>
         First name: <input type="text" name="firstname" /><br />
         Last name: <input type="text" name="lastname" /><br />
         <input type="submit" value="Submit" />
      </form> 
   </body>
</html>

De quoi ai-je besoin d'avoir ici afin d'avoir un peu "d'action", quand je clique sur le bouton?

Edit: Ok maintenant je comprendre que j'avais besoin de PHP ou de JavaScript ici. Peut quelqu'un de proposer ou de fournir un exemple de code PHP ou Js comme une référence pour moi?

source d'informationauteur Ronaldinho Learn Coding

form-submit html

Ok, je vais prendre un coup de couteau à présent. Si vous souhaitez travailler avec PHP, vous aurez besoin pour installer et configurer PHP et un serveur web sur votre machine. Cet article pourrait vous aider à démarrer: Manuel PHP: Installation sur les systèmes Windows

Une fois que vous avez de votre environnement d'installation, vous pouvez commencer à travailler avec les formulaires web. Directement à Partir de l'article: Le traitement des données du formulaire avec PHP:

Pour ce faire, vous devrez créer deux pages. Sur la première page
nous allons créer un formulaire HTML simple pour collecter des données. Voici un
exemple:

<html>   
<head>
 <title>Test Page</title>
</head>   
<body>   
    <h2>Data Collection</h2><p>
    <form action="process.php" method="post">  
        <table>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="Name"/></td>
            </tr>   
            <tr>
                <td>Age:</td>
                <td><input type="text" name="Age"/></td>
            </tr>   
            <tr>
                <td colspan="2" align="center">
                <input type="submit"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Cette page
envoyer le Nom et l'Âge de données à la page process.php. Maintenant permet de créer process.php pour utiliser
les données du formulaire HTML nous avons fait:

<?php   
    print "Your name is ". $Name;   
    print "<br />";   
    print "You are ". $Age . " years old";   
    print "<br />";   $old = 25 + $Age;
    print "In 25 years you will be " . $old . " years old";   
?>

Que vous
peut-être conscient, si vous laissez de côté le method="post" une partie de la forme, la
URL à afficher les données. Par exemple, si votre nom est Bill Jones et vous
sont plus de 35 ans, notre process.php la page s'affiche comme
http://yoursite.com/process.php?Name=Bill+Jones&Age=35 Si vous le souhaitez,
vous pouvez modifier manuellement l'URL de cette manière, et le résultat va changer
en conséquence.

JavaScript Supplémentaire Exemple

Ce seul exemple de fichier prend le code html de votre question et les liens de l'événement onSubmit du formulaire à une fonction JavaScript qui tire les valeurs des 2 zones de texte et les affiche dans une boîte d'alerte.

Note: document.getElementById("fname").value récupère l'objet avec le ID balise qui est égal à fname et tire alors c'est value - qui dans ce cas est le texte dans la Première zone de texte Nom.

 <html>
    <head>
     <script type="text/javascript">
     function ExampleJS(){
        var jFirst = document.getElementById("fname").value;
        var jLast = document.getElementById("lname").value;
        alert("Your name is: " + jFirst + " " + jLast);
     }
     </script>

    </head>
    <body>
        <FORM NAME="myform" onSubmit="JavaScript:ExampleJS()">

             First name: <input type="text" id="fname" name="firstname" /><br />
             Last name:  <input type="text" id="lname" name="lastname" /><br />
            <input name="Submit"  type="submit" value="Update" />
        </FORM>
    </body>
</html>

index.html

<!DOCTYPE html>
<html>
   <body>
       <form action="submit.php" method="POST">
         First name: <input type="text" name="firstname" /><br /><br />
         Last name: <input type="text" name="lastname" /><br />
         <input type="submit" value="Submit" />
      </form> 
   </body>
</html>

Après que l'un fichier de la page que vous souhaitez afficher après avoir appuyé sur le bouton soumettre

submit.php

<html>
  <body>

    Your First Name is -  <?php echo $_POST["firstname"]; ?><br>
    Your Last Name is -   <?php echo $_POST["lastname"]; ?>

  </body>
</html>

Vous devez vous connecter pour publier un commentaire.