Question

我正在为这个小项目工作，为比萨提供在线订购服务。（使用Spring Web MVC，Thymeleaf，...）

昨天，有人帮助我添加了用于选择特定数量和大小的输入。

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

“amount”字段保护应用程序本身免受错误输入，因为它只允许1-10的整数，否则用户会收到要求输入数字的通知。

您可以在3种尺寸之间进行选择的收音机输入有2个问题：

1）按钮不属于他们自己，它们彼此相邻。 2）我不知道如何阻止用户不做任何输入。

我环顾了一段时间，为此找到了标准的html版本：

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

这样的事情：

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

我们没有了解第二个，所以我决定使用标准的html。但是我不想像那个例子那样工作：它得到错误，不允许这个“检查”表达，“
标签没有关闭”等等。

所以我的问题是： 1）我可以做些什么来使输入看起来更好？ 2）我如何设置占位符或标准值，以便应用程序始终获得此输入并且不会崩溃？

你可能已经意识到我是这类东西的完全初学者所以要宽容;）

Answer 1

回答1

如果您希望按照单选按钮的方式进行更改，这可能有所帮助：http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/。

一些注释和答案2

这会错误地检查＆＃34;＆＃34;表达是不允许的，＆＃34;标签是没关闭＆＃34;还有什么。

Thymeleaf死亡不允许属性最小化。这意味着您需要为每个属性提供一个值。您只需使用checked="checked"代替checked。

＆＃13;

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

＆＃13;

这实际上是错误的：

＆＃34;金额＆＃34;字段保护应用程序本身免受错误输入因为它只允许1-10的整数，否则用户得到一个要求输入数字的通知。

您只在客户端进行验证。如果您想在提交表单之前向用户提供反馈，那么客户端验证是可以的，但这不足以保护自己免受不良输入的影响。

Nathan Long确实解释了为什么客户端验证不够好（JavaScript: client-side vs. server-side validation）：

信任您的UI非常危险。他们不仅可以滥用你的用户界面，但他们可能根本不使用您的用户界面，甚至浏览器。什么如果用户手动编辑URL，或运行自己的Javascript，或者用另一个工具调整他们的HTTP请求？如果他们发送自定义怎么办来自curl或脚本的HTTP请求，例如？

当您使用spring-mvc时，您应该尝试使用它，并查看以下教程：https://spring.io/guides/gs/validating-form-input/。

要在使用spring-mvc时提供默认值，您只需为该字段指定一个值：

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";
}

但是默认值通常对输入没有意义[type =＆＃34; text＆＃34;]。如果您想为任何输入生成一个占位符，您只需使用html属性placeholder="the placeholder"：

＆＃13;

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

＆＃13;

html / Thymeleaf - 无线电输入的实现

1 个答案: