diff --git a/docs/pages/forms.md b/docs/pages/forms.md index 992a78eb87..6ab7561ace 100644 --- a/docs/pages/forms.md +++ b/docs/pages/forms.md @@ -20,7 +20,7 @@ flex: true ## Form Basics -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 grid rows and columns. +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 grid rows and columns or cells. --- @@ -37,17 +37,20 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc ```html_example +
-
-
- -
-
- +
+
+
+ +
+
+ +
@@ -146,14 +149,14 @@ Wrap a group of checkboxes or radio buttons in a `
` element, and give
```html_example -
-
+
+
Choose Your Favorite
-
+
Check these out @@ -210,7 +213,7 @@ Place help text below a field to clarify its purpose. Whenever you use help text ## Label Positioning -Sometimes you want a form with labels to the left of your inputs. Piece of cake! You can put the label inside a different column to the left of the input. Then use the class `.text-right` or `.float-right` (or add `text-align: right` yourself) to realign the label. +Sometimes you want a form with labels to the left of your inputs. Piece of cake! You can put the label inside a different cell or column to the left of the input. Then use the class `.text-right` or `.float-right` (or add `text-align: right` yourself) to realign the label. Watch this part in video
@@ -223,23 +226,23 @@ Sometimes you want a form with labels to the left of your inputs. Piece of cake! ```html
-
-
+
+
-
+
``` -
-
-
+
+
+
-
+
@@ -251,23 +254,23 @@ Add the `.middle` class to vertically align the label with its input. ```html
-
-
+
+
-
+
``` -
-
-
+
+
+
-
+