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 是什麼？我們改天再來寫一篇介紹一下。
1會員
13內容數
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在上篇瞭解完Actions & Blinks的整個工作流程後，我們就來學習如何用程式碼構建屬於自己的Actions & Blinks吧！本篇詳細講解了要自製Actions & Blinks的所有步驟並提供範例程式碼給大家參考，相信能讓大家快速入門！
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ Params是什麼？
在網頁開發中，params代表的是參數（Parameters）。當你在路由（Route）中定義了一個或多個變數時，這些變數的值就會被存儲在 params 對象中。所以，params 就是用來存儲路由參數的地方，這些參數可以在處理請求時使用。
※ Params的兩個功能：
※ 什麼是 Helper？
Helper 通常指的是樣板引擎裡的邏輯工具。當我們想做的事情超越內建功能時，就可以自訂 helper。
※ Handlebar helper的用處
說明：Handlebars helper 是一種自定義函數，可以在 Handlebars 模板中執行邏輯操作。這些函
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
v-model 指令是 Vue 中一個非常重要的功能，它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
本文介紹了 Django 專案中各個檔案的用途，包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程，以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
Typeform 問卷工具好不好用？快來免費試用！詳細教學流程，5分鐘學會用Typeform設計製作線上問卷，調查表單也很容易！為你整理好了Typeform問卷模版和問卷製作關鍵技巧，跟著我們一起學，輕鬆提高你的線上文件回覆率KPI！
發送表單用get跟post看起來好像都無所謂，然而事實並非如此，使用GET的風險如下：
安全性問題
機密資訊為何不宜用GET，是因為由GET方法提交的表單會將欄位的key,value顯示於URL上，想像一下如果小明借用你的電腦，查看你的網頁歷史紀錄時就可以看到你的帳密了，多可怕！
再來就是如果
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在上篇瞭解完Actions & Blinks的整個工作流程後，我們就來學習如何用程式碼構建屬於自己的Actions & Blinks吧！本篇詳細講解了要自製Actions & Blinks的所有步驟並提供範例程式碼給大家參考，相信能讓大家快速入門！
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ Params是什麼？
在網頁開發中，params代表的是參數（Parameters）。當你在路由（Route）中定義了一個或多個變數時，這些變數的值就會被存儲在 params 對象中。所以，params 就是用來存儲路由參數的地方，這些參數可以在處理請求時使用。
※ Params的兩個功能：
※ 什麼是 Helper？
Helper 通常指的是樣板引擎裡的邏輯工具。當我們想做的事情超越內建功能時，就可以自訂 helper。
※ Handlebar helper的用處
說明：Handlebars helper 是一種自定義函數，可以在 Handlebars 模板中執行邏輯操作。這些函
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
v-model 指令是 Vue 中一個非常重要的功能，它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
本文介紹了 Django 專案中各個檔案的用途，包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程，以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
Typeform 問卷工具好不好用？快來免費試用！詳細教學流程，5分鐘學會用Typeform設計製作線上問卷，調查表單也很容易！為你整理好了Typeform問卷模版和問卷製作關鍵技巧，跟著我們一起學，輕鬆提高你的線上文件回覆率KPI！
發送表單用get跟post看起來好像都無所謂，然而事實並非如此，使用GET的風險如下：
安全性問題
機密資訊為何不宜用GET，是因為由GET方法提交的表單會將欄位的key,value顯示於URL上，想像一下如果小明借用你的電腦，查看你的網頁歷史紀錄時就可以看到你的帳密了，多可怕！
再來就是如果