サーチ…


前書き

Railsは、フォームマークアップを生成するためのビューヘルパーを提供します。

備考

  • datedatetimedatetime-localtimemonthweekなどの日付入力タイプは、FireFoxでは機能しません。
  • input<type="telephone">はSafari 8でのみ動作します。
  • input<type="email">がSafariで動作しません

フォームを作成する

form_tagヘルパーを使用してフォームを作成できます

<%= form_tag do %>
  Form contents
<% end %>

これにより、次のHTMLが作成されます。

<form accept-charset="UTF-8" action="/" method="post">
  <input name="utf8" type="hidden" value="&#x2713;" />
  <input name="authenticity_token" type="hidden" value="J7CBxfHalt49OSHp27hblqK20c9PgwJ108nDHX/8Cts=" />
  Form contents
</form>

このフォームタグは、 hidden入力フィールドを作成しました。これは、フォームがフォームなしで正常に送信できないため必要です。

authenticity_tokenという名前の2番目の入力フィールドは、 cross-site request forgeryに対して保護を追加します。

検索フォームの作成

検索フォームを作成するには、次のコードを入力します

<%= form_tag("/search", method: "get") do %>
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q) %>
  <%= submit_tag("Search") %>
<% end %>
  • form_tag :フォームを作成するためのデフォルトのヘルパーです。最初のパラメータ、 /searchはアクション、2番目のパラメータはHTTPメソッドを指定します。検索フォームの場合、常にgetメソッドを使用することが重要get
  • label_tag :このヘルパーはhtml <label>タグを作成します。
  • text_field_tag :これは、 textタイプの入力要素を作成しtext
  • submit_tag :これは、 submit型のinput要素を作成します。

フォーム要素のヘルパー

チェックボックス

<%= check_box_tag(:pet_dog) %>
<%= label_tag(:pet_dog, "I own a dog") %>
<%= check_box_tag(:pet_cat) %>
<%= label_tag(:pet_cat, "I own a cat") %>

これは次のHTMLを生成します

<input id="pet_dog" name="pet_dog" type="checkbox" value="1" />
<label for="pet_dog">I own a dog</label>
<input id="pet_cat" name="pet_cat" type="checkbox" value="1" />
<label for="pet_cat">I own a cat</label>

ラジオボタン

<%= radio_button_tag(:age, "child") %>
<%= label_tag(:age_child, "I am younger than 18") %>
<%= radio_button_tag(:age, "adult") %>
<%= label_tag(:age_adult, "I'm over 18") %>

これにより、次のHTMLが生成されます。

<input id="age_child" name="age" type="radio" value="child" />
<label for="age_child">I am younger than 18</label>
<input id="age_adult" name="age" type="radio" value="adult" />
<label for="age_adult">I'm over 18</label>

テキスト領域

大きなテキストボックスを作成するには、 text_area_tagを使用することをお勧めします

<%= text_area_tag(:message, "This is a longer text field", size: "25x6") %>

これにより、次のHTMLが作成されます

<textarea id="message" name="message" cols="25" rows="6">This is a longer text field</textarea>

番号フィールド

これはinput<type="number">要素を作成しinput<type="number">

<%= number_field :product, :rating %>

値の範囲を指定するには、 in:オプションを使用できます

<%= number_field :product, :rating, in: 1..10 %>

パスワードフィールド

場合によっては、ユーザーが入力した文字をマスクする必要があります。これにより、 <input type="password">

<%= password_field_tag(:password) %>

メールフィールド

これにより、 <input type="email">

<%= email_field(:user, :email) %>

電話フィールド

これにより、 <input type="tel">が作成されます。

<%= telephone_field :user, :phone %>

日付ヘルパー

  • input[type="date"]

    <%= date_field(:user, :reservation) %>
    
  • input[type="week"]

     <%= week_field(:user, :reservation) %>
    
  • input[type="year"]

     <%= year_field(:user, :reservation) %>
    
  • input[type="time"]

     <%= time_field(:user, :check_in) %>
    

落ちる

標準的な例:@models = Model.all select_tag "models"、options_from_collection_for_select(@models、 "id"、 "name")、{}

これは次のHTMLを生成します:David

最後の引数はoptionsで、{multiple:false、disabled:false、include_blank:false、prompt:false}を受け付けます。

より多くの例が見つかります: http : //apidock.com/rails/ActionView/Helpers/FormTagHelper/select_tag



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow