Elm: Styling a Form

Intro

This post attempts to document my current understanding of Elm and how to render a form with it.

Implementing the Form

I took an HTML form example from a reference book and decided to port it to Elm.

The following form has been coded:

view model =
    div []
        [ h1 [] [ text "Poetry Workshops" ]
        , p [] [ text "We will be conducting a number of poetry workshops and symposiums throughout the year." ]
        , p [] [ text "please note that the following events are free to members:" ]
        , ul []
            [ li [] [ text "A Poetic Perspective" ]
            , li [] [ text "Walt Witman at Work" ]
            , li [] [ text "Found Poems and Outsider Poetry" ]
            ]
        , table []
            [ tr [ class "head" ] [ th [] [], th [] [ text "New York" ], th [] [ text "Chicago" ], th [] [ text "Sanfrancisco" ] ]
            , tr [] [ th [] [ text "A Poetic Perspective" ], td [] [ text "Sat, 4 Feb 2012" ], td [] [ text "Sat, 3 Feb 2012" ], td [] [ text "Sat, 17 Feb 2012" ] ]
            , tr [ class "even" ] [ th [] [ text "Walt Witman at Work" ], td [] [ text "Sat, 7 Feb 2012" ], td [] [ text "Sat, 5 Feb 2012" ], td [] [ text "Sat, 19 Feb 2012" ] ]
            , tr [] [ th [] [ text "Found Poems and Outsider Poetry" ], td [] [ text "Sat, 9 Feb 2012" ], td [] [ text "Sat, 7 Feb 2012" ], td [] [ text "Sat, 21 Feb 2012" ] ]
            ]
        , Html.form []
            [ fieldset []
                [ legend [] [ text "Register Your Interest" ]
                , p []
                    [ label [ class "title", for "name" ] [ text "Your name:" ]
                    , input [ type_ "text", name "name", id "name" ] []
                    , br [] []
                    , label [ class "title", for "email" ] [ text "Your email:" ]
                    , input [ type_ "text", name "email", id "email" ] []
                    , br [] []
                    ]
                , p []
                    [ label [ class "title", for "location" ] [ text "Your closest center" ]
                    , Html.select [ name "location", id "location" ]
                        [ option [ value "ny" ] [ text "New York" ]
                        , option [ value "il" ] [ text "Chicago" ]
                        , option [ value "ca" ] [ text "San Francisco" ]
                        ]
                    ]
                , span [ class "title" ] [ text "Are you a member?" ]
                , label [] [ text "Yes", input [ type_ "radio", name "member", value "yes" ] [] ]
                , label [] [ text "No", input [ type_ "radio", name "member", value "no" ] [] ]
                ]
            ]
        , div [ class "submit" ]
            [ input [ type_ "submit", value "Register" ] [] ]
        ]

Implementing the CSS

Here’s the corresponding CSS file:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
    color: #666666;
    background-color: #f8f8f8;
}

li {
    line-height: 1.6em;
}

table {
    border-spacing: 0px;
}

th, td {
    padding: 5px 30px 5px 10;
    border-spacing: 0px;
    font-size: 90%;
    margin: 0px;
}

th, td {
    text-align: left;
    background-color: #e0e9f0;
    border-top: 1px solid #f1f8fe;
    border-bottom: 1px solid #cbd2d8;
    border-right: 1px solid #cbd2d8;
}

tr.head th {
    color: #ffffff;
    background-color: #90b4d6;
    border-bottom: 2px solid #547ca0;
    border-right: 1px solid #749abe;
    border-top: 1px solid #90b4d6;
    text-align: center;
    text-shadow: -1px -1px 1px #666666;
    letter-spacing: 0.15em;
}

td {
    text-shadow: 1px 1px 1px #ffffff;
}

tr.even td, tr.even th{
    background-color:#e8eff5;
}

tr.head th:first-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-top-left: 5px;
    border-top-left-radius: 5px;
}

tr.head th:last-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-top-right: 5px;
    border-top-right-radius: 5px;
}

fieldset{
    width:310px;
    margin-top: 20px;
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    line-height: 1.6em;
}

legend{
    font-style: italic;
    color: #666666;
}

input[type="text"]{
    width: 120px;
    border: 1px solid #d6d6d6;
    padding: 2px;
    outline: none;
}

input[type="text"]:focus , input[type="text"]:hover{
    background-color: #d0e2f0;
    border: 1px solid #999999;
}

input[type="submit"] {
 border: 1px solid #006633;
 background-color: #009966;
 color: #ffffff;
 border-radius: 5px;
 padding: 5px;
 margin-top: 10px;
}

input[type="submit"]:hover{
    border: 1px solid #006633;
    background-color: #00cc33;
    color: #ffffff;
    cursor: pointer;
}

.title {
    float: left;
    width: 160px;
    clear: left;
}

.submit {
    width: 310px;
    text-align: right;
}

Displaying the Form

Here’s the result:

FormPolished.png

Conclusion

In conclusion, this post attempts to document my current understanding of Elm and how to render a form with it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: