Tl;Dr;

公式パッケージを読むと色々勉強になるぞ

1. 動機

最近Elmにハマったばかりのweb初心者なのですが、netlifyで自分のホームページを公開してみることにしました
(書き始めたばかりなのとCSSがないのでまだまだです)
そこでnetlifyのformの投稿を自動で取得してくれる機能を使ってみようと思い、netlifyattributeを追加してみました
(ちなみに、機能としてはは上手くいきませんでした。それは後ほど)

netlify attribute

netlify attributeをformタグに追加することで、netlifyが自動的に投稿を取得してくれるようになります。

2. 作り方

作り方は公式のパッケージのelm/Htmlを参考にしました(elmをインストールしてあれば、$HOME/.elm/0.19.0/package/elm/html/以下にあり、自分はそちらを参考にしました)

とても簡単、以下の要領でできます

import VirtualDom

netlify : String -> Html.Attribute msg
netlify str =
  VirtualDom.attribute "netlify" str

3. 使い方

Main.elm

view : Model -> Html Msg
view _ =
  form [netlify]
       [ input [ type_ "text" ] []
       , button [ type_ "submit" ] [ text "submit" ]
       ]

このviewは以下のようになります

<form netlify>
  <input type="text">
  <button type="submit">submit</button>
</form>

思った通りにできたね！やったね！！

他の例

Youtubeの登録ボタンを使用するには以下のような感じです:

dataChannelid : String -> Html.Attribute msg
dataChannelid id =
    VirtualDom.attribute "data-channelid" id


dataLayout : String -> Html.Attribute msg
dataLayout str =
    VirtualDom.attribute "data-layout" str


dataCount : String -> Html.Attribute msg
dataCount str =
    VirtualDom.attribute "data-count" str


view =
  div [ class "g-ytsubscribe", dataChannelid "UCPf-EnX70UM7jqjKwhDmS8g", dataLayout "full", dataCount "default" ] []

こうすると魔王まぐろなちゃんのYouTubeへのリンクができます
イメージ画像↓

(但しこれも諸条件があるらしく、ページが開かれた時に読み込まないと上手くいきません。コードのせいというよりは仕組みの問題だと思います)

まとめ

意外とHtml.Attributeの追加は簡単だった!
公式のパッケージが観れるのは本当にありがたい、色々学べる

ちなみにその近くにpropertyの追加方法等も書いてあるので木になる人は是非に...?

netlifyのformとしては上手く行かなかった

実装したのはいいものの、実際に使用してみるとどうやらきちんと機能していないようです。

Netlify comes with built-in form handling.
Our build bots do it by parsing your HTML files directly at deploy time,
so there’s no need for you to make an API call or include extra JavaScript on your site.

https://www.netlify.com/docs/form-handling/

ふむ。

Our build bots do it by parsing your HTML files directly at deploy time,

...

at deploy time

...デプロイ時にHTMLをパースして行いますとのことなので、静的ファイルに存在しないのでアウトでした。

解決策

Elmからではなくindex.html内に置こう

ElmでHTMLのattributeを自分で作る