Sunday, March 6, 2011

What alternative do I have to ugly submit buttons in html forms?

I'd like to make a simple html form where a person can upvote or downvote an item. However I don't like the default look of a <input type="submit"> . What other options do I have to send a POST request than a bulky, default button?

From stackoverflow
  • You could use an image button.

    Gareth : This is the best option, but it has some IE6 incompatibilities. Whereas most browsers will let you set a name/value on an image input, which you can check for on the server side, IE6 (and maybe 7) will ignore the value attribute and send the coordinates of where on the image the button was clicked
  • You can also call the "submit" directly from javascript. See here.

    document.myform.submit();
    

    This allows you to use basically anything as a control that will submit your form.

    Ryan Doherty : This will work, but not with any browser with JavaScript turned off or unavailable.
    Eugene M : Now, I could do this and have image buttons in noscript tags for anyone without javascript, right?
    le dorfier : And you can have the ugly submit button for people who have images turned off, too. All three!
    Eugene M : How the heck would I detect if they have images turned off?
    Firas Assaad : You use JavaScript :P
    I.devries : side-effect of this, is that you can't submit a form using the enter key (without more JS). Also, when you use this method, be sure not to name an input "submit", because it overwrites the function "submit".
  • You can also make pretty buttons with just css, here's a nice article:

    http://particletree.com/features/rediscovering-the-button-element/

  • Check out this page to see what can be done with CSS Styled Buttons...theyll make you're website feel more alive and interactive to users.

    Don' forget, the last thing you want your users to do on your website is think ...so having clearly defined buttons is a big help.

  • you can use JQuery framework its javascript library ,you can use default image or span or div or anything else even anchor tags to do submit button its easy to use and can post form data by post method or get method through ajax just visit JQuery website :JQuery

    I.devries : A javascript library for button styling is a bit overkill. Not every simple task should be solved by a library like JQuery.
  • Like above mentioned techniques, I would recommend either image buttons or designing boxes with to create a nice and simple css-button.

    Simplicity can be very well used.

    CSS power: http://www.zengarden.com

    Sebastian Hoitz : You mean www.csszengarden.com ?
  • You can use a highly configurable component such as Button in YUI. You get the chance to modify the looks of it and a lot (perhaps too much for your need) extra functionality as a bonus on top of that.

  • You can easily style those buttons with CSS. Unfortunately IE does not support :active selector for buttons, so you'll have to use JavaScript if you have a separate style for a pressed button.

  • If you want to upvote/downvote an item in ajax/web2 style (like stackoverflow), don't use forms at all. Use javascript, and send an asynchronous POST request and populate it manually. You can use jQuery to help you automate some stuff.

    Quickly googling "ajax jquery" gives a bunch of results, here's one of them

    I.devries : You can also make it a form, so it works without javascript, and then attach javascript to it for those who have it enabled. This has of course nothing to do with styling buttons, and JQuery is NOT the answer to every little problem.

0 comments:

Post a Comment