HTML in the input field value

Question

How can I get HTML to work in the value of the input field ? If you include HTML in the value, it appears as pure text. Is there a way to do something like this?

<input type='text' value='<b>tekst</b>'></input>

So the the output is:

tekst

instead of

<b>tekst</b>

I think that was bad example... I want every appropriate HTML tag to work. If i want to include an image, the image appears in the input, if i want to add a tag ... the text should appear as a link linked.

why not set a style like this to the input `input{ font-weight: bold; }` — KJYe.Name, Apr 28 '11 at 19:23
no no no , i gave it like an example, i ment every kind of html, — weardstuff, Apr 28 '11 at 19:25
are you trying to create a WYSIWYG editor? like http://ckeditor.com/ — KJYe.Name, Apr 28 '11 at 19:29

score 18 · Answer 1 · answered Apr 28 '11 at 19:29

I'm not sure from your question whether you are trying to make the value contain HTML, or whether you want to apply HTML to something inside the input.

If you want to be able to set the value to some HTML, like <input value="<b>Some HTML</b>"> where the value will actually show the HTML, you need to encode the HTML brackets like <input value="<b>Some text<b/>">. There are functions available to do this for you automatically in most scripting languages (e.g. htmlentities() in PHP).

If you want to apply HTML to the input value, short answer is... you can't. If you want formatting on there, you could use the contentEditable attribute in HTML5 which lets you just edit-in-place (think Flickr headers).

If you just want a standard input field to be styled, you can just use CSS like the other answers suggested.

u saved my life to a totally unrelated problem, was searching over the net how to embed html inside a string which i both wanted to be partly an html element and partly text :) — Bryan Arbelo - MaG3Stican, Oct 20 '14 at 13:25

score 3 · Answer 2 · edited Aug 16 '17 at 16:29

3

You have to encode all the HTML you want in the value and paste it in the input value.

If you encode this:

"http://sansoftmax.blogspot.com/"

It will look like this:

&quot;http://sansoftmax.blogspot.com/&quot;

In input:

value="&quot;http://sansoftmax.blogspot.com/&quot;"

Online Html Encoder/Decoder

edited Aug 16 '17 at 16:29

Nathan Arthur

8,287
7
55
80

answered Jun 03 '14 at 09:19

Admin

39
1

This encoder became very helpful. If someone needs to paste HTML code as field value to HTML file in visual studio, first you must encode this string, and then as you paste it in the file, visual studio will ask you, do you want to escape this text. When you refuse to escape, everything works just fine – Tropin Alexey Jul 28 '21 at 07:23

score 2 · Answer 3 · answered Apr 28 '11 at 20:06

2

You can try to decode you entities from your postvalue. In PHP you can do this with html_entity_decode();

answered Apr 28 '11 at 20:06

Tom Claus

1,301
1
9
13

score 1 · Answer 4 · answered Apr 28 '11 at 19:26

1

I don't think you can put HTML inside a text field and have it interpreted as HTML instead of as text in the field.

To accomplish what you want you'll have to use CSS. An in-line example to bold the text as you cited in your example:

<input type="text" style="font-weight: bold;" value="tekst" />

answered Apr 28 '11 at 19:26

GreenMatt

18,244
7
53
79

1

@Danish: I've been wondering why this answer has recently gotten a couple downvotes after sitting forgotten for 6 years. From the question it isn't clear (at least to me - and I just realized I tried to clarify it) what the OP wanted. If you have real feedback, please provide it. Unfortunately, "really!! what??!" isn't helpful. – GreenMatt Mar 06 '17 at 16:39
you are clearly angry i will delete my annoying comment sorry! – Danish Mar 06 '17 at 17:02
1

@Danish: No, I'm not angry. I am really trying to understand why my answer is suddenly disliked. – GreenMatt Mar 06 '17 at 17:29
@GreebMatt so from the question so far what i understood is, OP was to have html saved as value in input tag. His example mights leads you to think think that he wants font weight bolf, but what he meant was to have html saved in input like this 'tekst' also he mentioned this "... I want every appropriate HTML tag to work" – Danish Mar 07 '17 at 08:03
Thanks for the feedback. I saw that in the question. I don't know of any way to make that work, and said so in the answer. The top voted question says something similar. If you know a way to make it work, please provide it as an answer. – GreenMatt Mar 07 '17 at 13:15

score -2 · Answer 5 · answered Apr 28 '11 at 19:24

-2

Try CSS:

input[type=text] {
    font-weight: bold;
}

answered Apr 28 '11 at 19:24

Mike Thomsen

36,828
10
60
83

HTML in the input field value

5 Answers5

Linked