在form表單上取得複數相同name的資料

說來真慚愧，寫了好幾年的網頁現在才遇到這問題。

在HTML中使用form來做資料傳遞是很基礎的一個做法，例如像這樣：
將name以POST方式傳到example.com的api

<form action="http://example.com" method="post">
    <input name="name" value="val">
    <input type="submit">
</form>

在api那邊就可能會取得長得像這樣的JSON

{"name":"val"}

基本上一個name對應一個val，遇到欄位有相同的name則會取最後一個值。

最近專案中有個表單，裡面會有個動態產生資料的需求(如下)

<form action="http://example.com" method="post">
    <!--名為name的input動態產生-->
    <input name="name" value="val_1"> 
    <input name="name" value="val_2">
    <input name="name" value="val_3">
    <input type="submit">
</form>

照基本做法只會得到最後一個"val_3"，那麼要怎麼做呢？

將name陣列化

<form action="http://example.com" method="post">
    <input name="name[]" value="val_1">
    <input name="name[]" value="val_2">
    <input name="name[]" value="val_3">
    <input type="submit">
</form>

答案很簡單，只要將name命名為陣列就可以，就能取得包起來的陣列囉。

{"name":["val_1","val_2","val_3"]}