フォームヘルパー

<p><font><font>これは、ビューとテンプレートの両方で使用されるHTML5フォームを記述する強力なRuby APIを提供します。</font><font>それはと一緒に出荷されます:</font></font></p>

<ul>
<li><font><font>連結の必要なしに複雑なマークアップをサポート</font></font></li>
<li><font><font>HTML5タグを自動的に閉じる</font></font></li>
<li><font><font>ビューローカル変数のサポート</font></font></li>
<li><font><font>メソッドのオーバーライドをサポート(</font></font><code>PUT</code><font><font>/ </font></font><code>PATCH</code><font><font>/ </font></font><code>DELETE</code><font><font>HTTP動詞は、ブラウザによって理解されていません)</font></font></li>
<li><font><font>HTMLの自動生成は、入力属性:</font></font><code>id</code><font><font>、</font></font><code>name</code><font><font>、</font></font><code>value</code></li>
<li><font><font>自動HTML属性を無効にすることを許可する</font></font></li>
<li><font><font>リクエストパラメータおよび/または特定のエンティティから値を読み取り、自動入力する</font></font><code>value</code><font><font>属性を</font></font></li>
<li><font><font>ラジオボタンと選択入力の現在の値の自動選択</font></font></li>
<li><font><font>CSRFの保護</font></font></li>
<li><font><font>無限のネストされたフィールド</font></font></li>
<li><font><font>ORMアゴニスト</font></font></li>
</ul>

<h2 id=”technical-notes” class=”title”><a name=”technical-notes” class=”anchor” href=”#technical-notes”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>テクニカルノート</font></font></h2>

<p><font><font>この機能は、同じ目的を持つ他のRuby宝石と似た構文ですが、RailsやPadrinoと比べて使い方が異なります。</font></font></p>

<p><font><font>これらのフレームワークでは、次のような構文を使用できます。</font></font></p>
<pre class=”language-ruby erb”><code><span class=”cp”>&lt;%=</span> <span class=”n”>form_for</span> <span class=”ss”>:book</span> <span class=”k”>do</span> <span class=”o”>|</span><span class=”n”>f</span><span class=”o”>|</span> <span class=”cp”>%&gt;</span>
<span class=”nt”>&lt;div&gt;</span>
<span class=”cp”>&lt;%=</span> <span class=”n”>f</span><span class=”p”>.</span><span class=”nf”>text_field</span> <span class=”ss”>:title</span> <span class=”cp”>%&gt;</span>
<span class=”nt”>&lt;/div&gt;</span>
<span class=”cp”>&lt;%</span> <span class=”k”>end</span> <span class=”cp”>%&gt;</span>
</code></pre>

<p><font><font>上記のコード</font></font><strong><font><font>は有効なERBテンプレートではありません</font></font></strong><font><font>。</font><font>これを機能させるために、これらのフレームワークはカスタムのERBハンドラを使用し、他のテンプレートエンジンにサードパーティの宝石を使用しています。</font></font></p>

<h3 id=”template-engine-independent” class=”title”><a name=”template-engine-independent” class=”anchor” href=”#template-engine-independent”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>テンプレートエンジンに依存しない</font></font></h3>

<p><font><font>たくさんのテンプレートエンジンをサポートしているので、ERBが提供しているものを使いましょう。</font><font>つまり、Slim、HAML、ERBを使用し、同じRuby構文を維持できます。</font></font></p>

<h3 id=”one-output-block” class=”title”><a name=”one-output-block” class=”anchor” href=”#one-output-block”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>1つの出力ブロック</font></font></h3>

<p><font><font>上記の原理の技術的妥協案は、独自の出力ブロックでフォームビルダを使用することです。</font></font></p>
<pre class=”language-ruby erb”><code><span class=”cp”>&lt;%=</span>
<span class=”n”>form_for</span> <span class=”ss”>:book</span><span class=”p”>,</span> <span class=”n”>routes</span><span class=”p”>.</span><span class=”nf”>books_path</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:title</span><font></font>
<font></font>
<span class=”n”>submit</span> <span class=”s1″>’Create'</span>
<span class=”k”>end</span>
<span class=”cp”>%&gt;</span>
</code></pre>

