Forms

Easily create powerful and versatile form layouts with our built in form styles and the Foundation grid. We also included some handy form controls to make your app more complete.


Building Forms With HTML

Creating a form in Foundation is designed to be easy but extremely flexible. Forms are built with a combination of standard form elements, as well as the Grid (grid-block and grid-content).

You can size inputs using column sizes, like .large-6, .small-6. You can create grid-block elements inside your form and use grid-content for the form, including inputs, labels and more. Grid-block's inside a form inherit some special padding to even up input spacing. This is an example form we've created that is laid out using the grid:

You can create a Form with this basic HTML:


Pre/Postfix Labels & Buttons

You can attach labels before or after the form input. Wrap the input with a class of inline-label then use the form-label class on the label. Buttons just need the inline-label class. Example HTML:


Switch

Switches are toggle element that switch between an Off and On state on tap or click. They make use of checkbox inputs (or radio buttons) and require no JavaScript.


Range Slider

You can make a fancy Range slider with this simple markup:


Meter & Progress Elements

Progress

The Progress element is used to display the progress of a task.






Meter

The Meter element is used to display a measurement on a known scale. For example, like a volume or capacity of a venue or hard-drive. The maximum and minimum are known in advance. Not supported in Internet Explorer.