XHTML and CSS - Submitting Forms
Submitting Forms
In this tutorial we're going to be looking at how to submit a XHTML form, the first thing I'm going to do is create a text input and a password input.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username"><br/> Password:<br/> <input type="text" name="password"><br/> </form> </body> </html>
Submitting a form is when you push it to another page, your php script for example so you can then do what you want with the data, in this case it would be a login page. To submit a form we need to create a submit button, to do this create a input with the type submit and the value login, the value can be anything you want, I'm just setting it to login for this tutorial.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username"><br/> Password:<br/> <input type="text" name="password"><br/> <input type="submit" value="login"> </form> </body> </html>
Now when you view your page and click submit you'll see that nothing happens that's because we have not told the form where to submit to yet. We need to set the action attribute in the form tag so the form knows where to submit to, you can set this to any URL, in this case we're just going to submit to the same page we're on to do this you just leave the action blank. We also have the method attribute for the form element, what this dose is set how the browser push's the data to the script your working with. The two possible values are GET and POST, GET will show up in the address bar and POST wont, I'm not going into big detail here as you'll learn this when you learn a web programming language.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form action="" method="GET"> Username:<br/> <input type="text" name="username"><br/> Password:<br/> <input type="text" name="password"><br/> <input type="submit" value="login"> </form> </body> </html>
Now when you click it the page will refresh and that's about all that will happen, later when we learn a programming language we can actually do something with this information.

Page generated in 0.007 seconds.