<p><font><font>これにより</font></font></p>
<pre class=”language-ruby html”><code><span class=”nt”>&lt;form</span> <span class=”na”>action=</span><span class=”s”>”/books”</span> <span class=”na”>id=</span><span class=”s”>”book-form”</span> <span class=”na”>method=</span><span class=”s”>”POST”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”hidden”</span> <span class=”na”>name=</span><span class=”s”>”_csrf_token”</span> <span class=”na”>value=</span><span class=”s”>”0a800d6a8fc3c24e7eca319186beb287689a91c2a719f1cbb411f721cacd79d4″</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”text”</span> <span class=”na”>name=</span><span class=”s”>”book[title]”</span> <span class=”na”>id=</span><span class=”s”>”book-id”</span> <span class=”na”>value=</span><span class=”s”>””</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;button</span> <span class=”na”>type=</span><span class=”s”>”submit”</span><span class=”nt”>&gt;</span>Create<span class=”nt”>&lt;/button&gt;</span>
<span class=”nt”>&lt;/form&gt;</span>
</code></pre>

<h3 id=”method-in-views” class=”title”><a name=”method-in-views” class=”anchor” href=”#method-in-views”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>ビューのメソッド</font></font></h3>

<p><font><font>別の</font></font><strong><font><font>使い方</font></font></strong><font><font>は、ビュー内に具体的なメソッドを定義し、それをテンプレートで使用することです。</font></font></p>
<pre class=”language-ruby ruby”><code><span class=”k”>module</span> <span class=”nn”>Web::Views::Books</span>
<span class=”k”>class</span> <span class=”nc”>New</span>
<span class=”kp”>include</span> <span class=”no”>Web</span><span class=”o”>::</span><span class=”no”>View</span><font></font>
<font></font>
<span class=”k”>def</span> <span class=”nf”>form</span>
<span class=”n”>form_for</span> <span class=”ss”>:book</span><span class=”p”>,</span> <span class=”n”>routes</span><span class=”p”>.</span><span class=”nf”>books_path</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:title</span><font></font>
<font></font>
<span class=”n”>submit</span> <span class=”s1″>’Create'</span>
<span class=”k”>end</span>
<span class=”k”>end</span>
<span class=”k”>end</span>
<span class=”k”>end</span>
</code></pre>
<pre class=”language-ruby erb”><code><span class=”cp”>&lt;%=</span> <span class=”n”>form</span> <span class=”cp”>%&gt;</span>
</code></pre>

<h3 id=”supported-methods” class=”title”><a name=”supported-methods” class=”anchor” href=”#supported-methods”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>サポートされているメソッド</font></font></h3>

<ul>
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#check_box-instance_method”><font><font>check_box</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#color_field-instance_method”><font><font>color_field</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#datalist-instance_method”><font><font>データリスト</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#date_field-instance_method”><font><font>date_field</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#datetime_field-instance_method”><font><font>日時フィールド</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#datetime_local_field-instance_method”><font><font>日時</font></font><em><font><font>ローカル</font></font></em><font><font>フィールド</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#email_field-instance_method”><font><font>email_field</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#fields_for-instance_method”><font><font>fields_for</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#file_field-instance_method”><font><font>file_field</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper#form_for-instance_method”><font><font>form_for</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#hidden_field-instance_method”><font><font>hidden_field</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#label-instance_method”><font><font>ラベル</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#number_field-instance_method”><font><font>number_field</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#password_field-instance_method”><font><font>パスワードフィールド</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#radio_button-instance_method”><font><font>ラジオボタン</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#select-instance_method”><font><font>選択する</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#submit-instance_method”><font><font>提出する</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#text_area-instance_method”><font><font>テキストエリア</font></font></a></li&gt;
<li><a href=”http://www.rubydoc.info/gems/hanami-helpers/Hanami/Helpers/FormHelper/FormBuilder#text_field-instance_method”><font><font>テキストフィールド</font></font></a></li&gt;
</ul>

<h2 id=”examples” class=”title”><a name=”examples” class=”anchor” href=”#examples”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>例</font></font></h2>

<h3 id=”basic-usage” class=”title”><a name=”basic-usage” class=”anchor” href=”#basic-usage”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>基本的な使用法</font></font></h3>

<p><font><font>APIは本当にきれいで簡潔です</font><font>が、ブロックの戻り値(</font><font>)と前の行(</font><font>)の</font><font>間の連結</font></font><strong><font><font>は必要ありません</font></font></strong><font><font>。</font></font><code>submit</code><font></font><code>div</code><font></font></p>
<pre class=”language-ruby erb”><code><span class=”cp”>&lt;%=</span>
<span class=”n”>form_for</span> <span class=”ss”>:book</span><span class=”p”>,</span> <span class=”n”>routes</span><span class=”p”>.</span><span class=”nf”>books_path</span><span class=”p”>,</span> <span class=”ss”>class: </span><span class=”s1″>’form-horizontal'</span> <span class=”k”>do</span>
<span class=”n”>div</span> <span class=”k”>do</span>
<span class=”n”>label</span>      <span class=”ss”>:title</span>
<span class=”n”>text_field</span> <span class=”ss”>:title</span><span class=”p”>,</span> <span class=”ss”>class: </span><span class=”s1″>’form-control'</span>
<span class=”k”>end</span><font></font>
<font></font>
<span class=”n”>submit</span> <span class=”s1″>’Create'</span>
<span class=”k”>end</span>
<span class=”cp”>%&gt;</span>
</code></pre>
<pre class=”language-ruby html”><code><span class=”nt”>&lt;form</span> <span class=”na”>action=</span><span class=”s”>”/books”</span> <span class=”na”>id=</span><span class=”s”>”book-form”</span> <span class=”na”>method=</span><span class=”s”>”POST”</span> <span class=”na”>class=</span><span class=”s”>”form-horizontal”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”hidden”</span> <span class=”na”>name=</span><span class=”s”>”_csrf_token”</span> <span class=”na”>value=</span><span class=”s”>”1825a0a7ea92bbe3fd60cc8b6a0ea00ce3c52030afbf4037370d937bc5248acb”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;div&gt;</span>
<span class=”nt”>&lt;label</span> <span class=”na”>for=</span><span class=”s”>”book-title”</span><span class=”nt”>&gt;</span>Title<span class=”nt”>&lt;/label&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”text”</span> <span class=”na”>name=</span><span class=”s”>”book[title]”</span> <span class=”na”>id=</span><span class=”s”>”book-title”</span> <span class=”na”>value=</span><span class=”s”>””</span> <span class=”na”>class=</span><span class=”s”>”form-control”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;/div&gt;</span><font></font>
<font></font>
<span class=”nt”>&lt;button</span> <span class=”na”>type=</span><span class=”s”>”submit”</span><span class=”nt”>&gt;</span>Create<span class=”nt”>&lt;/button&gt;</span>
<span class=”nt”>&lt;/form&gt;</span>
</code></pre>

<h3 id=”method-override” class=”title”><a name=”method-override” class=”anchor” href=”#method-override”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>メソッドオーバーライド</font></font></h3>

<p><font><font>ブラウザは外のHTTPメソッド理解していない</font></font><code>GET</code><font><font>とします</font></font><code>POST</code><font><font>。</font><font>一方、花見は2つの動詞を超えてRESTの慣習を取り入れています。</font><font>メソッドviaを指定すると、</font><font>アプリケーションによって理解される</font></font><code>:method</code><font><font>特殊な隠しフィールドが追加</font></font><code>_method</code><font><font>されます。</font></font></p>
<pre class=”language-ruby erb”><code><span class=”cp”>&lt;%=</span>
<span class=”n”>form_for</span> <span class=”ss”>:book</span><span class=”p”>,</span> <span class=”n”>routes</span><span class=”p”>.</span><span class=”nf”>book_path</span><span class=”p”>(</span><span class=”n”>book</span><span class=”p”>.</span><span class=”nf”>id</span><span class=”p”>),</span> <span class=”ss”>method: :put</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:title</span><font></font>
<font></font>
<span class=”n”>submit</span> <span class=”s1″>’Update'</span>
<span class=”k”>end</span>
<span class=”cp”>%&gt;</span>
</code></pre>
<pre class=”language-ruby html”><code><span class=”nt”>&lt;form</span> <span class=”na”>action=</span><span class=”s”>”/books/23″</span> <span class=”na”>id=</span><span class=”s”>”book-form”</span> <span class=”na”>method=</span><span class=”s”>”POST”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”hidden”</span> <span class=”na”>name=</span><span class=”s”>”_method”</span> <span class=”na”>value=</span><span class=”s”>”PUT”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”hidden”</span> <span class=”na”>name=</span><span class=”s”>”_csrf_token”</span> <span class=”na”>value=</span><span class=”s”>”5f1029dd15981648a0882ec52028208410afeaeffbca8f88975ef199e2988ce7″</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”text”</span> <span class=”na”>name=</span><span class=”s”>”book[title]”</span> <span class=”na”>id=</span><span class=”s”>”book-title”</span> <span class=”na”>value=</span><span class=”s”>”Test Driven Development”</span><span class=”nt”>&gt;</span><font></font>
<font></font>
<span class=”nt”>&lt;button</span> <span class=”na”>type=</span><span class=”s”>”submit”</span><span class=”nt”>&gt;</span>Update<span class=”nt”>&lt;/button&gt;</span>
<span class=”nt”>&lt;/form&gt;</span>
</code></pre>

