DEV Community

Benjamin Hollon
Benjamin Hollon

Posted on

PugJS Form Mixin

To me, one of the most tedious parts of writing HTML is creating forms. So now that I've started using PugJS as a templating engine and to speed up my development process, I naturally wondered if I could use it to streamline the form-creation process while keeping everything accessible.

I came up with this mixin that should cover most use cases:

mixin form(method, action, inputs, submitLabel)
  form(method=method action=action)
    if inputs
      each input in inputs
          case input.type
            when 'textarea'
              label #{input.label}
                textarea(placeholder=input.placeholder required=input.required name=input.name id=input.id class=input.class maxlength=input.maxlength autofocus=input.autofocus autocomplete = input.autocomplete)
            when 'checkbox'
            when 'radio'
              label
                input(type=input.type name=input.name id=input.id class=input.class required=input.required)
                | #{" " + input.label}
            default
              label #{input.label}
                input(type=input.type min=input.min max=input.max multiple=input.multiple pattern=input.pattern step=input.step height=input.height width=input.width placeholder=input.placeholder required=input.required name=input.name id=input.id class=input.class maxlength=input.maxlength autofocus=input.autofocus autocomplete = input.autocomplete)
    input(type="submit" value=submitLabel)
Enter fullscreen mode Exit fullscreen mode

It looks a bit unwieldy at first, but all those attributes just help me cover all the different input types. Now that I've made this (I can use an include to use the same mixin on all the pages it's needed), all I need to do is this to make a form:

+form
Enter fullscreen mode Exit fullscreen mode

Now, all this makes is an empty form element with a submit button. Here's a more complete example with a couple of basic input elements:

+form("post", "", [
  {
    label: 'Your Full Name',
    name: 'name',
    type: 'text',
    placeholder: 'John Doe',
    required: true,
    autofocus: true
  },
  {
    label: 'Your Email',
    name: 'email', 
    type: 'email',
    placeholder: 'john@doe.com',
    required: true
  },
  {
    label: 'I agree with the Terms & Conditions',
    type: 'checkbox',
    required: true
  }
], "Go!")
Enter fullscreen mode Exit fullscreen mode

Which gives me this neat tidy form, easy as pie:

Have fun. :)

Top comments (0)