Thymeleaf Input Form Binding

Question

i have a form that binded to my class and everything works fine.

<form th:action="@{/createPost}" th:object="${newPost}" method="post" class="form-signin">

        <input type="text" th:field="*{topic}" class="new-post-topic-input" placeholder="post topic"
               autofocus="true"/>
</form>

I want to change my input css to a different style, but type='text' overwrites everything. But if i change input type to anything else, it doesn't bind values. Can i make thymeleaf see other input types to bind them?

UPDATE

i have bootstrap css file that contains css style for

But i want to have my own style for this input without deleting bootstrap css from page. But if i add class='anyClass' to this input, css from bootstrap from type='text' overwrites everything. And if i change type from text to anything else, thymeleaf doesn't map values anymore.

upd2 MY QUESTION IS NOT ABOUT CSS OVERRRIDING.

My question is about thymeleaf data object binding. I have th:object="${newPost}" in the form tag. Thymeleaf sees it and when i submit my form, it binds every , to fields of this object.

BUT if i change from type='text' to type='ANYTHING ELSE'> thymeleaf doesn't map anything. How can i make thymeleaf bind other tags like etc. To my object?

Answer 1

The documentation clearly says it is possible to bind to other types:

Note that th:field also understands the new types of <input> element introduced by HTML5 like <input type="datetime" ... />, <input type="color" ... />, etc., effectively adding complete HTML5 support to Spring MVC.

The documentation also provides an example:

<div>
  <label th:for="${#ids.next('covered')}" th:text="#{seedstarter.covered}">Covered</label>
  <input type="checkbox" th:field="*{covered}" />
</div>

The field covered has to be of type boolean then of course. Please make sure the type of your input element matches the type of your field.