This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

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.