CODEWITHSUNDEEP
html
weardstuff
weardstuff

Reputation: 807

HTML in the input field value

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.

Upvotes: 28

Views: 60873

Answers (5)

Admin
Admin

Reputation: 39

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

Upvotes: 3

Tom Claus
Tom Claus

Reputation: 1291

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

Upvotes: 2

Dan Blows
Dan Blows

Reputation: 21174

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="&lt;b&gt;Some text&lt;b/&gt;">. 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.

Upvotes: 20

GreenMatt
GreenMatt

Reputation: 18580

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" />

Upvotes: 1

Mike Thomsen
Mike Thomsen

Reputation: 37506

Try CSS:

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

Upvotes: -2

Related Questions