www.webdeveloper.com
Results 1 to 10 of 10

Thread: Need Help With Creating My Custom Submit Button

  1. #1
    Join Date
    Dec 2010
    Posts
    232

    Need Help With Creating My Custom Submit Button

    In my site I want to create and style my submit buttons in a way that:-

    1. validates as proper xhtml/css
    2. still functions as an actual submit button without javascript
    3. looks the way I've described below with 2 images applied to it:-

    I basically want to be able to apply 2 images to each button, one for a general background to the button and one for an icon representing what the button does which will overlay the button and be to the left of the label of the button. For example a button which sends a message may have an icon of a small envelope whereas a button that confirms something may have an icon of a tick symbol but both buttons could make use of my background image I've made for them as their general background.

    Is this possible in a valid javascript non javascript way or would I need to create the same image with the icons applied over and over again for every button?

  2. #2
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    101

    Button images

    If you want to replace the standard button with an image, and at the same time make the form working on all browsers, you'll have at least to use the "onclick" command and that means a minimal Javascript use.

    See the buttons in this site for example:
    www.easycure.it/
    Skip intro and access the main page: there're forms with graphic buttons in the "Contact" and "Newsletter" links - is the result you're looking for?

    (Forum Users: sorry if i often refer to the above site, but i worked hard on it and i'm glad to present it as an example when it occurs)

  3. #3
    Join Date
    Dec 2010
    Posts
    232
    Thanks SnowDrop. Styling input buttons is more complicated than I thought so I'm leaving it till the end of the project now but at some point I'll figure it out I'm sure.

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Hey MrSnowDrop,
    Since you mention it:
    (Forum Users: sorry if i often refer to the above site, but i worked hard on it and i'm glad to present it as an example when it occurs)
    have you ever validated the code on your page?
    http://www.easycure.it/main.asp?lang=it
    Validating here shows more than a few errors:
    http://validator.w3.org/
    Most probably have to do with the DOCTYPE declaration... you may want to check it out, since you are putting your page out for peer review. I notice it loads pretty slow/sporatic... it may be because of the code... so best to validate.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  5. #5
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    101

    Validation

    @EyeForVideo
    have you ever validated the code on your page?
    Most probably have to do with the DOCTYPE declaration... you may want to check it out, since you are putting your page out for peer review. I notice it loads pretty slow/sporatic... it may be because of the code... so best to validate.
    Never done yet. I tried once, but in that site there are loads of JS scripts and effects... Well, i had various functional problems by adding the <DOCTYPE...> declaration, especially with some DIVs absolute-positions and scrolling scripts... it made me literally crazy
    So, finally, i drastically decided to be a sort of "web anarchic" and avoided that important step! I know i've to validate my sites, but first i have to test them with the <DOCTYPE...> declaration and make them work perfectly, but i never find time to test.

    When i talked about to take Easy Cure site "as an example", i didn't meant "perfect and validated"; rather i'd like to refer to many useful script functions and effects inside the site that seems to work correctly anyway.

    Thanks and sorry for misunderstood

  6. #6
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    MrSnowDrop,
    No offense, but keep in mind that this is a "Web Developer" Forum... so of course you are going to come under peer review. The purpose is to help ALL of us be better developers... not just those asking for help.
    To be honest, most developers that look at the link to your site will probably take one quick look and then view the source code... since that's sort of where we live. The visual display sort of comes second.
    Seeing all the "position: absolute;", in-line CSS styling, and the use of so many tables, gives the impression that you really know very little about Web Development. Your source code is 5 times what it needs to be. Yes, you may have a few fancy effects, but that is all lost in all the overblotted, outdated code used to produce the page.
    We really welcome you here to the Forum ... but honestly... I think you should go back and review basic Web page development, and the use of CSS to style your pages. Here is a good source of tutorials:
    http://www.w3schools.com/
    Then validate your pages as you develop them... not AFTER they are developed. Be all the ancharist you want... but Web browsers parse Web pages according the the rules specified by the DOCTYPE... like it or not. Don't assume that just because it displays OK for you, that it will display OK for your viewers.
    Best of luck to ya!
    Eye for Video
    www.cidigitalmedia.com

  7. #7
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    101

    personal considerations

    @EyeForVideo
    ...
    We really welcome you here to the Forum ... but honestly... I think you should go back and review basic Web page development...
    I'll follow your suggestion without problems. Just few considerations:
    i'm not a professional web developer, and i'm sorry if my presence in tech replies is not appreciated without that recognition.

    About the code that could be "5 times what it need to be":
    the HTML code in Easy Cure page IS more concise than it seems, because it is written half/HTML and half/ASP+VBscript. That means that looping code is visibile in HTML and seems duplicated in a vain way, but that's not the real code because it ISN'T effectively wrote in HTML, but it's juse ONE loop ASP code instruction.

    I see here many people asking for javascript/html/css basic tricks and i think to have at least enough knowledge to offer some modest suggestion, even if my works are not perfect or validated. Nothing else.
    In the specific above case, just fot example, i'd like to offer my solution referred to graphic input buttons inside html forms, not surely to the whole site! Yes, i mentioned it as an example (i'll never do such a thing), but just referred to that particular thread subject.

    So please, forgive all my references to my works, my mistake, and sorry to all.
    I'll be more unobtrusive in my future posts
    Last edited by MrSnowDrop; 03-27-2011 at 01:37 PM.

  8. #8
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    101

    validation

    Quote Originally Posted by Eye for Video View Post
    ...the purpose is to help ALL of us be better developers...
    Closing definitively my previous post, i'm glad to inform that finally my sites have both successfully passed the w3schools validation (HTML-4.01 and CSS-2.1)!
    Finally i've took all the necassary time to correct my code, it was only a silly question of time. And i have to admit that it's a satisfaction to have wiped out several imperfections!

    You were absolutely right EyeForVideo, validation is a must and i was wrong in placing it behind other engagements. I wish to thank you.

    Now it's funny to see errors in the official site of The Cure, when the italian coverband has a w3schools validation!

  9. #9
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    I'm very proud of you! You took the time and effort needed to learn!
    I know you are very willing to share and we all will be looking forward to more of your posts.
    Best wishes!!
    EfV

  10. #10
    Join Date
    Jan 2011
    Location
    America
    Posts
    32
    I'll assume your using XHTML 1.0 Transitional and CSS 1-2

    CSS:
    Code:
    .styled{
     width:100px;height:22px;
     background:url(path/to/image.jpg) no-repeat;
     display:inline-block;
     border:none;outline:none;
    }
    XHTML:
    HTML Code:
    <input type="submit" class="styled" />
    Check out these pages for further help:
    HTML / XHTML Reference

    CSS Reference

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles