###フォームHTML
下のコードを定義したフォームを理解するために、小さなコードに分けて考えてみましょう。
まずは、埋め込みRubyが使われているform_with
からendまでの外側の構造を読み解いていきます。
<% 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>
<%= 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構造に注目してみましょう。
<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構造を見比べてみる。
<%= f.label :name %>
<%= f.text_field :name %>
上の埋め込みrubyで下のhtmlを生成している。
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" type="text" />
下も同様にhtmlを生成している。
<%= f.label :email %>
<%= f.email_field :email %>
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" type="email" />
<%= f.label :password %>
<%= f.password_field :password %>
<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属性
。
<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メソッドを使ってフォームを構築すべきだと判断
します。
<form action="/users" class="new_user" id="new_user" method="post">
このとき、上のclassとid属性はアーキテクチャとしては基本的に無関係
です。
ここで重要な属性は、action="/users"
とmethod="post"
の2つだけです。
この2つの属性では、/users に対してHTTPのPOSTリクエスト送信する
、といった指示をしています
<input name="authenticity_token" type="hidden"
value="NNb6+J/j46LcrgYUC60wQ2titMuJQ5lLqyAbnbAUkdo=" />
このコードはブラウザ上では何も表示しませんが、Railsの内部で使われる特別なコードです。
したがって、どういった意図で生成されたのかは、現時点ではまだ理解しなくても大丈夫
###演習
1.『HTML編』ではHTMLをすべて手動で書き起こしていますが、なぜformタグを使わなかったのでしょうか? 理由を考えてみてください
理由はわからないが調べてみると
フォームとは、ユーザーが入力した情報をサーバーに送信するためのページ
フォームでは、サーバーとのやり取りが必要
HTMLではフォームの入力する部分などの外観を作る。