# Forms ## Forms: Standard style ```
``` ## Forms: Bordered style ```
``` ## Forms: Bordered compressed style (less padding) ```
``` ## Forms: Bordered style - Danger zone ```

Delete account foo.bar@openproject.org

Your account will be deleted from the system. Therefore, you will no longer be able to log in with your current credentials. If you choose to become a user of this application again, you can do so by using the means this application grants.

Of the data you created as much as possible will be deleted. Note however, that data like work packages and wiki entries can not be deleted without impeding the work of the other users. Such data is hence reassigned to an account called "Deleted user".

Deleting your account is an irreversible action.

Enter your login foo.bar@openproject.org to verify the deletion.

Cancel
``` ## Forms: Standard layout ``` @full-width
Write anything you like.
Request new email
Add 5
Any number from 1 to 10!
Write more about anything.
This field has no label, which means you really can write what you like.
This field also has no label, but takes up the full width.
``` ## Forms: Standard layout, wide labels ``` @full-width
Your personal email address.
€
per item
The more, the better
Write more about anything.
Selecting these option might be considered a dangerous operation.
``` ## Forms: Multiple fields per row ``` @full-width
Wichtige Daten
One never lies about one's age.
Liter
pro
auf
Colors:
``` ## Forms: Vertical layout ``` @full-width
Write anything you like.
Request new email
unit
Any number from 1 to 10!
Write more about anything.
``` ## Forms: Sections and fieldsets ### standard ```

Advanced information

Even more advanced information
``` ### with controls ```
Various information
(Check all | Uncheck all)
``` ### collapsible ```
Less important information
More important information
``` ## Forms: Column layout ``` @full-width
Write anything you like.
Request new email
Add 5
Any number from 1 to 10!
Write more about anything.
This field has no label, which means you really can write what you like.
``` ## Forms: Width categories The modifier classes **-middle**, **-wide**, ... can be applied to the form-[input type]-container to limit the width of the element. Please note, that this only limits the max-width of the element. The fields will become slimmer if less space is available. Also note, that the max-width is specified as an absolute value. Without a modifier, the form field will take the full width available. ``` @full-width

Input type "text-field"

Input type "text-area"

Input type "select"

``` # Forms: Lists of fields ``` @full-width ``` # Forms: Attachment fieldsets ```
Filesexpanded
Add another file (Maximum size: 5 MB)
``` # Forms: Text fields ## Default text fields ### Standalone ``` ``` ## Text field sizes ``` ``` ## Plain text fields _with no classes applied (uses default Foundation form styling)_ ``` ``` # Forms: Text areas ## Default text areas ### Standalone ``` ``` ## Plain text areas _with no classes applied (uses default Foundation form styling)_ ``` ``` # Forms: Checkboxes ## Default checkboxes ### Standalone ``` ``` ### Within a form ```
``` ### Multiple, within a form ```
``` # Forms: Radio buttons ## Within a form, multiple ```
``` # Forms: Select ## Default selects ### Standalone ``` ``` ``` ``` ``` ``` ### Within a form ```
Oranges are rich in Vitamin C. Eat more than two!
``` ## Select Sizes ``` ``` ## Narrow select _By default, a `form--select` will take the full width of its container element. In most cases it is recommended to apply a width to the container element, but in certain circumstances the `-narrow` variant may be preferable._ ``` ``` ## Plain selects _with no classes applied (uses default Foundation form styling)_ ``` ``` # Forms: Checkbox Matrices ```
Attribute name User access Admin access
Project
Type
Parent
``` # Forms: Inline buttons ```
```