Formulário HTML faça alguma "acção" quando carregar no botão enviar

Question

Formulário HTML faça alguma "acção" quando carregar no botão enviar

Eu gostaria de aprender sobre formulários HTML. Por exemplo, eu tenho 2 campos de texto de entrada para o primeiro nome e sobrenome e um botão enviar. Quando o botão Enviar é clicado, eu gostaria que a página web para exibir algo como: seu nome é "primeiro nome" "Último Nome".

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

O que preciso de ter aqui para ter alguma "acção" quando carregar nesse botão?

Edit: OK agora eu descubro que eu preciso de PHP ou JavaScript aqui. Pode alguém sugerir ou fornecer um código de amostra de PHP ou Js como referência para mim?

17

html form-submit

Author: Ricky, 2012-06-13

Source

2 answers

Índice.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>

Depois de mais um ficheiro que deseja mostrar depois de carregar no botão enviar

Submete-te.php

<html>
  <body>

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

  </body>
</html>

1

Author: Amaresh Tiwari, 2017-12-22 17:23:23

score 25 · Accepted Answer

Está bem, vou tentar isto. Se quiser trabalhar com o PHP, terá de instalar e configurar tanto o PHP como um servidor web na sua máquina. Este artigo poderá dar-lhe Início: manual de PHP: instalação nos sistemas Windows

Assim que tiver a configuração do seu ambiente, pode começar a trabalhar com formulários web. Directamente do artigo: processamento de dados com PHP:

Para este exemplo você vai precisar criar duas páginas. Na primeira página o irá criar um formulário HTML simples para coletar alguns dados. Aqui está um exemplo:
<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>
Esta página vai envie os dados de nome e idade para o processo de página.pai. Agora vamos criar o processo.php a usar os dados do formulário HTML que fizemos:

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

Como você pode estar ciente, se você deixar de fora o método= "post" parte do formulário, o URL com mostrar os dados. Por exemplo, se o seu nome é Bill Jones e você temos 35 anos, o nosso processo.a página do php irá mostrar como http://yoursite.com/process.php?Name=Bill + Jones & Age = 35 Se quiser, você pode alterar manualmente o URL desta forma e a saída irá mudar adequadamente.

Exemplo Adicional De JavaScript

Este exemplo de ficheiro único pega no html da sua pergunta e liga o evento onSubmit do formulário a uma função JavaScript que puxa os valores das 2 caixas de texto e as mostra numa caixa de alerta.

Nota: document.getElementById("fname").value obtém o objecto com a marca ID que é igual a fname e depois puxa é value - que neste caso é o texto na caixa de texto do primeiro nome.

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