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".
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
<input type="submit" value="Submit" />
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.
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.