Archive

Uncategorized

Intro

This post is meant to document my current understanding of how to build a form using the Elm programming language.

 

Select a File

The following code shows a form for selecting a file:

view : Model -> Html Msg
view model =
    Html.form []
        [ p [] [ text "Upload your song in MP3 format:" ]
        , input [ type_ "text" ] []
        , input [ type_ "file", name "user-song" ] []
        , br [] []
        , input [ type_ "submit", value "Upload" ] []
        ]

Here’s the result:

Elmform1

Label and Textbox

The following code demonstrates one way to associate a textbox to a label:

view model =
    Html.form []
        [ label [] [ text "Age:", input [ type_ "text", name "age" ] [] ]
        ]

Here’s the result:

ElmLabelInput

Labels and Radio Buttons

The following is an example of labels associated to radio buttons:

view model =
    Html.form []
        [ label [] [ text "Gender:" ]
        , input [ id "female", type_ "radio", name "gender", value "f" ] []
        , label [ for "female" ] [ text "Female" ]
        , input [ id "male", type_ "radio", name "gender", value "m" ] []
        , label [ for "male" ] [ text "Male" ]
        ]

Here’s the result:

ElmLabelRadio

Grouping Form Elements

The following code leverages an HTML fieldset to group elements:

view model =
    fieldset []
        [ legend [] [ text "Contact Details" ]
        , label [] [ text "Email:", br [] [], input [ type_ "text", name "email" ] [], br [] [] ]
        , label [] [ text "Mobile:", br [] [], input [ type_ "text", name "mobile" ] [], br [] [] ]
        , label [] [ text "Telephone:", br [] [], input [ type_ "text", name "telephone" ] [] ]
        ]

Here’s the result:

fieldset

Validation

The following code demonstrates validation on required inputs for a form:

view model =
    Html.form []
        [ label [ for "username" ] [ text "UserName:" ]
        , input [ type_ "text", name "username", required True ] []
        , br [] []
        , label [ for "password" ] [ text "Password:" ]
        , input [ type_ "text", name "password", required True ] []
        , input [ type_ "submit", value "Submit" ] []
        ]

Here’s the result:

elmValidation.png

Conclusion

In conclusion, this post attempts to document my current understanding of how to build a form using the Elm programming language.

Today I learned how to implement a method that accepts a variable number of arguments of the same type.

In C#, we use “params” keyword.

In F#, we use the ParamArray attribute.

open System

type MyClass() =

    member this.SomeMethod([<ParamArray>](args:(string*string) array)) = ()
    

let someInstance = MyClass()

someInstance.SomeMethod( ("Table1","Column1"),
                         ("Table2","Column2"),
                         ("Table3","Column3"),
                         ("Table4","Column4") )

The example above demonstrates how an variable number of typed arguments can be passed to a method. The End.