HOME  |    TRAINING  |   FREE TUTORIALS   |   JOBS
Find out more about our new RSS feed.
FREE Tutorial
REPLACING A FORM BUTTON WITH AN IMAGE

CATEGORY
SEARCH OUR OTHER TUTORIALS

DESCRIPTION

If you are new to creating forms for your website, then you might be interested to know that this horrid submit button can be replaced with an image.
Click here to be kept informed of our new Tutorials.


TUTORIAL TAKEN FROM COURSE : A+ MODULE 1 - HARDWARE BASICS

FULL COURSE DETAILS

At the end of this course you will be able to - without reference to manuals, identify and correctly name all of the components that make up a system unit and a motherboard; describe the functions of all PC components; from a PC technician's toolkit, correctly identify the tools required to perform any given PC maintenance task.

TO ACCESS THE FULL COURSE AND HUNDREDS OF OTHERS, CLICK HERE.


Feedback/Enquiry forms are used all over the place on the internet however in reality you dont get much control on the appearance. One thing you can do however is change that little button, usually titled Submit, to an picture which blends nicely into your website.

If you are not sure what I am actually on about then take a look at the following:

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

We have all seen this button before on websites. The interesting thing about this is that we can change this button by changing a slight piece of HTML code to an image such as a .GIF or a .JPG file. This image obviously could of been constructed in your favourite paint package such as Paint Shop Pro or Fireworks.

So what do you need to change? Well if you already have a web form on your own website, take a look at the source code(HTML) and look for a line which might look like the following:

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

This line is usually located nearer the bottom of your HTML code, but before the </FORM> tag.

In order for you to change this button to show your nice new submit image, you need to ensure that you have your picture available in the correct location. Usually its always rule of thumb to place all your images into an images directory. For the following to work, we will ensure that we have an images directory that our image button has been put into.

Now we need to make this change to our HTML code in order for our new button to appear. Here is the changed version:

<INPUT TYPE="IMAGE" SRC="images/mybutton.gif">

The above example has told the form to display a picture instead of using the default button. As you can see, we have changed the TYPE to be an IMAGE. The next change we have made is included the SRC definition to indenify the location of the picture. This tells the form where to find the picture on our website. If you don't have an images directory, then just remove the images/ from inside the SRC="" parameter. To show you an example of what you might get, here is an example:

<FORM><INPUT TYPE="IMAGE" SRC="images/submitarticle.gif"></FORM>

Thats it really. Quite simple. Although this article is targetted at people who dont have much experience with HTML, its one to always remember. Good Luck!




8 RELATED COURSES AVAILABLE
HTML 4.0 INTRODUCTION
To create, format and publish a small website using HTML 4.0. You will learn to create web pages incorporating fo....
MACROMEDIA DREAMWEAVER MX INTRODUCTION
To give an introduction to the Internet tools and features of Macromedia Dreamweaver MX. Readers will create an a....
MICROSOFT FRONTPAGE 2002 INTRODUCTION
This training course aims to give you the skills you need to build basic pages both for your company intranet and....
MICROSOFT FRONTPAGE 2000 INTRODUCTION
This training course aims to give you the skills you need to build basic pages both for your company intranet and....
MICROSOFT FRONTPAGE 2000 ADVANCED
To create and manage a website with Microsoft FrontPage 2000. You can use this course to prepare for MOUS Certifi....
 
0 RELATED JOBS AVAILABLE
CONTACT US
Thursday 4th December 2008  © COPYRIGHT 2008 - VISUALSOFT