html/Thymeleaf - 無線電輸入的實現

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> 

「金額」欄免受虛假輸入應用程序本身，因爲它僅允許整數1-10，否則用戶得到一個通知，要求爲數字輸入。

無線電輸入您可以在其中3種尺寸之間選擇具有2個問題：

1）的按鈕themselfes之間的arent，它們彼此相鄰。 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

它得到的錯誤，這種「檢查」的表達是不允許的，「標籤 沒有關閉」和諸如此類的東西。

Thymeleaf死亡不允許屬性最小化。這意味着你需要爲每個屬性提供一個值。你只需要使用checked="checked"而不是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>

這其實是不對的：

「金額」欄免受虛假輸入 應用程序本身，因爲它僅允許整數1-10，否則用戶獲取要求輸入數字的 通知。

您只在客戶端進行驗證。如果您希望在提交表單之前向用戶提供反饋，但客戶端驗證無誤，但不足以保護自己免遭錯誤輸入。

彌敦道長時間解釋爲什麼客戶端驗證是不夠的相當不錯（JavaScript: client-side vs. server-side validation）：

這是非常危險的信任你的UI。他們不僅可以濫用你的UI，但他們可能根本沒有使用你的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"; 
} 

但是默認值經常不有意義的輸入[類型=「文本」。如果你想爲prodive你可以只使用任意輸入一個佔位符的HTML屬性placeholder="the placeholder"：

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