How to program a pushbutton?

  stlucia2 09:04 18 Aug 2012

I posted this on the general forum, but no response. I've now realised theres a dedicated web design forum, so I'm posting here now:-

For many years now I have created and maintained a web site for a club I'm a member of. It is hand-coded in HTML, and contains a dozen or so pages with text and graphics; and the links between pages are simple text using the "A HREF= ..." command.

I'm trying to smarten up the site by using pushbuttons, and have been reading up on the "BUTTON" command. I've got one code that works as follows:-

(form) (input type="button" value="Click here to enter" onclick="window.location.href='contents.htm'") (/form)

... and another one that doesn't:-

(button type="button" value="Click here to enter" onclick="window.location.href='contents.htm'") (/button)

in each case using angle brackets where the curved ones are.

The first example works fine; the second one only creates a very small button with no text in it, but it does go to the correct page when clicked. So, any idea what's wrong with its code, please?

Also, I thought that defining the style and colour of the text on the button would be a simple matter of inserting ** (or whatever) into the code, but it doesn't seem to do anything. So can someone help me on that, please?

  LastChip 02:00 19 Aug 2012

Should be:

(button type="button" value="Click here to enter" onclick="window.location.href='test.html'")Click here to enter(/button)

If you want to style it:

(style type="text/css")

button {color: blue; background-color: yellow;}


or use an in-line style:

(button type="button" value="Click here to enter" onclick="window.location.href='test.html'" style="color: blue; background-color: yellow;")Click here to enter(/button)

As your post, all () should be angle brackets.

  LastChip 04:12 19 Aug 2012

Reconsideration. You don't actually need the "value" part of the code. This will work equally as well, but check it out in IE, as I can't be bothered with that pile of ...

(button type="button" onclick="window.location.href='test.html'")Click here to enter(/button)

and of course, replace my test.html with your contents.htm

  stlucia2 08:36 19 Aug 2012

Thanks Lastchip. My coding sessions are few and far between, so I'm very rusty. What I was missing was the "style" command -- I was trying to use "font color=#....".

I'll test out your suggestions later in the day, and report back.

  stlucia2 11:08 19 Aug 2012

OK thanks, that works and has got me started -- now that I know the correct syntax I can tweak other parameters.

One follow-up question though: When I click on the button to move to another page, my IE gives a warning that it has "restricted this web page from running scripts or Activex controls ...". I can click on the message and tell it to allow the script, but what's the significance of the message, and is there any way I can stop it appearing? It doesn't appear with my original code, so it's something about the "button" code that it doesn't like.

  LastChip 15:37 19 Aug 2012

From what you're describing, you have IE set-up to exclude running scripts or AciveX to not run or some other security issue within the browser.

It's not a coding issue, it's a browser issue.

You can't (as far as I'm aware) override browser settings. That's down to the individual.

I've actually gone back on my word and tested the code in IE8 at default settings and it works fine (no warnings). But I have seen issues reported with later versions of IE and I understand there are known bugs in later versions that are likely to cause problems.

You could try a further slimmed down version, as you don't need the "type" code either and see if it makes a difference:

(button onClick="window.location='contents.htm'")Click here to enter(/button)

A further issue could be, if you have other scripts being called on the page your linking to. If you have, try disabling them all and see if you still get the warning. If not, reinstate one at a time until you find the culprit.

I'm afraid IE is your worst nightmare and the sooner people get rid of it the better. But I wouldn't hold your breath!

  stlucia2 20:41 19 Aug 2012

Thanks LastChip.

It's a long time since I did any coding and, since "button" doesn't appear in my HTML reference, I thought maybe it was some new feature that doesn't work with all browsers -- though the web references I found about it claim that it's compatible with IE, Firefox, Chrome, etc.

There's nothing in the target pages that cause the message, for when I use the simple (a href="contents.htm") instead of the "button" command I don't get the message. Or is it because I have to use "window.location.href='contents.htm'" as the address with "button", instead of the simple "contents.htm" that works with the "a href=" command?

Anyway, I do get the IE message with quite a few other web pages, so I'll have a look at my settings. I just didn't want to go live with a new version of my web page if it's going to cause problems with everybody's browsers.

  Ansolan 21:02 19 Aug 2012


LastChip has been very helpful and I'm sure the principle will be okay for most (not all) browsers. Just wondered if it might be easier to go to a:

Button Generator

Make whatever colour, size etc. you want, add the css to your style sheet and stick to the standard link format. No issue then for any browsers or search engines.

The CSS3 generated will not fully work in older browsers but should be okay, just look a little flat. If you are concerned, take a screenshot of a button in a good browser, cut out an image for the button background and apply that to older IE etc. Doubt you will feel the need.

  stlucia2 07:48 20 Aug 2012

Thanks Ansolan.

I've been using pure vanilla HTML, and wasn't aware of CSS or CSS3. But now that I am I'm going to explore it further

  LastChip 13:09 20 Aug 2012

You have all sorts of options.

Personally, I don't use the "button" tag, but go with images and use the "onClick" function if I need that sort of processing. IE seems to complain less about "input" than other types of code to achieve the same objective.

If you get into html5 (still in it's infancy), you can program the whole lot from css, but as always, IE fails to work and you have to use workarounds to get full functionality across the board.

One day, Microsoft may get its act together and catch up with the rest of the world. Wishful thinking perhaps.

Never-the-less, hopefully I answered your original question which was "any idea what's wrong with its code".

As an aside, I firmly believe in hand coding and in fact all the sites I code (with the exception of e-commerce and blogs) are hand coded. In my view, it achieves two important objectives. First, it's far easier to debug as you have an in depth understanding of the structure and two, you tend to get very lean and hence fast code compared to web design applications. Dreamweaver is just as one example, that creates unbelievably bloated code, and I'm not picking on that in particular, most are similar. I guess it's a function of trying to cover every conceivable problem.

So I encourage you to continue with your "vanilla" html. I personally find it fascinating and one of those disciplines where you never stop learning.

Good luck.

  stlucia2 19:54 20 Aug 2012

My views about hand coding are the same as yours, LastChip. I tried a web design software many years ago (not Dreamweaver, but can't remember which one) and, even at my beginner stage of learning HTML coding, I could see that the resulting code was extremely bloated. I've been looking at the images and "onClick" route as well -- I can probably create my images in Corel Draw I suppose.

But I'm curious about your views on IE. I used to be a great fan of FireFox, using it on my PC and my Android phone. I eventually ditched it on my PC in favour of IE because of some compatibility problem (can't remember exactly what it was), but before that I'd often had to go to IE because FF wouldn't talk to some sites that required my input, such as one airline's reservation system. More recently I ditched FF on my phone in favour of the stock Android browser because FF kept reporting that it was unable to play media.

Compared to FF (when it was working for me) IE is quite slow, but functional. What browser do you recommend?

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

iMac Pro review

Illustrator Charles Williams on how to create magazines and book covers

iMac Pro review

Les meilleures prises CPL (2018)