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
留言分享你的想法!
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
本篇純粹紀錄實作流程,以方便未來可以照此版繼續優化改進作法,這篇會使用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