SignupForm.elm

module SignupForm exposing (..)

-- This is where our Elm logic lives.`module SignupForm` declares that this is
-- the SignupForm module, which is how other modules will reference this one
-- if they want to import it and reuse its code.

import Html.App


-- Elm’s "import" keyword works similarly to "require" in node.js.

import Html exposing (..)


-- The “exposing (..)” option says that we want to bring the Html module’s contents
-- into this file’s current namespace, so that instead of writing out
-- Html.form and Html.label we can use "form" and "label" without the "Html."

import Html.Events exposing (..)


-- This works the same way; we also want to import the entire
-- Html.Events module into the current namespace.

import Html.Attributes exposing (id, type', for, value, class)


-- With this import we are only bringing a few specific functions into our
-- namespace, specifically "id", "type'", "for", "value", and "class".


view model =
    form [ id "signup-form" ]
        [ h1 [] [ text "Sensational Signup Form" ]
        , label [ for "username-field" ] [ text "username: " ]
        , input [ id "username-field", type' "text", value model.username ] []
        , label [ for "password" ] [ text "password: " ]
        , input [ id "password-field", type' "password", value model.password ] []
        , div [ class "signup-button" ] [ text "Sign Up!" ]
        ]



-- Take a look at this starting model we’re passing to our view function.
-- Note that in Elm syntax, we use = to separate fields from values
-- instead of : like JavaScript uses for its object literals.


main =
    view { username = "", password = "" }

Hey @rtfeldman, I was linked to this from your blog post (search for the text SignupForm.elm). The code in the blog post is different namely regarding an undefined variable initialModel.

This gist makes more sense but I was wondering if you could update the blog post as lots of elm n00bs like myself will be using it to learn from (especially since it's linked from elm's home page). I'm happy to do it myself if you can guide me to a repo or something like that.

Thanks! 😄

I had the same issue! Also, in elm 0.18 it's not necessary, anymore, to use Html.App. Just use import Html. And also, type' can't be used anymore. Should be changed to "type_" or similar!