Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    Create the View for a Simple Form in Elm

    Enrico BuonannoEnrico Buonanno

    In Elm, you use functions to create a representation of the virtual DOM. There's a straightforward correspondence between these functions and the HTML that's produced as a result.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:00 Let's start building the view for our form. Instead of a div, we can use a form function to create the form. We have an empty list of attributes, and we have two child elements. Let's put an input there, and let's put a button with some text. Let me save this.

    00:27 You can see this doesn't compile, because the name form is ambiguous. Both HTML and HTML attributes expose a function called form. I'm going to disambiguate by saying html.form to specify that I want to use the form element.

    00:46 This now compiles and, indeed, we have an input and a button. Let me wrap both of these into a div, so that these elements are on top of each other.

    01:08 Let me add a few more elements to start building the form. We'll add another div with an H1 element. It said that this input will have a placeholder, your email. Let's add another div with a text area, with a placeholder, your message. Text area is actually all lowercase.

    01:53 Now we have a very simple contact form. Let's add just a couple more things. Here, let's add another attribute. Let's say that the type for this input is of type email. You will see that this doesn't compile, because type is a keyword in Elm. To create the type attribute, the function is actually called type with an underscore at the end.

    02:24 Let's say we want to make this text area a bit taller, so we want to set the rows attribute. Let's say we want to make this several rows tall. Indeed, now we have the view for a very simple contact form.