SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you create a custom form submit button?

    Hello everyone,

    This is what I'm trying to do.

    I want to give user the option to enter their e-mail address and then hit the "Subcribe Now" button to send their e-mail address to me.

    The problem is, I want to create a custom "submit button" that will match the design of the page. The regular submit button is not appealing and just too dry.
    I want to make the form and then add a fancy button that user can click to send the data.

    So the question, how do you create a custom form submit button?

    Thanks for all your help.

    IC

  2. #2
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two option.

    1.
    Code HTML4Strict:
    <input type="image" src="path/to/image">

    2.
    Code HTML4Strict:
    <input type="submit">
    Then style with CSS
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,870
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You left out option 3.

    HTML Code:
    <button type="submit">custom button content including HTML goes here</button
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didd this

    </button

    Forget the closing > less

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm not going to be using text, because I will be including the text on the button as a single graphic.

    I will be creating the graphic in Fireworks.

    Anyway guys I'm a little confused by the addition and subtraction.

    Which is the best way?

    IC

  6. #6
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats like saying what is the best programming language. I would personally use option 1.

  7. #7
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just another thought, is there a way to make the image in the button rollover, like applying a hover state?

    Thanks everyone.

    IC

  8. #8
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS can do that. Javascript can too I think. Not sure

  9. #9
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BBoardX View Post
    CSS can do that. Javascript can too I think. Not sure
    I saw the Javascript method but don't know if it's really worth it.
    Have no ide on the css version.

    IC

  10. #10
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure but if you assign an id to the input then do like

    #idname a:hover

    that will style the link. Actually on second thought I only think JavaScript can do it. I have never done it any other way at least.

  11. #11
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Iconic_creator
    Just another thought, is there a way to make the image in the button rollover, like applying a hover state?
    Maybe this post can be of interest.
    Happy ADD/ADHD with Asperger's

  12. #12
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you apply the image to a submit button using css background, then you can add a different image for the hover state.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.


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
  •