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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.