Creating Forms Module: Submit Buttons

Creating Forms

Submit Buttons

You’re nearly finished creating your example login form now. Here’s the code you should have so far:

<form action="http://mysite.com/scripts/login.php" method="post">
<input type="text" name="login" size="25" value="Enter login name here" />
<input type="password" name="password" size="16" />
</form>

You’re still missing one important element, though: a way to send the information you’ve collected off to be processed. To do that, you’ll need to create an input tag with a type attribute of “submit,” also known as a submit button:

<input type="submit" />

This will create a button labeled “Submit” inside your form:

When the user clicks that button, all the information they’ve entered in the form will be sent to the script for processing.

If you have more than one submit button on a form – one near the top of the page, and the other at the bottom, for example – you can add a name attribute to tell one from the other:

<input type="submit" name="firstsubmit" />

You can also personalize your submit button with the value attribute. Instead of simply telling users to “Submit,” why not invite them to “Go Ahead” or “Log Me In”:

<input type="submit" value="Log Me In" />

The resulting button will look like this:

There is another type of button called a “Reset” button, but it’s recommended you leave that off of all your forms. Clicking “Reset” will clear out all the information the user has entered in the form. It’s confusing and rarely used. If the user wants to reset the form they can simply go back and delete what they typed.

Your completed example form will now look like this:

<form action="http://mysite.com/scripts/login.php" method="post">
<input type="text" name="login" size="25" value="Enter login name here" />
<input type="password" name="password" size="16" />
<input type="submit" value="Log Me In" />
</form>

Try it Yourself

Make your own tweaks or additions to the code in the left box below, then click “Show Changes” to see the results in the right box.

Web Page Login: Password: