Skip to content

Instantly share code, notes, and snippets.

@michaelglass
Last active June 3, 2016 16:10
Show Gist options
  • Save michaelglass/22e472f924f826e531b546d9f42eab4e to your computer and use it in GitHub Desktop.
Save michaelglass/22e472f924f826e531b546d9f42eab4e to your computer and use it in GitHub Desktop.
form assets

After downloading, running elm-make in the extracted directory should yield a renderable example.html.

<!DOCTYPE html>
<html>
<head>
<title>Elm Signup Form</title>
<!-- Some basic styles for the form -->
<style>
label, input, .signup-button, h1, .validation-error { font-family: sans-serif; font-size: 36px; width: 200px }
h1 { font-size: 48px; width: auto; border-bottom: 1px solid #111; padding-bottom: 10px; width: 925px; }
label { display: inline-block; }
input { margin: 20px; width: 680px; padding: 10px; color: #111111; }
.signup-button { padding: 30px; background-color: #7FDBFF; color: rgb(0, 73, 102); border: none; margin: 20px 0; width: 150px;}
.signup-button:hover { background-color: #0074D9; color: rgb(179, 220, 255); }
form { width: 960px; margin: 80px auto; }
.validation-error { color: #FF4136; width: 925px; box-sizing: border-box; display: inline-block; }
</style>
</head>
<body>
<!-- We'll render everything inside this div. -->
<div id="elm-rendering-area"></div>
</body>
<!-- Import our compiled Elm code -->
<script src="elm.js"></script>
<!-- Run our Elm app! -->
<script>
Elm.SignupForm.embed(document.getElementById("elm-rendering-area"));
</script>
</html>
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 = "" }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment