Creating a Simple Sign Up Form in Elm

Lets take a look at how we can create a simple Signup Form in Elm. Just like when we are creating any other app, we first need to build the UI before we get to the business logic of the project.

The form that I am going to create will have a Header text and an input field for the email, password, and confirm password.

First, open the Main.elm file in your code editor, and delete the contents of the main function.

Inside the main function, I will first call the form component from the Html package.

main = Html.form [] []

Here, calling just form will get the Elm all confused because both the Html and Html.Attributes packages have a form component inside it.

Inside the second square brackets, create a new div element that also contains a h1 element inside its second square brackets.

[ div []

[ h1 []

[ text "Sign Up" ]

],

]

After terminating the second square bracket of the div element, create a new div element that contains the input element for the email field of your form.

div []

[ input [ placeholder "Email", type_ "email" ]

[]

],

There are a few things to note here. In the input element, I am writing the code in the first square bracket, because that is where we are supposed to write our attributes. Also, if you are wondering why I have written type_ instead of type , that is because type is already being used by Elm internally.

Repeat the above div element for password and confirm password fields. Make sure to change the placeholder and type_ attributes. Passing password to the type_ attribute will redact the input of the field. Do this for both password and confirm password fields.

Finally I also need to create a Submit button. For this, will need to write a new div element containing a button .

div []

[ button []

[ text "Submit" ]

]

With this we have created a simple signup form using Elm!

If you open the browser’s dev tools and take a look at the form, you should see something similar to this: