Forms

Clone the code or follow along in the online editor.

Here we will make a rudimentary form. It has a field for your name, a field for your password, and a field to verify that password. We will also do some very simple validation (do the two passwords match?) just because it is simple to add.

The code is a bit longer in this case, but I still think it is valuable to look through it before you get into the description of what is going on.

  1. import Html exposing (..)
  2. import Html.Attributes exposing (..)
  3. import Html.Events exposing (onInput)
  6. main =
  7.   Html.beginnerProgram { model = model, view = view, update = update }
  10. -- MODEL
  12. type alias Model =
  13.   { name : String
  14.   , password : String
  15.   , passwordAgain : String
  16.   }
  19. model : Model
  20. model =
  21.   Model "" "" ""
  24. -- UPDATE
  26. type Msg
  27.     = Name String
  28.     | Password String
  29.     | PasswordAgain String
  32. update : Msg -> Model -> Model
  33. update msg model =
  34.   case msg of
  35.     Name name ->
  36.       { model | name = name }
  38.     Password password ->
  39.       { model | password = password }
  41.     PasswordAgain password ->
  42.       { model | passwordAgain = password }
  45. -- VIEW
  47. view : Model -> Html Msg
  48. view model =
  49.   div []
  50.     [ input [ type_ "text", placeholder "Name", onInput Name ] []
  51.     , input [ type_ "password", placeholder "Password", onInput Password ] []
  52.     , input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
  53.     , viewValidation model
  54.     ]
  56. viewValidation : Model -> Html msg
  57. viewValidation model =
  58.   let
  59.     (color, message) =
  60.       if model.password == model.passwordAgain then
  61.         ("green", "OK")
  62.       else
  63.         ("red", "Passwords do not match!")
  64.   in
  65.     div [ style [("color", color)] ] [ text message ]

This is pretty much exactly how our text field example looked, just with more fields. Let’s walk through how it came to be!

As always, you start out by guessing at the Model. We know there are going to be three text fields, so let’s just go with that:

  1. type alias Model =
  2.   { name : String
  3.   , password : String
  4.   , passwordAgain : String
  5.   }

Great, seems reasonable. We expect that each of these fields can be changed separately, so our messages should account for each of those scenarios.

  1. type Msg
  2.     = Name String
  3.     | Password String
  4.     | PasswordAgain String

This means our update is pretty mechanical. Just update the relevant field:

  1. update : Msg -> Model -> Model
  2. update msg model =
  3.   case msg of
  4.     Name name ->
  5.       { model | name = name }
  7.     Password password ->
  8.       { model | password = password }
  10.     PasswordAgain password ->
  11.       { model | passwordAgain = password }

We get a little bit fancier than normal in our view though.

  1. view : Model -> Html Msg
  2. view model =
  3.   div []
  4.     [ input [ type_ "text", placeholder "Name", onInput Name ] []
  5.     , input [ type_ "password", placeholder "Password", onInput Password ] []
  6.     , input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
  7.     , viewValidation model
  8.     ]

It starts out normal: We create a <div> and put a couple <input> nodes in it. Each one has an onInput attribute that will tag any changes appropriately for our update function. (This is all building off of the text field example in the previous section.)

But for the last child we do not directly use an HTML function. Instead we call the viewValidation function, passing in the current model.

  1. viewValidation : Model -> Html msg
  2. viewValidation model =
  3.   let
  4.     (color, message) =
  5.       if model.password == model.passwordAgain then
  6.         ("green", "OK")
  7.       else
  8.         ("red", "Passwords do not match!")
  9.   in
  10.     div [ style [("color", color)] ] [ text message ]

This function first compares the two passwords. If they match, you want green text and a positive message. If they do not match, you want red text and a helpful message. With that info, we produce a <div> filled with a colorful message explaining the situation.

This starts to show the benefits of having our HTML library be normal Elm code. It would have looked really weird to jam all that code into our view. In Elm, you just refactor like you would with any other code!

On these same lines, you may notice that the <input> nodes all are created with pretty similar code. Say we made each input fancier: there is an outer <div> that holds a <span> and an <input> with certain classes. It would make total sense to break that pattern out into a viewInput function so you never have to repeat yourself. This also means you change it in one place and everyone gets the updated HTML.

Exercises: One cool thing about breaking viewValidation out is that it is pretty easy to augment. If you are messing with the code as you read through this (as you should be!) you should try to:

  • Check that the password is longer than 8 characters.
  • Make sure the password contains upper case, lower case, and numeric characters.
  • Add an additional field for age and check that it is a number.
  • Add a “Submit” button. Only show errors after it has been pressed.

Be sure to use the helpers in the String library if you try any of these! Also, we need to learn more before we start talking to servers, so before you try that here, keep reading until HTTP is introduced. It will be significantly easier with proper guidance!