<h3 id=”csrf-protection” class=”title”><a name=”csrf-protection” class=”anchor” href=”#csrf-protection”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>CSRFの保護</font></font></h3>

<p><font><font>クロスサイトリクエスト偽造(CSRF)は、Web上で最も一般的な攻撃の1つです。</font><font>Hanamiは、</font></font><em><font><font>シンクロナイザトークンパターン</font></font></em><font><font>と呼ばれる技術に基づいたセキュリティメカニズムを提供してい</font><font>ます。</font></font></p>

<p><font><font>セッションを有効にすると、セッションを使用して、ユーザーごとにランダムなトークンを格納します。</font><font>フォームは、</font></font><code>_csrf_token</code><font><font>このトークンを含む</font><font>特殊な隠しフィールド(</font><font>)で</font><font>レンダリングされ</font><font>ます。</font></font></p>

<p><font><font>フォームの提出時に、Hanamiはこの入力をセッションの値と照合します。</font><font>一致した場合、要求は続行できます。</font><font>そうでなければ、セッションをリセットして例外を発生させます。</font></font></p>

<p><font><font>開発者は攻撃の処理をカスタマイズできます。</font></font></p>

<h3 id=”nested-fields” class=”title”><a name=”nested-fields” class=”anchor” href=”#nested-fields”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>ネストされたフィールド</font></font></h3>
<pre class=”language-ruby erb”><code><span class=”cp”>&lt;%=</span>
<span class=”n”>form_for</span> <span class=”ss”>:delivery</span><span class=”p”>,</span> <span class=”n”>routes</span><span class=”p”>.</span><span class=”nf”>deliveries_path</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:customer_name</span><font></font>
<font></font>
<span class=”n”>fields_for</span> <span class=”ss”>:address</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:city</span>
<span class=”k”>end</span><font></font>
<font></font>
<span class=”n”>submit</span> <span class=”s1″>’Create'</span>
<span class=”k”>end</span>
<span class=”cp”>%&gt;</span>
</code></pre>
<pre class=”language-ruby html”><code><span class=”nt”>&lt;form</span> <span class=”na”>action=</span><span class=”s”>”/deliveries”</span> <span class=”na”>id=</span><span class=”s”>”delivery-form”</span> <span class=”na”>method=</span><span class=”s”>”POST”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”hidden”</span> <span class=”na”>name=</span><span class=”s”>”_csrf_token”</span> <span class=”na”>value=</span><span class=”s”>”4800d585b3a802682ae92cb72eed1cdd2894da106fb4e9e25f8a262b862c52ce”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”text”</span> <span class=”na”>name=</span><span class=”s”>”delivery[customer_name]”</span> <span class=”na”>id=</span><span class=”s”>”delivery-customer-name”</span> <span class=”na”>value=</span><span class=”s”>””</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”text”</span> <span class=”na”>name=</span><span class=”s”>”delivery[address][city]”</span> <span class=”na”>id=</span><span class=”s”>”delivery-address-city”</span> <span class=”na”>value=</span><span class=”s”>””</span><span class=”nt”>&gt;</span><font></font>
<font></font>
<span class=”nt”>&lt;button</span> <span class=”na”>type=</span><span class=”s”>”submit”</span><span class=”nt”>&gt;</span>Create<span class=”nt”>&lt;/button&gt;</span>
<span class=”nt”>&lt;/form&gt;</span>
</code></pre>

<h2 id=”automatic-values” class=”title”><a name=”automatic-values” class=”anchor” href=”#automatic-values”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>自動値</font></font></h2>

