Formularul HTML face o anumită „acțiune” atunci când apăsați butonul de trimitere (Programare, Html, Trimiterea Formularului)

Ronaldinho învață codare a intrebat.

Aș dori să învăț despre formularele HTML. De exemplu, am 2 câmpuri text de intrare pentru nume și prenume și un buton de trimitere. Când butonul de trimitere este apăsat, aș dori ca pagina web să afișeze ceva de genul: „Când se apasă pe butonul de trimitere, aș dori ca pagina web să afișeze ceva de genul:: Numele tău este „Prenume” „Nume”.

<!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>

Ce trebuie să am aici pentru a avea o anumită „acțiune” atunci când fac clic pe acel buton?

Editați: Ok acum mi-am dat seama că am nevoie fie de PHP, fie de JavaScript aici. Poate cineva să-mi sugereze sau să-mi ofere un exemplu de cod de PHP sau Js ca referință?

Comentarii

  • Al tău <form> ar trebui să aibă un action și un method atribut –  > Por Zoltan Toth.
  • ok, mulțumesc, voi face cercetări în acest sens. –  > Por Ronaldinho Learn Coding.
2 răspunsuri
xelco52

Ok, o să încerc și eu. Dacă vrei să lucrezi cu PHP, va trebui să instalezi și să configurezi atât PHP cât și un webserver pe mașina ta. Acest articol te-ar putea ajuta să începi: Manualul PHP: Instalarea pe sisteme Windows

Odată ce v-ați configurat mediul, puteți începe să lucrați cu formularele web. Direct din articol: Prelucrarea datelor din formulare cu PHP:

Pentru acest exemplu va trebui să creați două pagini. Pe prima pagină vom crea un simplu formular HTML pentru a colecta câteva date. Iată un exemplu:

<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>

Această pagină va trimite datele Nume și Vârstă către pagina process.php. Acum haideți să creăm process.php pentru a utiliza datele din formularul HTML pe care l-am creat:

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

După cum probabil știți, dacă omiteți partea method=”post” din formular, URL-ul cu afișează datele. De exemplu, dacă vă numiți Bill Jones și aveți 35 de ani, pagina noastră process.php se va afișa astfel http://yoursite.com/process.php?Name=Bill+Jones&Age=35 Dacă doriți, puteți modifica manual URL-ul în acest mod, iar rezultatul se va schimba în consecință.

Exemplu JavaScript suplimentar

Acest exemplu cu un singur fișier preia html-ul din întrebarea dvs. și leagă evenimentul onSubmit al formularului de o funcție JavaScript care extrage valorile din cele 2 casete de text și le afișează într-o casetă de alertă.

Notă: document.getElementById("fname").value primește obiectul cu extensia ID care este egal cu fname și apoi extrage valorile lui value – care, în acest caz, este textul din caseta de text „First Name”.

 <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>

Comentarii

  • Bună ziua! Vă mulțumesc! Foarte frumoasă explicație! Am o gazdă online și un server web pregătit. Voi citi și voi încerca ajutorul tău. Trebuie doar să revii aici și să mă ajuți mai mult 🙂 –  > Por Ronaldinho Learn Coding.
  • Am o idee cu PHP, în acest caz aș putea dori ceva mai simplu, cum ar fi doar un fișier HTML doar, așa că știu că trebuie să am un fel de funcție JavaScript pe <head> tag, mă poți ajuta acolo? –  > Por Ronaldinho Learn Coding.
  • Am adăugat un exemplu JS la sfârșitul răspunsului meu –  > Por xelco52.
  • Există vreun motiv pentru <form> în primul exemplu și <FORM> în cel de-al doilea? –  > Por gsamaras.
  • Pentru mine, exemplul PHP funcționează doar prin înlocuirea lui $Age și $Name cu $_POST['Age'] și $_POST['Name'], respectiv. –  > Por Guido Walter Pettinari.
Amaresh Tiwari

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>

După aceea încă un fișier care este pagina pe care doriți să o afișați după ce apăsați butonul de trimitere

submit.php

<html>
  <body>

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

  </body>
</html>