railsチュートリアル第七章 フォームHTML

###フォームHTML
下のコードを定義したフォームを理解するために、小さなコードに分けて考えてみましょう。
まずは、埋め込みRubyが使われている```form_with```からendまでの外側の構造を読み解いていきます。

```html
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_with(model: @user, local: true) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.label :email %>
      <%= f.email_field :email %>

      <%= f.label :password %>
      <%= f.password_field :password %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>
```

```html
<%= form_with(model: @user, local: true) do |f| %>
  .
  .
  .
<% end %>
```
doキーワードは、```form_with```が1つの変数を持つブロックを取ることを表します。
この変数fは “form” のfです。
ここでハッシュ引数```local: true```が存在していることにご注目ください。
```form_with```はデフォルトで“remote” XHR requestを送信しますが、ここでは````エラーメッセージをほぼ確実に表示する```ために通常の```“local”```フォームリクエストを送信したいのです

通常、Railsヘルパーを使っている場合、実装の詳細について知っておく必要はありません。
ただし```fというオブジェクトが何をするのかは知っておく必要```があります。
このfオブジェクトは、HTMLフォーム要素（テキストフィールド、ラジオボタン、パスワードフィールドなど）に対応するメソッドが呼び出されると、```@userの属性を設定するための特別に設計されたHTML```を返します。

```
<%= f.label :name %>
<%= f.text_field :name %>
```
Userモデルのname属性を設定する、``` ラベル付きテキストフィールド要素を作成するのに必要なHTML```を作成します。

生成されたフォームのHTMLを見たい場合は、ブラウザ上で表示画面を右クリックし、出てきたポップアップ項目の中から［ソースを表示］といった項目をクリックしてください。WebページのHTMLソースはリスト 7.17のようになります。HTMLソースの中の、フォームを形成するHTML構造に注目してみましょう。

```html
 <form action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="6mlCGJK7ZPKIQgxG3VYY9hHZGTyGW6TKQfNZ/sXVrJBPyXNLOS91PaBa+587/Ax9UySiqXF3QIPnyZfhHqbaDA==" />
      <label for="user_name">Name</label>
      <input type="text" name="user[name]" id="user_name" />
      <!--名前-->

      <label for="user_email">Email</label>
      <input type="email" name="user[email]" id="user_email" />
      <!--email-->

      <label for="user_password">Password</label>
      <input type="password" name="user[password]" id="user_password" />
      <!--パスワード-->

      <label for="user_password_confirmation">Confirmation</label>
      <input type="password" name="user[password_confirmation]" id="user_password_confirmation" />
      <!---->

      <input type="submit" name="commit" value="Create my account" class="btn btn-primary" data-disable-with="Create my account" />
</form>
```
埋め込みrubyとフォームを形成するhtml構造を見比べてみる。
```html
<%= f.label :name %>
<%= f.text_field :name %>
```
上の埋め込みrubyで下のhtmlを生成している。

```html
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" type="text" />
```
下も同様にhtmlを生成している。

```html
<%= f.label :email %>
<%= f.email_field :email %>
```

```html
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" type="email" />
```

```html
<%= f.label :password %>
<%= f.password_field :password %>
```

```html
<label for="user_password">Password</label>
<input id="user_password" name="user[password]" type="password" />
```


テキストフィールド（type="text"とtype="email"）では内容をそのまま表示していますが、パスワードフィールド（type="password"）ではセキュリティ上の目的のために文字が隠蔽されています。
（emailフィールドとtextフィールドは同じように見えますが、細かな点が違います。例えばtype="email"となっている場合、モバイル端末から入力フォームをタップすると、メールアドレスに最適化された特別なキーボードが表示されるようになります。）

ユーザーの作成で重要なのは```inputごとにある特殊なname属性 ```。

```html
<input id="user_name" name="user[name]" - - - />
.
.
.
<input id="user_password" name="user[password]" - - - />
```
Railsはnameの値を使って、```初期化したハッシュ```を（params変数経由で）構成。
このハッシュは、入力された値に基づいてユーザーを作成するときに使われます。

次に重要な要素は、formタグ自身です。
Railsは```formタグを作成するとき ```に@userオブジェクトを使います。
```すべてのRubyオブジェクトは自分のクラスを知っている```ので、Railsは@userのクラスがUserであることを認識します。
また、@userは新しいユーザーなので、 Railsは```postメソッドを使ってフォームを構築すべきだと判断```します。

```HTML
<form action="/users" class="new_user" id="new_user" method="post">
````
このとき、上の```classとid属性はアーキテクチャとしては基本的に無関係```です。
ここで重要な属性は、```action="/users"```と```method="post"```の２つだけです。
この2つの属性では、```/users に対してHTTPのPOSTリクエスト送信する```、といった指示をしています

```HTML
<input name="authenticity_token" type="hidden"
       value="NNb6+J/j46LcrgYUC60wQ2titMuJQ5lLqyAbnbAUkdo=" />
```
このコードはブラウザ上では何も表示しませんが、Railsの内部で使われる特別なコードです。
したがって、どういった意図で生成されたのかは、現時点ではまだ理解しなくても大丈夫

###演習
1.『HTML編』ではHTMLをすべて手動で書き起こしていますが、なぜformタグを使わなかったのでしょうか? 理由を考えてみてください
理由はわからないが調べてみると

フォームとは、ユーザーが入力した情報をサーバーに送信するためのページ
フォームでは、サーバーとのやり取りが必要
HTMLではフォームの入力する部分などの外観を作る。