Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
Fancy Lists
Forms
How forms are sent
Input field
Buttons
Input types
Fieldset
For more help...
You try it
Advanced Tables
Frames
Style Sheets
Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices
|
Now that you've learned to make a simple form and you can tell the form to post data, you need some buttons to make the form work. The first and most signifigant button you need is called a "submit" button. Because this is also something the user can click, it is also a form of input. The code for the button looks like this:
-
<INPUT TYPE=submit VALUE="Press me!">
That produces:
You tried it, didn't you? This button wasn't connected to an action, so it may have reloaded the page, but nothing else. When you put this button in connection with other elements of a form, it becomes wonderful.
Code |
---|
<form method="POST" action="mailto:myaddress@mail.com">
This is just text. <input> <br>
<INPUT TYPE=submit VALUE="Press me!">
</form>
|
|
|
If you pressed the button, you actually sent an e-mail, but because myaddress@mail.com isn't a real address, the message was lost. This is all you have to do to make a completely working form.
Of course, there are also other tags you can add and buttons you can make. The other useful button when first learning forms is the "reset" button. This button clears everything in the form. It is made like this:
-
<INPUT TYPE=RESET VALUE="Clear the form">
This is used in conjunction with most forms. Here's how it would look with that small form we made.
Code |
---|
<form method="POST" action="mailto:myaddress@mail.com">
This is just text. <input> <br>
<INPUT TYPE=submit VALUE="Press me!">
<INPUT TYPE=RESET VALUE="Clear the form">
</form>
|
|
|
|