跳轉至內容

Ruby on Rails/ActionView/表單

來自 Wikibooks,開放世界中的開放書籍

表單是每個網站的重要組成部分。我們使用它們來聯絡網站所有者,提供登入憑據或提交資料。Rails 對錶單有廣泛的支援,並且內建了許多標籤來幫助您快速輕鬆地建立表單。

您可以獲得的最基本的表單是用於輸入姓名的簡單輸入欄位

<%= form_tag do %>
  <%= label_tag(:my_name, "My name is:") %>
  <%= text_field_tag(:my_name) %>
  <%= submit_tag("Process") %>
<% end %>

這將建立一個非常基本的表單,例如

<form action="/products/test/1" method="post">
 <div style="margin:0;padding:0">
 <input name="authenticity_token" type="hidden" value="KBBEVzSZOkCi/s9LKhYvW/gdwyZzwH2n39py5FggaT4=" />
 </div>

 <label for="my_name">My name is:</label>
 <input id="my_name" name="my_name" type="text" />
 <input name="commit" type="submit" value="Process" />
</form>

這是透過建立一個名為的簡單操作實現的test.html.erb在我們的產品檢視中,

def test
  #nothing here yet
end

在控制器中添加了一個空操作。頁面在瀏覽器中被呼叫https://:3000/products/test/1。因為我們沒有更改路由,所以我們必須提供產品的 ID。此外,Rails 建立了一個“authenticity_token”來為我們的表單提供安全功能。您還會注意到我們的輸入有一個 ID。Rails 為您提供的每個表單元素提供了 ID 和名稱。當然,可以透過提供適當的選項來更改此設定。

以下列表應該讓您概述一些表單標籤。由於大多數標籤的工作方式類似,因此應該很容易弄清楚其中有多少標籤的工作原理。此外,請務必檢視官方 API

單選框

要建立單選框,只需使用

<%= radio_button_tag :category, "books", true %>

以上將建立

<input id="category_books" name="category" type="radio" value="books" />

如果要更改 ID,可以將自己的 ID 傳遞給標籤(:id => "someid")。要預選一個專案,助手接收的第三個選項應該是一個布林值。

提交按鈕

<%= submit_tag ("Save products", :class => "button") %>

將建立一個提交按鈕

<input name="commit" type="submit" class="button" value="Save products" />

文字欄位

<%= text_field_tag ('rails') %>

將建立一個空的文字欄位

<input id="rails" name="rails" type="text" />

像往常一樣,您可以新增 HTML 選項或特定值

<%= text_field_tag ('price', nil, :maxlength => 10) %>

請注意,我們使用“nil”。這是因為我們想要建立一個沒有預定義值的文字欄位

<input id="price" name="price" type="text" maxlength="10" />

如果我們提供了名稱,Rails 將新增 HTML 屬性“value”

<input id="price" name="price" type="text" maxlength="10" value="my predefined value instead of nil" />

下拉選擇框

表單中的一項常見任務是讓使用者從下拉選擇框(或下拉列表)中選擇某些內容。要顯示一個簡單的下拉選擇框,我們可以組合一些方便的方法

<%= select_tag (:name, options_for_select([['Peter','pete'],['Joseph', 'jo']]))%>

將建立

<select id="name" name="name">
 <option value="pete">Peter</option>
 <option value="jo">Joseph</option>
</select>

另一個不錯的助手select_*系列是select_year。當您希望使用者選擇他的出生年份時,您可以使用類似以下內容:

<%= select_year Date.today, :start_year => 2009, :end_year => 1900  %>

這將建立一個包含所有年份的下拉選擇框,從 2009 年開始到 1900 年,當前年份(Date.today作為第一個引數)被預選。請務必檢視日期的其他助手Datehelpers

處理錯誤

[編輯 | 編輯原始碼]

既然您知道如何在 Rails 中正確顯示錶單,我們正在尋找一種方法來向用戶提供有關其輸入的反饋。無論是正確的還是需要重新輸入一些值。您已經閱讀了有關如何在將表單資料寫入資料庫之前對其進行驗證的資訊。現在您將看到如何顯示錯誤。基本上,有兩種方法可以讓我們顯示錯誤error_messageserror_messages_for。名稱很好地說明了這兩者之間的區別error_messages顯示錶單的所有錯誤,而error_messages_for顯示給定模型的錯誤。

