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)
 
+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!")
View Compiled
form {
  max-width: 500px;
}

label, input:not([type="checkbox"], [type="radio"]), textarea {
  margin: 0.5em 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

label {
  font-weight: bold;
}

input, textarea {
  padding: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.