Creating form with onSubmit

[kuon]

Currently, version 4.2.1 seem to have dropped the form element.

What is the plan and the current workaround to support form nodes with onSubmit on it (with an input type=submit button)?

[mdgriffith]

The form element and onSubmit were removed to encourage people to use Elm's standard ways of speaking to a server such as the Http package.

The current workaround is to implement a Submit msg and bind it to an onClick handler and handle things normally from there on out.

[kuon]

I am using the Http package, but with onSubmit I have keyboard handling for free.

I was able to achieve what I want with onSubmit on a form node I create like so:

         node "form" <| column S.Card
            [ width (px 500), padding 20, onSubmit SubmitForm ] []

With the submit button:

 node "input" <| el S.InputDefault
                [ padding 10
                , attribute "type" "submit"
                ] (text "Connect")

I still feel that this should be simpler. As otherwise we have to re-implement keyboard sending (detection of enter key) for all forms.

[mdgriffith]

Creating an event for the key handler is pretty easy, I would recommend using that instead of onSubmit :) :

onKey : (Key -> msg) -> Attribute msg
onKey tagger =
    on "keydown" (Json.map tagger targetKey)

When using this package: http://package.elm-lang.org/packages/ohanhi/keyboard-extra/3.0.4/Keyboard-Extra

Then all you would really need would be onClick and a onKey handler. You could reduce onKey down to onEnter too, to make it a little less verbose.

[kuon]

What about accessibility? I know it's often not a good idea to not use the built in behavior for accessibility reasons. An accessible form should use the form tag and input type="submit". I'd like to be able to do it in elm without feeling that I'm "hacking" it. I think that a lib like style-element should provide accessible layout at no cost, and so far I see good design decision in this direction (like requiring "label" to be able to make a text input).

[mdgriffith]

So, I 100% agree that accessibility should be built in by default.

In v5 the accessibility part of <form> will be present, and the submit button behavior of being focusable, clickable, and "enter"able will be there as Input.button.

Thanks!

[xtian]

I just ran into this when trying out this package for the first time. I agree that the most accessible choice here is to support <form> elements with an onSubmit hook. Thank you! :)