Форма HTML выполняет некоторые действия при нажатии кнопки отправки

Я хотел бы узнать о формах HTML. Например, у меня есть 2 текстовых поля ввода для имени и фамилии и кнопки отправки. Когда нажата кнопка отправки, я хотел бы, чтобы веб-страница отображала что-то вроде: "Ваше имя" "Имя" "Фамилия".

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

Что мне нужно иметь здесь, чтобы иметь какое-то "действие" при нажатии этой кнопки?

Изменить: Теперь я понял, что мне нужен PHP или JavaScript. Может ли кто-нибудь предложить или предоставить образец кода PHP или Js в качестве ссылки для меня?

ОТВЕТЫ

Ответ 1

Хорошо, я возьму на это удар. Если вы хотите работать с PHP, вам нужно будет установить и настроить как PHP, так и веб-сервер на вашем компьютере. Эта статья может помочь вам: Руководство по PHP: установка в системах Windows

После настройки среды вы можете начать работу с веб-формами. Непосредственно Из статьи: Обработка данных формы с помощью PHP:

В этом примере вам нужно создать две страницы. На первой странице мы создадим простую форму HTML для сбора некоторых данных. Вот Пример:

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

Эта страница будет отправьте данные имени и возраста на страницу process.php. Теперь давайте создадим process.php для использования данные из формы HTML, которые мы сделали:

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

Как вы может быть известно, если вы не учитываете часть формы "post", URL с отображением данных. Например, если ваше имя Билл Джонс и вы 35 лет, наша страница process.php будет отображаться как http://yoursite.com/process.php?Name=Bill+Jones&Age=35 Если вы хотите, вы можете вручную изменить URL таким образом, и результат изменится соответственно.

Дополнительный пример JavaScript

Этот пример одного файла принимает html из вашего вопроса и связывает событие onSubmit формы с функцией JavaScript, которая извлекает значения из 2 текстовых полей и отображает их в окне предупреждения.

Примечание: document.getElementById("fname").value получает объект с тегом ID, равным fname, а затем тянет его value - который в этом случае является текстом в текстовом поле "Имя".

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

Ответ 2

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>

После этого еще один файл, какую страницу вы хотите отобразить после нажатия кнопки отправки

submit.php

<html>
  <body>

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

  </body>
</html>