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つの問題がありますボタンがthemselfes間アレント

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>

を

私たちは第2のものについて何も学んでいないので、standart 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から整数を可能にするので、「金額」欄には偽の入力 からアプリケーション自体を保護します数値入力を求める 通知を受け取ります。

クライアント側でのみ検証しています。あなたのフォームを提出する前にユーザーにフィードバックを与えたいが、悪い入力から身を守るだけでは十分ではない場合、Clientsideの検証は大丈夫です。

あなたのUIを信頼することは非常に危険である：

ネイサン・ロングは、クライアント側の検証はかなりよく（JavaScript: client-side vs. server-side validation）は十分ではない理由を説明しません。彼らはあなたの UIを悪用するだけでなく、UIをまったく使用していない可能性もあります。 ユーザーが手動でURLを編集したり、独自のJavascriptを実行したり、 がHTTPリクエストを別のツールで調整するとどうなりますか？たとえば、curlやスクリプトからカスタムの HTTPリクエストを送信した場合はどうなりますか？

spring-mvcを使用しているので、冒険をして、次のチュートリアルをご覧ください。https://spring.io/guides/gs/validating-form-input/

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

ただし、デフォルト値は、多くの場合、入力[タイプ=「テキスト」]のために理にかなっていけない：春-MVCで作業するとき、あなただけのフィールドに値を与えることができ、デフォルト値を提供するために、

。あなたはあなただけのHTML属性placeholder="the placeholder"使用することができ、任意の入力用のプレースホルダprodiveする場合：私は、私は短いフォームを使用傾けることを知らなかった

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