All geek questions in one place

How to use superscript in HTML text input tag?

I have a simple input tag (which I prettify using Bootstrap) in which I now want to place a superscript (to display "m 2 "). The problem is that when I do this:

<input class="form-control" name="gla" placeholder="m<sup>2</sup>" type="text">

The placeholder literally shows this: m<sup>2</sup>

Does anyone know how I can display superscript correctly? All tips are welcome!

+5
source share
5 answers

You can simply use the UTF-8 character for superscript ². Also do not forget to set the encoding of the UTF-8 document.

 <html> <head> <meta charset="UTF-8"> </head> <body> <input class="form-control" name="gla" placeholder="m²" type="text" /> </body> </html>

Also this answer may help.

+5
source

How to use HTML objects

 <input class="form-control" name="gla" placeholder="m&sup2;" type="text">

Yes, he is working

+6
source

You must insert the ² symbol directly into the html tag - this is ascii 262 / octal code 178. This should be displayed safely, as it is just ASCII, not Unicode.

 <input type="text" placeholder="m²" />
+2
source

Within the attribute value, you can use characters in the same way as in the contents of a document (except for the quotation mark used as a separator for attribute values). This means that you can write the superscript of two characters as such or use a link with a named character or a numeric link. When using a character as such, you need to make sure that the character encoding is correctly declared (matches the actual encoding).

 <input class="form-control" name="gla" placeholder="m²" type="text"><br> <input class="form-control" name="gla" placeholder="m&sup2;" type="text"><br> <input class="form-control" name="gla" placeholder="m&#178;" type="text"><br> <input class="form-control" name="gla" placeholder="m&#xb2;" type="text"><br>
+1
source

Try this, you can use

HTML object (named) &sup2;

HTML entity (decimal) &#178;

HTML entity (hexadecimal) &#x00B2;

  <input class="form-control" name="gla" placeholder="m&#178;" type="text">

Demo: http://jsfiddle.net/q8310f27/1/

0
source

Source: https://habr.com/ru/post/1208224/

More articles:


All Articles