I know you can show unescaped text by using utext as described here: http://www.thymeleaf.org/doc/usingthymeleaf.html#unescaped-text
But if I want to display unescaped value of a form input, using data-th-value="${model.value}", there is no equivalent data-th-uvalue.
I wonder if there is a way to do this in thymeleaf? If not, what is the best workaround for this?
I had your same doubt, this is what I did to achieve that
<input type="hidden" id="responseObj" th:value="${#strings.unescapeJava(responseObj)}" />
it was the only way I found.
I hope it was what you asked about.
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 want to know if there is a way to change HTML input type="date" element from this:
to something like:
mm.dd.yyyy
So I want to know how to change the separator.
Is there a way to do this or should I use some custom date component ?
Try this.
<input id="date" type="date" value="2017-06-01">
Note that its also depends on browser potentional website user is using. :)
You need pattern attrib in your input to match your desired format however not all browsers support that. Workaround is to use input="text" instead and then use your custom code.
As per MDN:
One way around this is to put a pattern attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
pattern: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern
I have error messages in anchor tag. When you click on it, it should focus/take the cursor to the respective form field. It works in IE but does not work in FF or Chrome. Am I doing something wrong here?
I have a sample in jsfiddle. http://jsfiddle.net/JaaTK/
I don't want to use JavaScript to achieve this.
EDIT I will have to go JS route as there doesn't seem to be a better way.
If you don't want use javascript - you have to use “label” tag instead “anchor”, i.e. instead of:
Go to the first name
you can use:
<label for="firstName">Go to the first name</label>
Why not
Go to first name
I think is the only way.
"I don't want to use JavaScript to achieve this."
Then you are out of luck. Applying focus to an element is JavaScript's job.
UPDATE
So, based on your comment, I think you are asking the wrong question. I think you want to ask:
"Is there a way to make my error messages more accessible?"
The best way to handle that would be for your error messages to link to the form field's LABEL rather than apply auto-focus to the field. At least, that'd be the best way to handle things sans JavaScript.
Error Message
<label for="field1" id="fieldlabel1">Label</label><input id="field1" />
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;
}
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.