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.
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.
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:
"http://sansoftmax.blogspot.com/"
In input:
value=""http://sansoftmax.blogspot.com/""
Online Html Encoder/Decoder
You can try to decode you entities from your postvalue.
In PHP you can do this with html_entity_decode();
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" />
Try CSS:
input[type=text] {
font-weight: bold;
}
Related
Is there any way to add a format to a input tag that the user has to use.
As an example I would like the user to input a text of the format:
int:int
or
2:1
Is there any way of doing this in html without writing a validation code in javascript?
Edit: I would be willing to use an extra library
You are able to add an attribute pattern="" which uses Regex to validate the input format. In your case if you want any integer followed by ':' followed by other integer, the solution is:
<input pattern="\d+[:]\d+" title="{message_text}" />
Edit: added title="" attribute
You can do this with Vue.js by adding v-model.numer=“” in the html. This would be using Vue, a external library that would handle it all for you.
For vanilla HTML, You can also use type=“number” in your input tag, and most browsers support this. The ones that don’t will default to type of text. More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
I am wondering, if/how I can add Markup to a data-attribute tag? Like:
<i data-description="<h5>Head</h5><p>Content</p>">Foo</i>
I am using this info later on (from David Walsh) with:
i:hover::after{content: attr(data-description);}
And it outputs the Markup as plain text. Is there any chance I could use Markup-tags in a data-attribute though?
Text inside data attribute values will be interpreted like any other text in an attribute value. Markup will be parsed as normal for an attribute value.
You can store any text you like in the attribute. That can include content that you intend to have interpreted as markup in other places (watch out for & and " characters which will need representing as entities).
You cannot use markup in a CSS pseudo-element. This has nothing to do with where you get it from.
I have updated it. let me make it more clear
<input type="text" value='<div>hello</div><strong>'/>good day
what I have got
input box having default value as <div>hello</div><strong> inside it and the text following the input good day does not inherit the strong tag it looks normal font size and it is not interpreted by browser and this is what i want.
http://jsfiddle.net/UrGpC/3/ This is what i really want to be but does it work in all browsers ?
The browser does not treat the html tags which are inside the input value as the normal flow of html tags from my experiment or does it interpret them ?
You should try and see, it doesn't interpret it as an element, it get rendered as plain text, try loading jQuery and change it thru it:
$('#test').html("ok");
http://jsfiddle.net/nd87/UrGpC/
Next time you should Test it and explain what you have tried
Well you can try this:
<input type="text" value="<div>hello</div><strong>" />
PD: You forgot to close the value atributte :P
EDIT:
It's works for me, is so strange... Anyway if it doesn't work you can try & lt; and & gt; method.
<div>hello</div>
As Wesley Murch said. ;)
I tried to do this recently, but gave up. According to this: http://www.w3.org/TR/html4/interact/forms.html#adef-value-INPUT, input value is CDATA, which seems to mean basically only ordinary characters can be included. http://en.wikipedia.org/wiki/CDATA
is there any special input type in HTML that is designed to only display values, based on say, other input? When nobody is allowed to write into it. Or is a disabled text box the best option?
<input type="text" readonly />
The readonly attribute does your magic.
Nowadays its very easy to remove readonly attribute on browser. I suggested you to use label or span and write few lines of css codes for that label element to become look like input box.
<label>test value</label>
<style>
label {
padding:3px;
border:1px solid black;
width:200px;
}
</style>
use the readonly attribute, or use javascript to update the contents of a div
In HTML5 drafts, the output element exists for such purposes. I don’t think there’s much point in using it, though, since the same goal can be achieved in other ways.
In order to just display data, use any normal HTML element, like p or div or span.
If the data needs to be transmitted along the form data, put it into a hidden element, <input type=hidden>.
You can of course combine the two if needed: separately display the data and include it into the form data set.
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.