About HTML anchor element with href attribute inside HTML button elements

Developers
#1

I remember praising @vilc at the time. However after a little reading…

Interactive content (<a href=...) inside a button element is not allowed:

image

Does it matter? That’s up to you.

#5
  • Can this be true when instead using the $button widget?
  • I don’t know why you would, as it generates a html button tag. See how the button widget in tiddlywiki can be used to introduce an onclick which is effectively a button.

I understand the $button widget can be used to effectively introduce the equivalent of an onlick wrapper as can the $eventcatcher and message catcher. You may need to use the tag parameter (html tag) of the button widget to use say span or div rather than a button.

  • As a result it can be used to get tiddlywiki to respond to the onlick and mouse over of the buttons content and trigger actions on the actions parameter or inside the button widget.
  • Keep in mind that the $button widget is once removed from the html button tag as its delivered via tiddlywiki script.
  • The internals plugin, as installed at TiddlyWiki.com, provides a preview in the editor so you can see the “raw HTML” that the content and widgets generate after render. This allows you to compare the result with standard html methods.

Example:

<$button tag=span>
<a href="https://tiddlywiki.com" target="_blank">Go</a>
</$button>

More;

<$button tag=span tooltip="mouse over" actions="""<$action-sendmessage $message="tm-notify" $param="SampleNotification"/>""">
Go
</$button>

generates

<p><span class="" title="mouse over">
Go
</span></p>

but appears as simple text, with mouse over and if clicked sends a TW notification. Notice you can not see any thing about buttons or actions, or onclick in the html?

How to Control the Generated href via Wikilink
#6

I don’t understand the premise – instead of what?

I hope you’re not questioning the veracity of the HTML spec… and I hope you’re not asking me to annotate the spec for you. I posted links. All you have to do is follow them and read.

#7

You need better tools

image
image1091×268 31.3 KB

1 Like
#8

Answer: Instead of <button> a $button widget

There “may be no interactive content inside a html button element”, in part because it is itself an interactive element, however the tiddlywiki button is not ONLY a html button.

  • It may also depend on how you define interactive, I observe it defines this as;

The interactive content elements are:

But see also below that “Some elements belong to this category only under specific conditions”, but we have the condition in which they are interactive.

for example in following on TiddlyWiki.com

<$button tag=span tooltip="mouse over" actions="""<$action-sendmessage $message="tm-notify" $param="SampleNotification"/>""">
This sentence is clickable<br>

A list within a button
<$list filter="[tag[HelloThere]]">

</$list>
</$button>
  • All items in here have the same tooltip (From the button)
  • The plain text responds to the onclick action (As expected)
  • The list of title titles will however generate their own onlick and a different “interaction”

In the above there is a strong argument that inside the above $button widget that the content is interactive.

Notice how this is not “Interactive”.

<$button tag=span tooltip="mouse over" actions="""<$action-sendmessage $message="tm-notify" $param="SampleNotification"/>""">
This sentence is clickable<br>

A list within a button
<$list filter="[tag[HelloThere]]">
<$text text=<<currentTiddler>>/><br>
</$list>
</$button>
  • Only one onclick response exists.
  • Remove tag=span from the above button to see how it looks
    • Use the editor preview “raw HTML” and see how there are multiple <a href= inside the html button tag, which are arguably interactive content. See abstract html view.

Here is an abstract;

<p>
<button class="" title="mouse over">
This sentence is clickable<br>

A list within a button

<div><a class="tc-tiddlylink tc-tiddlylink-resolves" href="#A%20Gentle%20Guide%20to%20TiddlyWiki">A Gentle Guide to TiddlyWiki</a></div>

<div><a class="tc-tiddlylink tc-tiddlylink-resolves" href="#Discover%20TiddlyWiki">Discover TiddlyWiki</a></div>

<div><a class="tc-tiddlylink tc-tiddlylink-resolves" href="#Some%20of%20the%20things%20you%20can%20do%20with%20TiddlyWiki">Some of the things you can do with TiddlyWiki</a></div>
....

</button></p>
  • The above seems to me to be interactive content inside a button.
#9

No, it’s how the spec defines it. Yet again, I’m going to have to say it…

I’m done with this.

#10

Look at how the spec defines it, if you want to ignore what I said about tiddlywiki $button widgets, and you will see it lists the ‘a tag’ as something that sometimes obeys this rule and sometime not.

So to put it directly “I believe, your argument is incorrect”,

perhaps a good time for you to bale, I suppose.

@CodaCoder have you noticed of late you are dismissive, and less likely to ask a question of clarification, but take a personal and negative view of something you don't understand or agree with? Is it only for me or generally?
  • I only say this because I value your contribution and consider you a virtual friend.
  • This is a public message, not a private one because you have effectively dismissed my replies a few times in public recently.

R U OK?

#11
#12

Hi folks,

I did move this discussion into it’s own thread, but I wanted to keep the OP in the original thread too. So I had to duplicate the OP and re-assign ownership to @CodaCoder

IMO this thread goes way off topic in the root thread – So I moved it.

Discussion can go on here if you want.

I think there are some interesting aspects and they would be worth to discuss.

But – Please watch your language, otherwise I’ll close the thread, which was not possible with the original thread.

It will be possible here.

kind regards
Mario

1 Like
#13