使用這些方法很容易

<% form_for(@product) do |f| %>
  <%= f.error_messages %>
    <p>
    <!-- different form tags -->
    </p>
<% end %>

將顯示所有錯誤訊息:預設訊息或您在模型中指定的錯誤訊息(:message => "僅允許整數"). error_messages_for以類似的方式使用。然後它顯示與給定名稱匹配的欄位的錯誤訊息(:name在這種情況下)

<%= error_messages_for :name %>

您還可以進一步自定義在框中顯示的錯誤訊息

<%= f.error_messages :header_message => "Invalid product!", :message => "Correct your entries", :header_tag => :h6 %>

高階表單

[編輯 | 編輯原始碼]

到目前為止,我們主要使用名稱末尾帶有_tag的表單元素。在使用模型時(例如,您想更新資料或建立新的資料集),您希望使用更適合此工作的表單元素。沒有新的元素需要學習,我們只需使用我們已經知道的元素,但不要在末尾新增 _tag(比較form_tagform_for).

假設我們想透過表單建立一個新的產品

我們有一個控制器,它有一個操作……products_controller.rb

#...
def new
  @product= Product.new
end
#...

……和一個檢視(view/products/new.html.erb)與我們的@product例項

<% form_for :product, @product, :url=>{:action => "create"} do |f| %>
  <%= f.text_field :name %>
  <%= f.text_field :price %, :size => 10 >
  <%= f.text_field :amount%, :size =>5 >
  <%= submit_tag "New Product" %>
<% end %>

將建立類似於以下內容的 HTML

<form action="/products" class="new_product" id="new_product" method="post">
 <div style="margin:0;padding:0">
 <input name="authenticity_token" type="hidden" value="bgqa1sbwcC5J/tIpPtJjX/3slveFNJg3WZntSOyHT4g=" />
 </div>
 <input id="product_name" name="post[name]" size="30" type="text" />
 <input id="product_price" name="post[price]" size="10" type="text" />
 <input id="product_amount" name="post[amount]" size="5" type="text" />
 <input id="product_submit" name="commit" type="submit" value="Update" />

</form>

讓我們檢查程式碼form_for在其側有一些程式碼,:product引用我們想要使用的模型的名稱,並且@product是物件本身的例項(在本例中,它將是一個新產品)。我們迴圈或“yield”遍歷form_for使用變數f的物件。其餘部分使用您已經熟悉的程式碼。我們使用操作“create”來處理檔案的建立。


RESTful 資源

[編輯 | 編輯原始碼]

上面顯示的方法可能與您在其他 Rails 應用程式中看到的不太一樣。它們中的大多數將使用 RESTful 資源。這使 Rails 可以選擇如何處理資料。這使得form_for方法更容易理解和閱讀

form_for :product, @product, :url=>{:action => "create"}

變成

form_for (@product)

這好多了,不是嗎?現在form_for標籤看起來相同,無論您是建立新產品還是更新現有產品。Rails 足夠智慧,可以識別操作併為我們提供正確的 HTML 屬性(參見<form action="/products" class="new_product" id="new_product" method="post">)

要了解有關路由和 REST 的更多資訊,請務必檢視路由。

使用模型建立下拉選擇框

[編輯 | 編輯原始碼]

我們已經瞭解瞭如何使用內建助手建立下拉選擇框。但是您可能還想在下拉選擇框中顯示模型的內容。為了展示如何做到這一點,我們想從資料庫中選擇類別,以便使用者可以選擇相應的類別

<%=f.collection_select :category, :id, Category.all, :name, :name.downcase %>

如果您的資料庫中有一些類別,則 HTML 可能類似於

<select id="category_id" name="category[id]">
 <option value="cds">CDs</option>
 <option value="books">Books</option>
 <option value="dvds">DVDs</option>
</select>

注意.downcase:如果您的資料庫需要以這種方式工作,這將以小寫形式寫入 HTML 值。這只是您工作的起點。要檢視更多示例和說明,一個好的起點是官方 API

華夏公益教科書