SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Use image as form submission button

    I'm a little bit stuck with this -

    I have a form that is posted to a php page on submitting. I want to change the standard submit button to something more customised - like an image that I have created. Here's the code that I have for this and if anyone can direct me what to do I would be real grateful.

    Code:
    <div id="text3"><form name="formcheck" onsubmit="return formCheck(this);" form action="nextpage.php" method="post">
    <table width="400px" border="0" cellspacing="15" cellpadding="0" align="center">
    <tr>
    	<td width="15" height="30">
      		<span class="style36">Name:</span>
    	</td>
    	<td width="30" height="30" align="left">
      		<input name="Name" type="text" value="" size="35" maxlength="40" />
    </tr>
    <tr>
    	</td>    
        <td width="15" height="30">
      		<span class="style36">Email:</span>
    	</td>
    	<td width="30" height="30" align="left">
      		<input name="email" type="text" value="" size="35" maxlength="40" />
    	</td>
    <tr>
        </td>
    	<td width="165" height="30">  
    		<input type=submit value="Submit Form">
        </td>    
    </tr>
    </table>
    </form>
    </div>
    I'm not sure it's necessary to include the function (formCheck) that ensures fields have been filled in - if so I can.

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use <input type="image" ... />

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    another suggestion, without even trying it: use button instead of input as that allows html rather than plain text for the button's vissible part, so:

    <button type="submit"><img src="image.png" ... /></button>

    not sure if that's good or not but another possible option.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks for both responses there...

    The first doesn't seem to work perhaps you can elaborate slightly more to ensure I'm not doing something wrong..

    The second does incorporate the image but also an ugly standard button behind it - so the image seems to have replaced the buttons' text rather than the button itself. Close to doing it though.


    If there are anymore suggestions please post for this and future reference purposes.

    _g

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    maybe the ugly button you're talking about is derived from your browser's default style?, and is made up of borders and background colours possibly. try using style to over ride such stuff. eg button { border:none; background-color:none }. just a guess.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately that doesn't seem to be working. If you or anyone else has any more suggestions please voice them. With thanks_

  7. #7
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by g_force View Post
    The first doesn't seem to work perhaps you can elaborate slightly more to ensure I'm not doing something wrong..
    http://www.w3.org/TR/html401/interac....html#h-17.4.1

    Quote Originally Posted by g_force View Post
    The second does incorporate the image but also an ugly standard button behind it - so the image seems to have replaced the buttons' text rather than the button itself. Close to doing it though.
    You can get rid of the ugly button chrome with CSS, but, as I recall, it's a pain getting all browsers to cooperate. I'd try input[type=image] first, as it doesn't introduce any standard button chrome at all.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks for the help.

    This is how it was resolved as worldwideweird suggested:

    Code:
    <input type='image' src='next.gif' width="160" height="36" value='Submit' border="0" id="next" alt='Submit' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','next.gif',1)">

  9. #9
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    incidentally do you know how to do this with a checkbox? I want to exchange a checkbox for an image.... can we do it?

  10. #10
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this
    <input type="image" src="add image location here" value="Submit" alt="Submit">

  11. #11
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't that exactly what I did for the other one and put in my previous post?

    - I'm looking to swap a checkbox for an image so that I can tell if an image has been 'checked'.

  12. #12
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by g_force View Post
    incidentally do you know how to do this with a checkbox? I want to exchange a checkbox for an image.... can we do it?
    You could put an onclick event handler on the image to toggle a hidden (or zero-opacity) checkbox.

  13. #13
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by World Wide Weird View Post
    You could put an onclick event handler on the image to toggle a hidden (or zero-opacity) checkbox.
    yes - this sounds like the right direction but honestly speaking I don't know how to to make the onclick event handler on the image toggle a checkbox and how can I make the checkbox hidden (or zero-opacity)?

    Here's a test page. I can get these checkbox selections mailed to me on another page but don't know how to go about doing the rest. Any help is very welcome.

    thanks_
    Last edited by g_force; Sep 28, 2008 at 10:11.


Bookmarks

Posting Permissions

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