Foundation styles native form elements when you wrap them in semantic structure: a <form>, <label> text, and inputs with consistent spacing and focus states. Unlike Bootstrap’s separate form-control class on every input, Foundation leans on element selectors—your markup stays closer to plain HTML forms.
Labels and help text
Pair every control with a visible label—either wrapping the input inside <label> or connecting with for/id. Add hints with help-text below the field. Disabled controls use the native disabled attribute; Foundation dims them automatically.
Buttons in forms
Submit actions use button with type="submit"; secondary actions use button hollow or button secondary. Keep one primary submit per form unless the UX clearly needs two equal-weight actions.
Self-check
- Why does Foundation prefer labels that wrap inputs on small marketing forms?
- Where does hint text belong relative to the control?
- Which attribute disables a field for assistive tech and styling?