<p><font><font>フォームフィールドは</font></font><strong><font><font>自動的に正しい値で埋められ</font></font></strong><font><font>ます。</font><font>Hanamiは、フォームコンストラクタと現在のリクエストのparamsに渡された明示的な値を探します。</font><font>これは、フォーム階層(ネストされたフィールドを含む)をこれら2つのソースと比較します。</font><font>一致するたびに、関連付けられた値が入力されます。</font></font></p>

<h4 id=”example” class=”title”><a name=”example” class=”anchor” href=”#example”>      <svg aria-hidden=”true” class=”octicon octicon-link” height=”16″ version=”1.1″ viewBox=”0 0 16 16″ width=”16″>
<path d=”M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z”></path>
</svg>
</a><font><font>例</font></font></h4>

<p><font><font>私たちがデータを更新したいと想像してください</font></font><code>delivery</code><font><font>。</font><font>我々は2つのオブジェクトを持っています:</font></font><code>delivery</code><font><font>と</font></font><code>customer</code><font><font>は、単純なオブジェクトです(ORMは関係ありません)。</font><font>彼らは以下の方法に応答します:</font></font></p>
<pre class=”language-ruby ruby”><code><span class=”n”>delivery</span><span class=”p”>.</span><span class=”nf”>id</span>   <span class=”c1″># =&gt; 1</span>
<span class=”n”>delivery</span><span class=”p”>.</span><span class=”nf”>code</span> <span class=”c1″># =&gt; 123</span><font></font>
<font></font>
<span class=”n”>customer</span><span class=”p”>.</span><span class=”nf”>name</span> <span class=”c1″># =&gt; “Luca”</span><font></font>
<font></font>
<span class=”n”>customer</span><span class=”p”>.</span><span class=”nf”>address</span><span class=”p”>.</span><span class=”nf”>class</span> <span class=”c1″># =&gt; Address</span>
<span class=”n”>customer</span><span class=”p”>.</span><span class=”nf”>address</span><span class=”p”>.</span><span class=”nf”>city</span>  <span class=”c1″># =&gt; “Rome”</span>
</code></pre>

<p><font><font>フォームを作ってみましょう。</font></font></p>
<pre class=”language-ruby erb”><code><span class=”cp”>&lt;%=</span>
<span class=”n”>form_for</span> <span class=”ss”>:delivery</span><span class=”p”>,</span> <span class=”n”>routes</span><span class=”p”>.</span><span class=”nf”>delivery_path</span><span class=”p”>(</span><span class=”ss”>id: </span><span class=”n”>delivery</span><span class=”p”>.</span><span class=”nf”>id</span><span class=”p”>),</span> <span class=”ss”>method: :patch</span><span class=”p”>,</span> <span class=”ss”>values: </span><span class=”p”>{</span><span class=”ss”>delivery: </span><span class=”n”>delivery</span><span class=”p”>,</span> <span class=”ss”>customer: </span><span class=”n”>customer</span><span class=”p”>}</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:code</span><font></font>
<font></font>
<span class=”n”>fields_for</span> <span class=”ss”>:customer</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:name</span><font></font>
<font></font>
<span class=”n”>fields_for</span> <span class=”ss”>:address</span> <span class=”k”>do</span>
<span class=”n”>text_field</span> <span class=”ss”>:city</span>
<span class=”k”>end</span>
<span class=”k”>end</span><font></font>
<font></font>
<span class=”n”>submit</span> <span class=”s1″>’Update'</span>
<span class=”k”>end</span>
<span class=”cp”>%&gt;</span>
</code></pre>
<pre class=”language-ruby html”><code><span class=”nt”>&lt;form</span> <span class=”na”>action=</span><span class=”s”>”/deliveries/1″</span> <span class=”na”>id=</span><span class=”s”>”delivery-form”</span> <span class=”na”>method=</span><span class=”s”>”POST”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”hidden”</span> <span class=”na”>name=</span><span class=”s”>”_method”</span> <span class=”na”>value=</span><span class=”s”>”PATCH”</span><span class=”nt”>&gt;</span>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”hidden”</span> <span class=”na”>name=</span><span class=”s”>”_csrf_token”</span> <span class=”na”>value=</span><span class=”s”>”4800d585b3a802682ae92cb72eed1cdd2894da106fb4e9e25f8a262b862c52ce”</span><span class=”nt”>&gt;</span><font></font>
<font></font>
<span class=”nt”>&lt;input</span> <span class=”na”>type=</span><span class=”s”>”text”</span> <span class=”na”>name=</span><span class=”s”>”delivery"</span> <span class="na">id=</span><span class="s">"delivery-code"</span> <span class="na">value=</span><span class="s">"123"</span><span class="nt">&gt;</span><font></font>
<font></font>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"delivery[customer][name]"</span> <span class="na">id=</span><span class="s">"delivery-customer-name"</span> <span class="na">value=</span><span class="s">"Luca"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"delivery[customer][address][city]"</span> <span class="na">id=</span><span class="s">"delivery-customer-address-city"</span> <span class="na">value=</span><span class="s">"Rome"</span><span class="nt">&gt;</span><font></font>
<font></font>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Update<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</code></pre>

