DOnt want a subimt button, can I code a image instead?

[k994519]

Hi guys,

Is there anyway I can use a image as my submit button instead of the actual button?

[mtimdog]

Yes, but at the moment I forget how...

a quick google and the first link up after searching for
image submit

gives you

<INPUT type=image name="search" src="graphics/searchgo.gif" border="0">

If only all the problems were this easy.

[k994519]

how would i use that in this context?

if(isset($_POST["submit"])) {  

    // 
    // Check fields were filled in 
    // 
    // login must be between 4 and 15 chars containing alphanumeric chars only: 
    field_validator("login name", $_POST["login"], "alphanumeric", 4, 15);  

    // password must be between 4 and 15 chars - any characters can be used: 
    field_validator("password", $_POST["password"], "string", 4, 15);  

// if there are $messages, errors were found in validating form data 
// show the index page (where the messages will be displayed): 
if($messages){   
    doIndex();  
    // note we have to explicity 'exit' from the script, otherwise 
    // the lines below will be processed: 
    exit;  
}  

would i use image name - instead of submit?

<INPUT type=image name="search" src="graphics/searchgo.gif" border="0">

[Weedpacket]

RTFM

http://www.php.net/manual/en/language.variables.external.php#language.variables.external.form.submit

http://www.php.net/manual/en/faq.html.php#faq.html.form-image

[vaska]

When I use an image I just use something like...

if(isset($POST["submit_x"])){_

The problem with images is that they will return an x,y coordinate when clicked and this way it grabs that info and knows things are a go - never had any bad side effects with this, yet.

Is this a horrible way to do this?

v

[Frederick]

the best way to use images in your button is to use a class in your style sheet and place a background image in the class

<style type="text/css" media="screen>
.ButtonBG { width: 100px; background-image: url(imageName.jpg); border: 1px solid #FFFFFF }
</style>

<input type="submit" name="submit" value="" border="0" class="ButtonBG">

[sethadam1]

Javascript would work just fine.

<INPUT type="image" name="search" src="graphics/searchgo.gif" border="0" onclick="document.forms['formname'].submit()" />

Then you'll need to test not with

if($_POST['submit']) { 
   ///blah blah blah 
}

but by testing for something else, like maybe:

if($_POST['name'] && $_POST['email]) {
   //blah
}

[PurpleMonkey]

Originally posted by Frederick
the best way to use images in your button is to use a class in your style sheet and place a background image in the class

<style type="text/css" media="screen>
.ButtonBG { width: 100px; background-image: url(imageName.jpg); border: 1px solid #FFFFFF }
</style>

<input type="submit" name="submit" value="" border="0" class="ButtonBG">

also you can customise all of your forms with CSS, On mine I'm using

INPUT { border-left: 1px solid; border-top: 1px solid; border-bottom: 1px solid; border-right: 1px solid;
background-color: #cccccc; border-style: dashed; }

which gives a nice dashed background.

[Frederick]

when I make forms, I use 3 classes to customize areas of the form elements.
Examples:

.TextFields
.TextareaFields
.ButtonBG

I use .TextFields for items such as drop menus and input fields. The other 2 are self explanitory. This gives you more flexibilty for later changing and also multiple templates.

Using just INPUT as the element of the style sheet applies the same style to all. Seperating the styles with classes allows you to give the fields one look and the buttons a different look.