Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Forms on a web page allow a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms and provides the user to fill in various types of input fields such as text type, password type, number type, email type, or maybe some other type of input. Forms are generally used when you want to collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment detail in the payment form to place an order.
Variable Used:
| Variable-Name | Description | Type | Default Value |
|---|---|---|---|
| $fieldset-border | This variable is used to define the default border around custom fieldsets. | Border | 1px solid $medium-gray |
| $fieldset-padding | This variable is used to define the default padding inside custom fieldsets. | Number | rem-calc(20) |
| $fieldset-margin | This variable is used to define the default margin around custom fieldsets. | Number | rem-calc(18 0) |
| $legend-padding | This variable is used to define the default padding between the legend text and the fieldset border. | Number | rem-calc(0 3) |
| $form-spacing | This variable is used to define the global spacing for form elements. | Number | rem-calc(16) |
| $helptext-color | This variable is used to define the default color for the help text. | Color | $black |
| $helptext-font-size | This variable is used to define the default font size for the help text. | Number | rem-calc(13) |
| $helptext-font-style | This variable is used to define the default font style for the help text. | Keyword | italic |
| $input-prefix-color | This variable is used to define the color of labels prefixed to an input. | Color | $black |
| $input-prefix-background | This variable is used to define the background color of labels prefixed to an input. | Color | $light-gray |
| $input-prefix-border | This variable is used to define the border around labels prefixed to an input. | Border | 1px solid $medium-gray |
| $input-prefix-padding | This variable is used to define the left/right padding of a pre/postfixed input label | 1rem | |
| $form-label-color | This variable is used to define the color for form labels. | Color | $black |
| $form-label-font-size | This variable is used to define the font size for form labels. | Number | rem-calc(14) |
| $form-label-font-weight | This variable is used to define the font weight for form labels. | Keyword | $global-weight-normal |
| $form-label-line-height | This variable is used to define the line height for form labels. | Number | 1.8 |
| $select-background | This variable is used to define the background color for select menus. | Color | $white |
| $select-triangle-color | This variable is used to define the color of the dropdown triangle inside select menus. | Color | $dark-gray |
| $select-radius | This variable is used to define the default radius for select menus. | Color | $global-radius |
| $input-color | This variable is used to define the font color of text inputs. | Color | $black |
| $input-placeholder-color | This variable is used to define the font color of placeholder text within text inputs. | Color | $medium-gray |
| $input-font-family | This variable is used to define the font family of text inputs. | Font | inherit |
| $input-font-size | This variable is used to define the font size of text inputs. | Number | rem-calc(16) |
| $input-font-weight | This variable is used to define the font weight of text inputs. | Keyword | $global-weight-normal |
| $input-line-height | This variable is used to define the line height of text inputs. | Keyword | $global-lineheight |
| $input-background | This variable is used to define the background color of text inputs. | Color | $white |
| $input-background-focus | This variable is used to define the background color of focused text inputs. | Color | $white |
| $input-background-disabled | This variable is used to define the background color of disabled text inputs. | Color | $light-gray |
| $input-border | This variable is used to define the border around text inputs. | Border | 1px solid $medium-gray |
| $input-border-focus | This variable is used to define the border around focused text inputs. | Color | 1px solid $dark-gray |
| $input-padding | This variable is used to define the padding of text inputs. | Color | $form-spacing * 0.5 |
| $input-shadow | This variable is used to define the box shadow inside text inputs when not focused. | Shadow | inset 0 1px 2px rgba($black, 0.1) |
| $input-shadow-focus | This variable is used to define the box shadow outside text inputs when focused. | Shadow | 0 0 5px $medium-gray |
| $input-cursor-disabled | This variable is used to define the cursor to use when hovering over a disabled text input. | Cursor | not-allowed |
| $input-transition | This variable is used to define the properties to transition on text inputs. | Transition | box-shadow 0.5s, border-color 0.25s ease-in-out |
| $input-number-spinners | This variable is used to define the Enables the up/down buttons that chrome and firefox add to <input type='number'> elements. | Boolean | true |
| $input-radius | This variable is used to define the radius for text inputs. | Border | $global-radius |
| $form-button-radius | This variable is used to define the border radius for form buttons, defaulted to global-radius. | Number | $global-radius |
| $meter-height | This variable is used to define the height of an <meter> element. | Length | 1rem |
| $meter-radius | This variable is used to define the Border radius of an <meter> element. | Length | $global-radius |
| $meter-background | This variable is used to define the background color of an <meter> element. | Color | $medium-gray |
| $meter-fill-good | This variable is used to define the Meter fill for an optimal value in an <meter> element. | Color | $success-color |
| $meter-fill-medium | This variable is used to define the meter fill for an average value in an <meter> element. | Color | $warning-color |
| $meter-fill-bad | This variable is used to define the meter fill for a suboptimal value in an <meter> element. | Color | $alert-color |
| $progress-height | This variable is used to define the height of a progress bar. | Number | 1rem |
| $progress-background | This variable is used to define the background color of a progress bar. | Color | $medium-gray |
| $progress-margin-bottom | This variable is used to define the bottom margin of a progress bar. | Number | $global-margin |
| $progress-meter-background | This variable is used to define the default color of a progress bar's meter. | Color | $primary-color |
| $progress-radius | This variable is used to define the default radius of a progress bar. | Number | $global-radius |
| $slider-height | This variable is used to define the default height of the slider. | Number | 0.5rem |
| $slider-background | This variable is used to define the default background color of the slider's track. | Color | $light-gray |
| $slider-fill-background | This variable is used to define the default color of the active fill color of the slider. | Color | $medium-gray |
| $slider-handle-height | This variable is used to define the default height of the handle of the slider. | Number | 1.4rem |
| $slider-handle-width | This variable is used to define the default width of the handle of the slider. | Number | 1.4rem |
| $slider-handle-background | This variable is used to define the default color of the handle for the slider. | Color | $primary-color |
| $slider-opacity-disabled | This variable is used to define the default fade amount of a disabled slider. | Number | 0.25 |
| $slider-radius | This variable is used to define the default radius for the slider. | Number | $global-radius |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of form.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href="style.css">
<title>GeeksforGeeks</title>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
</head>
<body>
<center>
<h1 class="title" style="color:green;">
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div style="width:60%;">
<label>User Name
<input type="password"
aria-describedby="passwordHelpText">
</label>
<label>Password
<input type="password"
aria-describedby="passwordHelpText">
</label>
</div>
</center>
</body>
</html>
SASS Code:
$form-label-color: green;
label{
color:$form-label-color;
}
Compiled CSS Code:
label {
color: green;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of form.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
</head>
<body>
<center>
<h1 class="title" style="color:green;">
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div style="width:60%;">
<label>User Name
<input type="password"
aria-describedby="passwordHelpText">
</label>
<label>Password
<input type="password"
aria-describedby="passwordHelpText">
</label>
</div>
</center>
</body>
</html>
SASS Code:
$form-label-font-weight: 40px;
label{
font-size:$form-label-font-weight;
}
Compiled CSS Code:
label {
font-size: 40px;
}
Output:
Reference: https://get.foundation/sites/docs/forms.html