I've got a simple input tag (which I prettify using Bootstrap) in which I now want to place a superscript (to display "m2"). 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 anybody know how I can properly display the superscript? All tips are welcome!
I've got a simple input tag (which I prettify using Bootstrap) in which I now want to place a superscript (to display "m2"). 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 anybody know how I can properly display the superscript? All tips are welcome!
Share Improve this question asked Dec 3, 2014 at 11:38 kramer65kramer65 53.9k132 gold badges329 silver badges522 bronze badges 2- check this out: stackoverflow.com/questions/17683654/… – Aditya Commented Dec 3, 2014 at 11:46
- Both Rhumborl and Lekhnath have correct answers. – rfornal Commented Dec 3, 2014 at 11:48
5 Answers
Reset to default 8How about using HTML Entities
<input class="form-control" name="gla" placeholder="m²" type="text">
Yes it works
You could just use the UTF-8 character for superscripted ². Also be sure to set the charset of the document to UTF-8.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input class="form-control" name="gla" placeholder="m²" type="text" />
</body>
</html>Also this answer might be of help.
Within an attribute value, you can use characters just like in document content (except for the quote character used as attribute value delimiter). This means that you can write the superscript two character as such, or using a named character reference, or a numeric reference. When using the character as such, you need to make sure that the character encoding is properly declared (corresponds to the actual encoding).
<input class="form-control" name="gla" placeholder="m²" type="text"><br>
<input class="form-control" name="gla" placeholder="m²" type="text"><br>
<input class="form-control" name="gla" placeholder="m²" type="text"><br>
<input class="form-control" name="gla" placeholder="m²" type="text"><br>You should be able to insert the ² character directly into the html tag - it is ascii code 262/ octal 178. This should render safely as it is just ASCII, not Unicode.
<input type="text" placeholder="m²" />Try this, You can use,
HTML Entity (Named) ²
HTML Entity (Decimal) ²
HTML Entity (Hexadecimal) ²
<input class="form-control" name="gla" placeholder="m²" type="text">
Demo : http://jsfiddle.net/q8310f27/1/