View Helper - form_tag / form_for / form_with

更新 發佈閱讀 6 分鐘


54在 Rail 的 MVC 架構中,M 是負責驗證與邏輯、以及轉譯向資料庫溝通的角色; C 是負責資料的搬運,搬往 M 或 V; V 則是負責畫面的呈現、及使用者與資料的互動,並將請求送往C,接著得到 C 送回來的資料。

那關於資料的傳輸,一定是要先有個表單,Rails 提供了三個方法,依照需求使用,不過用過之後,通常就會知道哪個最好用。

form_tag

<%= form_tag url: '/books', method: :post do %>      
  <input type="text">
  <input type="submit">
<% end %>

form_tag 後面接續的是,這份表單按下送出後,要以什麼方法(post),往哪個地方送(‘/books’)

在 block 裡面則是要自己刻出 html 的 input 標籤

透過檢視原始碼可以知道,這些 view helper 幫你做了什麼事情,我們來看看 form_tag 在瀏覽器上變成什麼:

<form action="/posts/1" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="L4E9KoJ8Cd9YdzAlTvMsKo4it45PXdt4wt0h-M3b6YVtpAAawmncLwU5zgohWiJ2Ke-6obJKCiD5D824Jyjt-g" autocomplete="off" />   
  <input type="text">
  <input type="submit">
</form>

是不是很厲害,短短的 form_tag,幫你做了這麼多事情。其中第二個隱藏欄位,authenticity_token,就是使用 view helper 一大原因,它會幫你做出一個自動產生 authenticity_token 的隱藏欄位,value 後面那一大串就是這個欄位的產物。(如果你按下重新整理,他就會在跳一組新的)

form_for

更厲害更方便的 view helper!

在 form_for 後面接上 controller 建立的實體變數,form_for 會去判斷這個實體變數,有沒有東西,並以此決定,這份表單的 action 跟 method 為何。

HOW? 因為整體的過程是這樣:當我們在網頁上按下新增功能時,會往 /books/new 的網址去找 BooksController 的 new action ,new action 會去找 new.html.erb,所以在 new.html.erb 裡的 form_for 的實體變數,是從 new action 來的,由於是新增,資料庫裡沒有東西,所以 form_for 就知道,我現在是在新增一個新的物件,那我應該是要送往 create。

因此那個 form.submit 會是 create 字樣。

所以同樣的 form_for 換到 edit.html.erb 裡,在 edit 的頁面上,submit 鈕顯示的字樣是 update,因為 @book 有抓到東西是從資料庫過來的,那代表我們是要從既有資料進行更新。

<%= form_for @book do |f| %>

<%= form.label :title %>
<%= form.text_field :title %>

<%= form.submit %>

<% end %>

此外,form_for 還有附加功能是 form.labe 跟 form.text_field 等等的工具可以使用,非常方便。


我們來看看網頁原始碼,form 幫我們做了什麼:

<label for="book_title">Title</label>
<input type="text" name="book[title]" id="book_title" />

<input type="submit" name="commit" value="Create Book" data-disable-with="Create Book" />

是不是超厲害!

我們輸入的 form,在瀏覽器上轉換成 html 的標籤、屬性、值。

form_with

form_with 則是上面兩個的混血兒,直接來看 code:

<%= form_with model: @book, url: '/store' do |f| %>          
  <%= f.label :title %>
  <%= f.text_field :title %>
  <%= f.submit %>
<% end %>

有 form_for 的實體變數,也有 form_tag 的 url,當表單要送往的地方不如預期時,可以使用 form_with 自訂 url,讓表單送往我們想要它去的地方,以防它自己找錯路。

小結

這篇介紹了 MVC 裡,V 會使用到的表單語法,個人比較常用到的是 form_for 跟 form_with。

form_tag 還要自己打 html,對我來說沒有很方便,form_for 幾乎能代替它,但如果需要 url,再用 form_with 就好。

至於上面提到的 authenticity token 是什麼?我們改天再來寫一篇介紹一下。







留言
avatar-img
Mike的沙龍
1會員
13內容數
Mike的沙龍的其他內容
2022/08/12
將 Rails 環境帶入 rake 裡,讓 rake 可以使用 Rails 的元素,像是 Model: 如果沒有導入環境給 rake ,rake 就找不到 User ,就沒辦法 new 了。 終端機輸入: 透過回圈,一個指令,產生多筆資料: 更複雜的:
2022/08/12
將 Rails 環境帶入 rake 裡,讓 rake 可以使用 Rails 的元素,像是 Model: 如果沒有導入環境給 rake ,rake 就找不到 User ,就沒辦法 new 了。 終端機輸入: 透過回圈,一個指令,產生多筆資料: 更複雜的:
2022/08/01
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前,我們先來了解一下,這兩個鎖是應用在什麼地方? 資料庫 為了達成這件萬中選一的情況,就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想,可以很清楚的知道,這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任,所採取的行為。 樂觀鎖
2022/08/01
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前,我們先來了解一下,這兩個鎖是應用在什麼地方? 資料庫 為了達成這件萬中選一的情況,就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想,可以很清楚的知道,這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任,所採取的行為。 樂觀鎖
2022/08/01
在 Rails 裡常常可以看到 redirect_to 跟 render,但這兩者到底有什麼差異呢? Redirect_to redirect_to 後面接網址路徑,是用來轉到該網址路徑去,也就是換到一個新的頁面。 如果在 new 的頁面上 (同一條溪流,這一秒的水流跟下一秒的水流是不一樣的水流)
2022/08/01
在 Rails 裡常常可以看到 redirect_to 跟 render,但這兩者到底有什麼差異呢? Redirect_to redirect_to 後面接網址路徑,是用來轉到該網址路徑去,也就是換到一個新的頁面。 如果在 new 的頁面上 (同一條溪流,這一秒的水流跟下一秒的水流是不一樣的水流)
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
本篇純粹紀錄實作流程,以方便未來可以照此版繼續優化改進作法,這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記,回頭再看的時候,就可以發現實作差異並進行改正,沒搞懂的底層操作也能在覆盤的時候理解,建議大家都要筆記自己的實作流程。
Thumbnail
本篇純粹紀錄實作流程,以方便未來可以照此版繼續優化改進作法,這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記,回頭再看的時候,就可以發現實作差異並進行改正,沒搞懂的底層操作也能在覆盤的時候理解,建議大家都要筆記自己的實作流程。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
前端和後端溝通,最常用就是 get 和 post 後端 先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request,之後第二個參數第三個參數可以隨便你設,這倒是沒有限制 用 request.GET 這個
Thumbnail
前端和後端溝通,最常用就是 get 和 post 後端 先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request,之後第二個參數第三個參數可以隨便你設,這倒是沒有限制 用 request.GET 這個
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
在Laravel中除了用Validator來驗證資料,還可以用Form Request Validation,建立一個驗證class,在request進入controller之前,會先在這邊做驗證,若驗證失敗則不會繼續執行Controller。 建立form request: 範例程式碼:
Thumbnail
在Laravel中除了用Validator來驗證資料,還可以用Form Request Validation,建立一個驗證class,在request進入controller之前,會先在這邊做驗證,若驗證失敗則不會繼續執行Controller。 建立form request: 範例程式碼:
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News