How to create Submit Button in HTML Forms

If you want your form to be sent somewhere, a Submit button is needed (though you can write code for your own submit button). When the Submit button is clicked, the browser will check the ACTION attribute of the FORM tag to see where you want the data sent. It then checks the METHOD attribute to see what method you want to use, Post or Get. The browser will then try to send the form's data for you.

The code for a Submit button is this:

<INPUT TYPE = "Submit" Value = "Submit">

This time, the TYPE is set to "Submit". The VALUE attribute is the text that will appear on the button itself. The width of the button is determined by the width of the text for the VALUE attribute. If you wanted a really wide button, you can use this old trick:

Value = " Submit ">

Here, spaces are added to the left and right of the text. The browser will see the spaces as text and adapt the width accordingly.

To test out the text box element and the buttons, add the following between the BODY tags of your HTML code:

<FORM>
<INPUT TYPE="Text">
<P>
<INPUT TYPE="Submit" Value="Submit">
</FORM>

The form is just a text box and a button. Notice that the two are separated by a P tag, otherwise they'd be side-by-side.

Save your work and view the results in your browser. You should see this:



Type something into your text box and click the button. What you'll find is that the text will disappear. If you had added Method and Action attributes to the FORM tag then the text box data would be sent to a location of your choice (email address, script, etc).

Now amend your INPUT TYPE="Text" line and add SIZE and VALUE attributes:

<INPUT TYPE="Text" Size="25" Value="Enter your first name">

When you save and reload, the browser will look like this:



The text box will be longer and your default text will display.