0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

###フォーム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ではフォームの入力する部分などの外観を作る。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?