Using "buttons" for various things Options

[Brian Chandler]

(This is not really website design in the arty sense; it's website implementation. But where should a question concerning both server and client side programming go?/)

In the old days the only "buttons" as such were <input type=submit>, and you automatically got a non-customisable button. But now the <button> tag gives a nicely styled effect, which is good, but I need to use these buttons in three different ways:

(a) For a javascript action - simple, just put the action on the button
(b) For simple links - I can include the <button> inside an <a> tag, but is this the best way to do it?
(с) For form submission - how do I make the <button> tag do a submit?

Thanks...

[Christian J]

(b) For simple links - I can include the <button> inside an <a> tag, but is this the best way to do it?

There's also https://htmlhelp.com/faq/html/links.html#button-link
One disadvantage is that the user can't right-click such a button link.

(с) For form submission - how do I make the <button> tag do a submit?

<button type="submit"> should work too, but there might be at least one MSIE bug: https://stackoverflow.com/questions/2014975...only-submit-bug; also, https://developer.mozilla.org/zh-TW/docs/We.../Element/button says:

IE7 has a bug where when submitting a form with <button type="submit" name="myButton" value="foo">Click me</button>, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.

(the English version of the same MDN page does not contain this quote). That said even IE11 is being phased out now, and I doubt anyone is able to use IE7 on the web today.

[Brian Chandler]

Thanks for the quick reply Christian. That covers case (с) [how did I do that, then?] well. My misgiving about including the button within something else (<a> tag) is that I am finding the flexbox thing a good way to include a row of buttons, and it would be neater if the items below the flexbox div were all the same.

And including in a <form> is no advance AFAICS over an <a>, which presumably then does allow the right button.

This post has been edited by Brian Chandler: Aug 9 2021, 04:52 AM

[Christian J]

(b) For simple links - I can include the <button> inside an <a> tag

Actually this seems invalid, even in HTML5. The W3C validator flags it as an error, and https://html.spec.whatwg.org/multipage/text...l#the-a-element says:

"The a element can be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links)."

[Brian Chandler]

Hmm, well it's hard to know how to take this stuff seriously sometimes. A button is not a link - that is the problem - so "buttons or other links" is gibberish. Actually I did this the other day somewhere (<button> inside <a>) but on this problem it's easiest to make all the buttons submit to the same general handler.

I was concerned about the tags immediately below the flexbox div not being the same; I suppose a <form> containing a <button> should behave the same as just a <button> for layout, but this is relying on css to be sensible, which has never been a good bet.

[pandy]

Why can't you use option C in your original post?

[Brian Chandler]

It isn't C, it's (с), pronounced 'ess', but the point is these are three different ways I want/need to use a button. Christian answered the case (с): you simply put type=submit. The tricky one is when you want the button to be a simple link...

[pandy]

I mixed your options up. I meant B, "For simple links - I can include the <button> inside an <a> tag".

Or you could style an A to look as a button. But I guess you don't want to do that either.

[Brian Chandler]

I mixed your options up. I meant B, "For simple links - I can include the <button> inside an <a> tag".

Or you could style an A to look as a button. But I guess you don't want to do that either.

I'm happy to do anything that makes sense... so if for example I can write something like:

<a display=button class=std>

and this is treated for style purposes exactly as though it were

<button class=std>

then that's great. I guess I would have to amend the stylesheet so it says

BUTTON.std, A.std { ...

... or not?

This is likely to be a child node of a flexbox div, and this explicitely treats its child nodes differently, so this might be better in that respect. I'm sure at least some of my guesses will be wrong, so grateful for corrections.

This post has been edited by Brian Chandler: Aug 11 2021, 01:57 AM

[Brian Chandler]

I would be grateful if someone can confirm or deny my own suggestion...

[Christian J]

<a display=button

There's no such DISPLAY attribute that I know of.

Best coding solution I can think of is styling both links and buttons like buttons, using the same CLASS name. (A minor difference is that HTML buttons look like they're pressed down when you click on them, but maybe you can achieve the same effect on the HTML links too.)

But do the links have to look like buttons, can't they look like links? The site design would be less consistent, but the users would realize they're links that can be right-clicked.

[Brian Chandler]

<a display=button

There's no such DISPLAY attribute that I know of.

Best coding solution I can think of is styling both links and buttons like buttons, using the same CLASS name. (A minor difference is that HTML buttons look like they're pressed down when you click on them, but maybe you can achieve the same effect on the HTML links too.)

But do the links have to look like buttons, can't they look like links? The site design would be less consistent, but the users would realize they're links that can be right-clicked.

Thanks! OK, do I mean this:

Button style: BUTTON class=std - gets BUTTON.std { x y z }

For A class="button-std":

A.button-std {
display: button;
x y z }

Does this mean that for all style purposes, this A link is treated as a BUTTON?

Incidentally, you mention "consistency", but I am just trying to make the organisational bit look consistent - here's a sample page: https://imaginatorium.com/shop2.html
The buttons at the bottom are all <A> links with the buttons inside; I have used a css hover effect, but when I click them (Firefox) nothing seems to go down. But I can drag them all over the page, which seems singularly pointless. And from the user's point of view, what matters is that it is clear what the button does, not how this is achieved, which might be javascript, or reloading the page, or going somewhere else. If there were any consistency in html, I could right-click a form submit button to open the result in a new window.
https://imaginatorium.com/shop2.html

[CharlesEF]

'display: button' is invalid in both HTML style and CSS. To make the 'a' link look like a button you need CSS something like this:

.button
{
background: #0153CE;
border-radius: 10px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font: bold 10pt Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}

Now just give any 'a' link a class of 'button'. You can adjust size, color, etc. to whatever you want.

Also, you can use something like this to simulate the button click.

.button:active
{
-webkit-border-transform: translate(1px, 1px);
-moz-border-transform: translate(1px, 1px);
-o-border-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}


This post has been edited by CharlesEF: Aug 14 2021, 01:59 PM

[Christian J]

here's a sample page: https://imaginatorium.com/shop2.html
The buttons at the bottom are all <A> links with the buttons inside;

Those BUTTON elements don't seem to be used for anything. I think you could achieve the same appearance by just styling A elements.

If you want to submit a POST form using an identical-looking menu item, there are a couple of different things you could do:

- Use an INPUT or BUTTON submit, styled in the same way as the A elements (note that you may have to reset any browser default styling of the form element).

- Submit the POST form with an A element and the javascript submit() method. This would simplify the HTML and CSS, at the price of javascript dependency. Also, right-clicking such an A element would likely confuse the user.

I have used a css hover effect, but when I click them (Firefox) nothing seems to go down.

Sorry, I was just confusing myself. (MSIE make clicked buttons appear to get pressed into the page, but clicking a default style button in Firefox and Chromium browsers just changes its background color to a darker gray. If you're creating your own form button styling you can of course leave out that click effect.)

[Brian Chandler]

Thanks for the help - I'm being slow, partly because I have other things to do too, and partly because I find this all very depressing.

So is it possible to say exactly what properties a <button> has that a <div> (for example) does not?

I'm partly trying to understand what the display: thing means.
https://www.w3schools.com/html/html_blocks.asp confidently asserts:
"There are two display values: block and inline." Plainly this is not true, and it goes downhill from there.

Then here is the css for the button I have included inside an <a> element;

DIV.ftrlinks BUTTON, BUTTON.std {
margin: 0.5em 0.2em;
border: 3px solid #ffffff;
border-radius: 0.4em;
padding: 0.3em;
color: #ffffff;
background-color: <?=$liv_deep?>;
box-shadow: 0 0 6px #404040;
}

Charles has written something that perhaps suggests that if I apply exactly the same style to <a>, with the addition of :
display: inline-block;
- then I will get exactly the same visual result. Is that right?

I found the following at https://www.w3schools.com/cssref/pr_class_display.asp :
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

I suppose "formatted as an inline..." means "treated as though text, which flows from line to line. Does that mean that a wide enough element with display:inline-block will break onto a new line?

But then, actually, I am using a flexbox to contain the buttons, since this offers sensible options for centring, spacing, and flowing. So I can use <a> elements as the child elements, and they "...automatically becomes flexible (flex) items." (Grammar sic, from https://www.w3schools.com/css/css3_flexbox_items.asp )

So having "become flex items" how do I apply block-style formatting? Should I put display:block ? or something else? or nothing?



I cannot understand what "display" is really meant to mean. The W3schools page (
OK, so how would


display: table-cell;

[Christian J]

So is it possible to say exactly what properties a <button> has that a <div> (for example) does not?

Browser default styles could be different for every browser brand. FWIW, here's an online tool (I haven't checked for accuracy): https://browserdefaultstyles.com/#button or maybe you could find the properties from some "CSS reset stylesheet": https://www.webfx.com/blog/web-design/css-reset-stylesheets/ (assuming such stylesheets list every property).

I'm partly trying to understand what the display: thing means.
https://www.w3schools.com/html/html_blocks.asp confidently asserts:
"There are two display values: block and inline." Plainly this is not true, and it goes downhill from there.

That seems to be a (simplified) beginner tutorial. Here's a longer list of values: https://www.w3.org/TR/2020/CRD-css-display-...propdef-display

Charles has written something that perhaps suggests that if I apply exactly the same style to <a>, with the addition of :
display: inline-block;
- then I will get exactly the same visual result. Is that right?

I'd add "text-align", "text-decoration", "cursor" and all the font properties:

CODE

a, button {
display: inline-block;
margin: 0;
padding: 0.2em;
border: 2px solid #000;
border-radius: 0.1em;
cursor: pointer;
text-decoration: none;
text-align: center;
font: 1em/1.2em sans-serif;
color: #000;
background: #eee;
}

I don't think current browser use box-shadow, so maybe you don't need to define that.

You'd still get the mousedown effect in MSIE that I mentioned earlier, I don't know how that is created or removed.

Does that mean that a wide enough element with display:inline-block will break onto a new line?

No, an element with "display:inline-block" has width and height (like an IMG element or TEXTAREA), but text inside it may break onto a new line.

Can't help with any of the Flex things, haven't studied that myself.