JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Creating the Submit Button

All the information that your visitors enter won't be any good to you unless they send it to the server. You should always create a submit button for your forms so that the visitor can deliver the information to you. (You can also use images to submit form datasee page 276.)

Figure 17.40. If you leave out the name attribute, the name-value pair for the submit button will not be passed to the script. Since you usually don't need this information, that's a good thing.


To create a submit button:

1.
Type <input type="submit".

2.
If desired, type value="submit message" where submit message is the text that will appear in the button.

3.
Type the final />.

Figure 17.41. I apply a background and font formatting to the submit button. For more information on selecting by attribute, see page 147.


Figure 17.42. The submit button activates the script that collects the data from the form. You can personalize the button's contents with the value attribute. (The phrase Order Bed is clearer for your visitors than the default text Submit Query).


Tips

  • If you leave out the value attribute, the submit button will be labeled Submit Query, by default.

  • The name-value pair for the submit button is only sent to the script if you set the name attribute. Therefore, if you omit the name attribute, you won't have to deal with the extra, usually superfluous submit data.

  • On the other hand, you can create multiple submit buttons (with both the name and value attributes) and then write your script to react according to which submit button the visitor presses.


(X)HTML's button element lets you create prettier submit buttons. You can add an image, change the font, or even change the background color. That'll get them to submit that form!

Figure 17.43. You can create a submit button with an image by using the button tag.


To create a submit button with an image:

1.
Type <button type="submit">.

2.
Type the text, if any, that should appear on the left side of the image in the button.

3.
Type <img src="image.url" where image.url is the name of the image that will appear on the button.

4.
Type alt="alternate text", where alternate text is what appears if the image doesn't.

5.
If desired, add any other image attributes.

6.
Type /> to complete the image.

7.
Type the text, if any, that should appear on the right side of the image in the button.

8.
Type </button>.

Figure 17.44. I gave the buttons more body by applying an outset border that is the same color as the background in the CSS.


Figure 17.45. The (X)HTML code for a submit button with an image is a little more complicated, but looks so good. (Of course, it would help if I could actually draw.)


Tips

  • If you have multiple submit buttons, you can give a name and value attribute to each one so that your script can tell which one was pressed.

  • You can also use the button tag to create a submit button without an image. Just skip steps 36.

  • You can use CSS to style buttons.

  • For information on creating buttons with scripts, consult Creating a Button that Executes a Script on page 316.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→