<p><font></font><code>:values</code><font><font>私たちに渡すオプションに</font><font>注意してください</font></font><code>#form_for</code><font><font>。</font><font>これ</font></font><code>name</code><font><font>は、フォームにある属性を、値を埋めるために使用するオブジェクトに</font><font>マップし</font><font>ます。</font><font>例えば</font></font><code>delivery</code><font><font>、</font></font><code>delivery.code</code><font><font>(</font></font><code>123</code><font><font>)、</font></font><code>delivery[customer][address][city]</code><font><font>to </font></font><code>customer.address.city</code><font><font>(</font></font><code>"Rome"</code><font><font>)などに対応します。</font></font></p>

<h3 id="read-values-from-params" class="title"><a name="read-values-from-params" class="anchor" href="#read-values-from-params">      <svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path d="M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z"></path>
</svg>
</a><font><font>Paramsから値を読み取る</font></font></h3>

<p><strong><font><font>パラメータが自動的に渡され、ヘルパーを形成し</font></font></strong><font><font>、値を読み込み、フィールドを自動入力しようとします。</font><font>値がparamsと明示的な値(</font></font><code>:values</code><font><font>)の</font><font>両方に存在する</font><font>場合、最初の</font><font>値</font><font>は優先順位をとります。</font><font>理由は簡単です:paramsは失敗したフォーム提出の試行を表すことがあります。</font></font></p>

<h4 id="example" class="title"><a name="example" class="anchor" href="#example">      <svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path d="M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z"></path>
</svg>
</a><font><font>例</font></font></h4>

<p><font><font>上記のフォームを想像し、ユーザーが</font></font><code>"foo"</code><font><font>配送コードとして</font><font>入力</font><font>する</font><font>ことをお奨めし</font><font>ます。</font><font>この値はモデルドメインルールでは受け入れられないため、フォームを再度レンダリングして検証エラーを表示します。</font><font>私たちのパラメータは現在、ユーザーが入力した値を保持しています。</font><font>たとえば:を</font></font><code>params.get('delivery.code')</code><font><font>返します</font></font><code>"foo"</code><font><font>。</font></font></p>

<p><font><font>フォームの表示方法は次のとおりです。</font></font></p>
<pre class="language-ruby html"><code><span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">"/deliveries/1"</span> <span class="na">id=</span><span class="s">"delivery-form"</span> <span class="na">method=</span><span class="s">"POST"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"_method"</span> <span class="na">value=</span><span class="s">"PATCH"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"_csrf_token"</span> <span class="na">value=</span><span class="s">"4800d585b3a802682ae92cb72eed1cdd2894da106fb4e9e25f8a262b862c52ce"</span><span class="nt">&gt;</span><font></font>
<font></font>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"delivery"</span> <span class="na">id=</span><span class="s">"delivery-code"</span> <span class="na">value=</span><span class="s">"foo"</span><span class="nt">&gt;</span><font></font>
<font></font>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"delivery[customer][name]"</span> <span class="na">id=</span><span class="s">"delivery-customer-name"</span> <span class="na">value=</span><span class="s">"Luca"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"delivery[customer][address][city]"</span> <span class="na">id=</span><span class="s">"delivery-customer-address-city"</span> <span class="na">value=</span><span class="s">"Rome"</span><span class="nt">&gt;</span><font></font>
<font></font>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Update<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</code></pre>