Results 1 to 19 of 19
  1. #1
    Join Date
    Mar 2004
    Location
    Sacramento
    Posts
    20

    Is there anyway I can make an image into form submit button???

    Hi, I have this page. www.monstrosityrecords.com and I want the go image button to enable my search form to take action. Is there anyway to do this? Or could I have to use the conventional search button?
    I'm using Dreamweaver 04.

    Thanks, John Amaro.

  2. #2
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    Example of code using am image for the submit button:


    <input type="image" border="0" name="imageField" src="/assets/buynow.jpg" width="80" height="20">


    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  3. #3
    Join Date
    Mar 2001
    Posts
    1,434
    <input type=image src="go.gif">

    will allow an image to act as a submit button inside of a form.

    - John C.

  4. #4
    Join Date
    Mar 2004
    Location
    Sacramento
    Posts
    20
    It's not working! Here's my code. My Web site is www.monstrosityrecords.com
    I'm trying to make the "Go!" button the submit button for my textfield.

    <form name="form1" method="GET" action="http://www.google.com/search">
    <input type="text" name="textfield"><br>
    <input type="image" src="../images/index_04.jpg">
    </form>

  5. #5
    Join Date
    May 2003
    Location
    Florida
    Posts
    192
    someone will correct me if im wrong, but it appears you have to input type tags when you only need one [the image one that you desire]
    Kimrari

  6. #6
    Join Date
    Aug 2002
    Location
    Location
    Posts
    452
    Your submit image is outside of the <FORM> tag.
    Common sense isn't so common.

  7. #7
    Join Date
    Mar 2004
    Location
    Sacramento
    Posts
    20
    I tried all that! Nothing works! Was I supposed to make the "Go!" image a link for? Here's the code I tried.

    <form name="form1" method="GET" action="http://www.google.com/search">
    <input type="image" src="../images/index_04.jpg">
    </form>

  8. #8
    If your using Dreamweaver you don't have to hand code this.

    Just go Insert -> Form Items -> Image

    (that's from memory so might not be 100% but it is there)
    Invectis - Windows 2000, 2003 and MS SQL Server web hosting

  9. #9
    Join Date
    Mar 2004
    Location
    Sacramento
    Posts
    20
    Here's my lastest code, I still can't get this thing to work.

    <form name="form1" method="post" action="http://www.google.com/search">
    <input type="text" name="form1" size=22 value="" onFocus="this.value='';"><br><br>
    </form>
    </div>
    <div id="index-04">
    <input name="image" type=image class=submit src="../images/index_04.jpg" target=_blank>

    Everytime I put this line of code inside the form tags the image gets placed on the bottom of the textfield and that's not where the image is supposed to be.

  10. #10
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    Your Submit button image code needs to be inside the <form> tags.

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  11. #11
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    I just tried the following code on my site and it works just fine.

    -------------------------------------------------------------------
    <FORM method=GET action="http://www.google.com/search">
    <TABLE><tr><td>
    <INPUT TYPE=text name=q size=25 maxlength=255 value="">
    <INPUT type=image name=btn src="http://www.yoursite.com/path/to/button/image">
    </td></tr></TABLE>
    </FORM>
    -------------------------------------------------------------------

    You also seem to have a wierd link for the submit button. I'm not sure where your image is in relation to the page, so instead of using a relative link, just use an absolute link. In other words, show the full URL to the image:

    http://www.yoursite.com/path/to/button/image

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  12. #12
    Join Date
    Mar 2004
    Posts
    999
    simply put !

    <a href="www.youdonothaveaclueabouthtml.com"><img src=true.gif></a>
    When everything seems under control, you're just not going fast enough Mario Andretti, Racer

  13. #13
    Join Date
    Jul 2002
    Location
    Detroit
    Posts
    185
    Originally posted by openXS
    simply put !

    <a href="www.youdonothaveaclueabouthtml.com"><img src=true.gif></a>
    maybe you're the one without a clue... this is for a form!

  14. #14
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    Originally posted by blackdog
    maybe you're the one without a clue... this is for a form!
    Hehe, that was my thought.

    Johnny916, just use the code I posted, it will work.

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  15. #15
    Yeah, if you don't understand, I think there are some generators out there that can make faceted buttons for you.

  16. #16
    Join Date
    Mar 2004
    Location
    Sacramento
    Posts
    20
    Hey good news! I've finally got it working! Here is the code I used. It's Vito's code slightly modified.

    HOWEVER, the text seems to be slightly below where it should be, if you notice when you type something it looks like half the text is cut off! www.monstrosityrecords.com


    <form name="form1" method="GET" action="http://www.google.com/search">
    <TABLE><tr><td>
    <INPUT TYPE=text name=q size=20 maxlength=255 value="">
    </td>
    </tr></TABLE>

    </div>
    <div id="index-04">
    <input type=image name=btn src="http://www.monstrosityrecords.com/images/index_04.jpg">
    </div> </form>

  17. #17
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    Good to see it's working for you.

    Why do you have that closing tag </div> in there? Where's the opening tag? And why have it at all?

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  18. #18
    Join Date
    Mar 2004
    Location
    Sacramento
    Posts
    20
    I tried deleting that extra </div> tag and everything went apeshit on me. I tried adding and opening tag and the same thing happened. What now?

    Here's the code again, I might of forgotten to put the top line in my last post.

    <div id="index-03">
    <form name="form1" method="GET" action="http://www.google.com/search">
    <TABLE><tr><td>
    <INPUT TYPE=text name=q size=20 maxlength=255 value="">
    </td>
    </tr></TABLE>

    </div>
    <div id="index-04">
    <input type=image name=btn src="http://www.monstrosityrecords.com/images/index_04.jpg">
    </div> </form>

  19. #19
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    What is wrong with that code is you have an opening <div> tag outside your form, and the closing tag inside your form. Try it like this:
    ----------------------------------------------
    WITH <div> TAGS
    -----------------------------------------------
    <form name="form1" method="GET" action="http://www.google.com/search">
    <div id="index-03">
    <TABLE><tr><td>
    <INPUT TYPE=text name=q size=20 maxlength=255 value="">
    </td>
    </tr></TABLE>
    </div>
    <div id="index-04">
    <input type=image name=btn src="http://www.monstrosityrecords.com/images/index_04.jpg">
    </div> </form>
    -----------------------------------------------



    ----------------------------------------------
    WITHOUT <div> TAGS
    -----------------------------------------------
    <form name="form1" method="GET" action="http://www.google.com/search">
    <TABLE>
    <tr><td>
    <INPUT TYPE=text name=q size=20 maxlength=255 value="">
    <input type=image name=btn src="http://www.monstrosityrecords.com/images/index_04.jpg">
    </td></tr>
    </TABLE>
    </form>
    -----------------------------------------------


    And personally, I still have no idea why you'd even need <div> tags in a form. I've never found the need. Try the code I used above without div tags. I just tried it and it works perfectly.

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •