web-dev-qa-db-fra.com

Le formulaire HTML fait une "action" lorsque le bouton d'envoi est enfoncé

Je voudrais en savoir plus sur les formulaires HTML. Par exemple, j'ai 2 champs de texte d'entrée pour le prénom et le nom et un bouton d'envoi. Lorsque vous cliquez sur le bouton Soumettre, j'aimerais que la page Web affiche quelque chose comme: Votre nom est "Prénom" "Nom".

<!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 ici pour avoir une "action" lorsque je clique sur ce bouton?

Edit: Ok maintenant je comprends que j'ai besoin de PHP ou JavaScript ici. Quelqu'un peut-il suggérer ou fournir un exemple de code de PHP ou Js comme référence pour moi?

htmlform-submit
17
Ronaldinho Learn Coding

D'accord, je vais essayer. Si vous souhaitez travailler avec PHP, vous devrez installer et configurer à la fois PHP et un serveur Web sur votre machine. Cet article peut vous aider à démarrer: PHP Manual: Installation on Windows systèmes

Une fois que vous avez configuré votre environnement, vous pouvez commencer à travailler avec les formulaires Web. Directement De l'article: Traitement des données du formulaire avec PHP :

Pour cet exemple, vous devrez créer deux pages. Sur la première page, nous allons créer un simple formulaire HTML 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 enverra les données de nom et d'âge à la page process.php. Permet maintenant de créer process.php pour utiliser les données du formulaire HTML que nous avons créé:

<?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";   
?>

Comme vous le savez peut-être, si vous omettez la partie method = "post" du formulaire, l'URL affiche les données. Par exemple, si vous vous appelez Bill Jones et que vous avez 35 ans, notre page process.php s'affichera sous la forme http://votresite.com/process.php?Name=Bill+Jones&Age=35 Si vous voulez, vous pouvez modifier manuellement l'URL de cette manière et la sortie changera en conséquence.

Exemple JavaScript supplémentaire

Cet exemple de fichier unique prend le code HTML de votre question et lie l'événement onSubmit du formulaire à une fonction JavaScript qui extrait les valeurs des 2 zones de texte et les affiche dans une zone d'alerte.

Remarque : document.getElementById("fname").value obtient l'objet avec la balise ID qui équivaut à fname puis tire c'est value - qui dans ce cas est le texte de la zone de texte Pré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>
25
xelco52

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 ce dernier fichier, 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>
1
Amaresh Tiwari