Home/ Questions/Q 8084023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T17:39:54+00:00

I would like to learn about HTML forms. For example, I have 2 input

  • 0

I would like to learn about HTML forms. For example, I have 2 input text fields for first name and last name and a submit button. When the submit button is clicked, I would like the webpage to display something like: Your Name is “First Name” “Last Name”.

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

What do I need to have here in order to have some “action” when I click that button?

Edit: Ok now I figure out that I need either PHP or JavaScript here. Can some one suggest or provide a sample code of PHP or Js as a reference for me?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I’ll take a stab at this. If you want to work with PHP, you will need to install and configure both PHP and a webserver on your machine. This article might get you started: PHP Manual: Installation on Windows systems

    Once you have your environment setup, you can start working with webforms. Directly From the article: Processing form data with PHP:

    For this example you will need to create two pages. On the first page
    we will create a simple HTML form to collect some data. Here is an
    example:

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

    This page will
    send the Name and Age data to the page process.php. Now lets create process.php to use
    the data from the HTML form we made: 

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

    As you
    may be aware, if you leave out the method=”post” part of the form, the
    URL with show the data. For example if your name is Bill Jones and you
    are 35 years old, our process.php page will display as
    http://yoursite.com/process.php?Name=Bill+Jones&Age=35 If you want,
    you can manually change the URL in this way and the output will change
    accordingly.

    Additional JavaScript Example

    This single file example takes the html from your question and ties the onSubmit event of the form to a JavaScript function that pulls the values of the 2 textboxes and displays them in an alert box.

    Note: document.getElementById("fname").value gets the object with the ID tag that equals fname and then pulls it’s value – which in this case is the text in the First Name textbox. 

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