Member Avatar for AngelicOne

I'm having trouble putting a markup tag as text on a radiobutton. I'm having a question for example, "what do we use for putting up a horizonal line in html?". Then a radiobutton should have multiple choice which contains markup tags like "<hr>" but the problem is, it's being detected by html and will execute the tag.

  • 3 Contributors
  • 2 Replies
  • 108 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short answer: the browser treats angle-bracket text as markup, so the label must be emitted or inserted as plain text (escaped entities, a text node, or programmatic assignment) rather than raw HTML. is right to point at escaping; 's PHP htmlentities tip is a good server-side solution when generating many examples.

Client-side (safe and simple): create a text node or set textContent/innerText on the label so the string is not parsed as HTML. This keeps the characters literal and prevents execution. Example pattern:

var lbl = document.querySelector('label[for="opt1"]');
lbl.textContent = '<tag-name>';

See the Node.textContent docs for behavior differences: Node.textContent.

Server-side / templating: have the template engine or server escape characters before output. In plain PHP use the escaping helpers instead of emitting raw markup; modern templating systems also auto-escape. PHP reference: htmlspecialchars. For reference on entities see HTML character references.

Alternative UI trick: store the literal in a data-attribute and render it via a pseudo-element so the DOM never parses it as HTML. Example pattern:

<label id="codeLabel"></label>

<script>
  document.getElementById('codeLabel').dataset.code = '<tag-name>';
</script>

<style>
  #codeLabel::after { content: attr(data-code); font-family: monospace; }
</style>

Caveats: avoid innerHTML for this (it will parse tags), ensure the radio input has an accessible label (pseudo-elements might not be announced by all screen readers), and always sanitize user-supplied input to prevent XSS when values come from users or external sources.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Psychic is right. However if you intend to display a lot of tags, you can end up climbing up your own derriere with escape characters. If you have php installed (and on your host), you can do something like this:

<?php echo htmlentities('<p><strong><span class="bigcapital">P</span></strong>lease do not look <em>BELOW</em> the line</p><hr />');?>

But there again, it may be overkill for simple examples like the one you gave.

Edited by Member #120589 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.