Jade form-helpers. Can be used with bootstrap

_formhelper.jade

mixin input(label, options)
  - var defaults = {"tag":"input", "type":"text", "labelClass":"form-label", "name":sanitize(label), "placeholder":null, "value":null, "id":sanitize(label).substring(0, 10) + "-" + randomString(), "tabindex":null}
  - var input = extend({}, defaults, {"label":label, "required":attributes.required}, options, attributes)
  - var baseClass = input.type == "hidden" ? null : "form-control"
  - delete attributes.required

  if input.placeholder === true
    - input.placeholder = label

  if input.type == "hidden"
    - input.label = null

  if input.type == "checkbox" || input.type == "radio"
    label(for=input.id, class=input.labelClass)
      input&attributes(attributes)(id=input.id, type=input.type, name=input.name, placeholder=input.placeholder, value=input.value || "true", checked=input.checked, required=input.required ? true : null, tabindex=input.tabindex)
      if input.icon
        i.icon(class=attr(input.icon, "ficon"))
      != input.label
      block

  else
    if input.label !== null
      label(for=input.id, class=input.labelClass, class=input.label === false ? "sr-only" : null)
        if input.icon
          i.icon(class=attr(input.icon, "ficon"))
        != input.label || label
        if input.required && (input.label !== false || input.label != " ")
          | 
          span.required *
    
    if input.tag == "input"
      input&attributes(attributes)(id=input.id, class=baseClass, type=input.type, name=input.name, placeholder=input.placeholder, value=input.value, required=input.required ? true : null, tabindex=input.tabindex)
    
    else
      #{input.tag}&attributes(attributes)(id=input.id, class=baseClass, type=input.type, name=input.name, placeholder=input.placeholder, value=input.value, required=input.required ? true : null, tabindex=input.tabindex)
        if _.isArray(input.values)
          each option, i in input.values
            if (_.isArray(option))
              - option = {"value":sanitize(option[0]), "label":option[1]}
            else if (!_.isPlainObject(option))
              - option = {"value":sanitize(option), "label":option}
            - var selected = (input.selected == i || input.selected == option.value) ? true : null
            option(value=option.value, selected=selected)!= option.label
  
  if input.type != "checkbox" && input.type != "radio"
    block

mixin select(label, values, options)
  - var options = extend({"tag":"select", "type":null, "values":values, "selected":null}, options)
  +input(label, options)&attributes(attributes)
  block

mixin checkbox(label, options)
  - var options = extend({"type":"checkbox", "checkboxClass":null}, options)
  .checkbox(class=options.checkboxClass)
    +input(label, options)&attributes(attributes)
    block

mixin buttonized-input(label, options)
  - var options = extend({"type":"checkbox", "label":" ", "labelClass":"buttonized-input"}, options)
  - options.labelClass = [options.labelClass, options.labelClass + "-" + options.type]
  +input(label, options)&attributes(attributes)
    span.btn= label

mixin radio(label, options)
  - var options = extend({"type":"radio"}, options)
  .radio
    +input(label, options)&attributes(attributes)
    block

mixin hidden-input(name, value)
  +input(name, {"type":"hidden", "name":name, "value":value || "", "id":null})&attributes(attributes)

usage.jade

form.form.form-subscribe(action="#", method="post")
  .row.extended-gutter
    .col-sm-3
      .form-group
        +select("Anrede", ["Herr", "Frau"])

  .row.extended-gutter
    .col-sm-6
      .form-group
        +input("Vorname")(required)
    .col-sm-6
      .form-group
        +input("Nachname")(required)

  .row.extended-gutter
    .col-sm-6
      .form-group
        +input("Firma")
    .col-sm-6
      .form-group
        +select("Bereich / Abteilung", ["Eins", "Zwei", "Drei"])

  .row.extended-gutter
    .col-sm-6
      .form-group
        +select("Funktion / Position", ["Eins", "Zwei", "Drei"])
    .col-sm-6
      .form-group
        +select("Branche")

  .row.extended-gutter
    .col-sm-6
      .form-group
        .row.normal-gutter
          .col-sm-9
            +input("Straße", {"label":"Straße - Hausnummer"})(required)
          .col-sm-3
            +input("Hausnummer", {"label":" "})(required)
    .col-sm-6
      .form-group
        .row.normal-gutter
          .col-sm-4
            +input("PLZ", {"label":"PLZ - Ort"})(required, pattern="[0-9]{5}")
          .col-sm-8
            +input("Ort", {"label":" "})(required)

  .row.extended-gutter
    .col-sm-6
      .form-group
        +input("Land")

  .row.extended-gutter
    .col-sm-6
      .form-group
        .row.normal-gutter
          .col-sm-6
            +input("Telefon")(required)
          .col-sm-6
            +input("Nummer", {"label":" "})(required)

    .col-sm-6
      .form-group
        +input("E-Mail", {"type":"email"})(required)
  
  +checkbox("Ich bin mit der Verarbeitung und Nutzung meiner Daten gemäß <a href='#' class='more'>Einwilligungserklärung</a> einverstanden.")(required)
  
  button(type="submit").btn-ci-lg-light.pull-right Absenden