html/Thymeleaf - Implementation of radio input

Question

I am working on this little project with an online order service for pizzas. (using Spring Web MVC, Thymeleaf, ...)

Yesterday, someone helped me out adding inputs for selecting an specific amount and size.

 <div>
    <form th:action="@{/saveOrderAndReload(name=${pizza.name})}" method="post">
        <div class="input-group">
            <span class="input-group-addon">Bestellmenge (min. 1, max. 10):</span>
            <input type="number" name="amount" class="form-control" min="1" max="10" placeholder="1"/>
        </div>
        <div class="input-group">
        <input type="radio" name="size" value="1"> Klein</input>
        <input type="radio" name="size" value="2"> Mittel</input>
        <input type="radio" name="size" value="3"> Gross</input>
</div>
<div class="form-group">
    <div class="form-group">
        <input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
    </div>
</div>
   </form>

The "amount" field protects the application itself from false input because it only allows integers from 1-10, otherwise the User gets a notification asking for an numeric input.

The radio input where you can select between 3 sizes has 2 problems:

1) The buttons arent among themselfes, they are next to each other. 2) I dont know how to prevent the user from doing no input.

I looked around for quite some time finding the standart html version for this:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form> 

And something like this:

<ul>
  <li th:each="ty : ${allTypes}">
    <input type="radio" th:field="*{type}" th:value="${ty}" />
    <label th:for="${#ids.prev('type')}" th:text="#{${'seedstarter.type.' + ty}}">Wireframe</label>
  </li>
</ul>

We didnt learn anything about the second one so I decided to use the standart html. But I does not want to work like that example: It gets errors that this "checked" expression is not allowed, "
tag is not closed" and whatnot.

So my questions are: 1) What can I do to make the input look better? 2) How can I set like a placeholder or standart value so the application always gets this input and does not crash?

As you might have realized I am a complete beginner with this type of stuff so be lenient ;)

Answer 1

Answer 1

If you want the change the way the radio buttons are looking, this might help: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/.

Some notes and Answer 2

It gets errors that this "checked" expression is not allowed, " tag is not closed" and whatnot.

Thymeleaf dies not allow attribute minimization. That means that you need to provide a value for each attribute. You just have to use checked="checked" instead of checked.

<form method="post">
  <!-- Make sure to always set a value for attributes when using thymeleaf (use checked="checked" instead of checked) -->
  <div><input type="radio" name="gender" value="male" checked="checked" />Male</div>
  <div><input type="radio" name="gender" value="female" />Female</div>
  <div><input type="radio" name="gender" value="other" />Other</div>
</form>

This is actually wrong:

The "amount" field protects the application itself from false input because it only allows integers from 1-10, otherwise the User gets a notification asking for an numeric input.

You are only validating on the client side. Clientside validation is okay if you want to give your users feedback even before they submit your form but it is not enough to protect yourself from bad input.

Nathan Long does explain why client side validation is not enough pretty well (JavaScript: client-side vs. server-side validation):

It is very dangerous to trust your UI. Not only can they abuse your UI, but they may not be using your UI at all, or even a browser. What if the user manually edits the URL, or runs their own Javascript, or tweaks their HTTP requests with another tool? What if they send custom HTTP requests from curl or from a script, for example?

As you are using spring-mvc you should take adventage of it and take a look at the following tutorial: https://spring.io/guides/gs/validating-form-input/.

To provide default values when working with spring-mvc you can just give the field a value:

public class PersonForm {
    // this field will have a default value (foo)
    // NotNull will ensure that a value is set for this field when validated by spring (however it can be an empty string... take a look at hibernates @NotBlank annotation if you want to prevent empty string or use a regex)
    @NotNull
    private String gender = "foo";
}

However default values often dont make sense for input[type="text"]. If you want to prodive a placeholder for any input you could just use the html attribute placeholder="the placeholder":

<input type="text" name="name" value="" placeholder="Enter your name" />