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
– KJYe.Name, Commented Apr 28, 2011 at 19:23
no no no , i gave it like an example, i ment every kind of html, — weardstuff
– weardstuff, Commented Apr 28, 2011 at 19:25
are you trying to create a WYSIWYG editor? like ckeditor.com — KJYe.Name
– KJYe.Name, Commented Apr 28, 2011 at 19:29

Dan Blows · Accepted Answer · 2011-04-28 19:29:16Z

20

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.

answered Apr 28, 2011 at 19:29

Dan Blows

21.2k10 gold badges68 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bryan Arbelo - MaG3Stican Over a year ago

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 :)

Reign.85 Over a year ago

Htmlentities does the job

Tm Cls · Accepted Answer · 2011-04-28 20:06:10Z

2

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

answered Apr 28, 2011 at 20:06

Tm Cls

1,3011 gold badge9 silver badges13 bronze badges

Comments

Nathan Arthur · Accepted Answer · 2017-08-16 16:29:43Z

2

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, 2017 at 16:29

Nathan Arthur

9,2977 gold badges65 silver badges83 bronze badges

answered Jun 3, 2014 at 9:19

Admin

291 bronze badge

1 Comment

Tropin Alexey Over a year ago

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

GreenMatt · Accepted Answer · 2011-04-28 19:26:43Z

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, 2011 at 19:26

GreenMatt

18.6k9 gold badges56 silver badges82 bronze badges

5 Comments

GreenMatt Over a year ago

@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.

Danish Over a year ago

you are clearly angry i will delete my annoying comment sorry!

GreenMatt Over a year ago

@Danish: No, I'm not angry. I am really trying to understand why my answer is suddenly disliked.

Danish Over a year ago

@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 '<b>tekst</b>' also he mentioned this "... I want every appropriate HTML tag to work"

GreenMatt Over a year ago

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.

Mike Thomsen · Accepted Answer · 2011-04-28 19:24:12Z

-2

Try CSS:

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

answered Apr 28, 2011 at 19:24

Mike Thomsen

37.7k11 gold badges64 silver badges86 bronze badges

Collectives™ on Stack Overflow

HTML in the input field value

5 Answers 5

2 Comments

Comments

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related