Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
Create an Html form element
Create an inline form for placing elements horizontally.
Note: You should stick to inline elements to get the effect you are probably expecting!
Use form groups to group items together (label + input is a typical simple example)
Use the group function to create a grouping of related form elements.
It just creates a div container with a form-group
Bootstrap class.
Typically you use this for vertically laid out forms.
options
List of options
for customizing the groupchildren
List of childrenCreate a form control label. Suitable for use in form groups.
attributes
List of attributeschildren
List of child elementsOpaque type representing options for customing form groups.
Create a form group row element. Use this function when creating horizontal forms (in various shapes) It reuses the options from Bootstrap.Grid.Row which gives you a ton of customization options for how to layout columns within this row.
Create a Grid column for use in form rows
. It reuses the options from Bootstrap.Grid.Col which gives
you a ton of customization options for layout.
options
List of Bootstrap.Grid.Col optionschildren
List of child elementsCreate a label element as a grid column to be used in a form row
.
Handy for use in horizontal form in various shapes.
options
List of Bootstrap.Grid.Col options for layout customizationchildren
List of child elementsCreate a shorter (height) colLabel
Create a taller colLabel
Opaque type representing a column in a form row
Function to provide validation feedback information for valid inputs
Function to provide validation feedback information for invalid inputs
Creates a block level text element, suitable for providing context related help text in form groups.
Creates an inline text element, suitable for providing context related help text for inputs.
module Bootstrap.Form
exposing
( form
, formInline
, group
, label
, row
, col
, colLabel
, colLabelSm
, colLabelLg
, help
, helpInline
, validFeedback
, invalidFeedback
, Col
, Option
)
{-| Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
# Forms
@docs form, formInline
# Groups
Use form groups to group items together (label + input is a typical simple example)
@docs group, label, Option
# Grid layouts
@docs row, col, colLabel, colLabelSm, colLabelLg, Col
# Validation
@docs validFeedback, invalidFeedback
# Handy helpers
@docs help, helpInline
-}
import Html
import Html.Attributes as Attributes
import Bootstrap.Grid.Row as Row
import Bootstrap.Grid.Col as Col
import Bootstrap.Grid.Internal as GridInternal
{-| Opaque type representing a column in a form row
-}
type Col msg
= Col
{ elemFn : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
, options : List (Col.Option msg)
, children : List (Html.Html msg)
}
{-| Opaque type representing options for customing form groups.
-}
type Option msg
= Attrs (List (Html.Attribute msg))
type alias Options msg =
{ attributes : List (Html.Attribute msg)
}
{-| Create an Html form element
-}
form : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
form attributes children =
Html.form
attributes
children
{-| Create an inline form for placing elements horizontally.
**Note**: You should stick to inline elements to get the effect you are probably expecting!
-}
formInline : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
formInline attributes =
form (Attributes.class "form-inline" :: attributes)
{-| Use the group function to create a grouping of related form elements.
It just creates a div container with a `form-group` Bootstrap class.
Typically you use this for vertically laid out forms.
- `options` List of [`options`](#Option) for customizing the group
- `children` List of children
-}
group : List (Option msg) -> List (Html.Html msg) -> Html.Html msg
group options children =
Html.div
(toAttributes options)
children
{-| Create a form control label. Suitable for use in form groups.
- `attributes` List of attributes
- `children` List of child elements
-}
label : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
label attributes children =
Html.label
(Attributes.class "form-control-label" :: attributes)
children
{-| Creates a block level text element, suitable for providing context related help text in form groups.
-}
help : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
help attributes children =
Html.small
(Attributes.class "form-text text-muted" :: attributes)
children
{-| Creates an inline text element, suitable for providing context related help text for inputs.
-}
helpInline : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
helpInline attributes children =
Html.small
(Attributes.class "text-muted" :: attributes)
children
{-| Function to provide validation feedback information for valid inputs
-}
validFeedback :
List (Html.Attribute msg)
-> List (Html.Html msg)
-> Html.Html msg
validFeedback attributes children =
Html.div
(Attributes.class "valid-feedback" :: attributes)
children
{-| Function to provide validation feedback information for invalid inputs
-}
invalidFeedback :
List (Html.Attribute msg)
-> List (Html.Html msg)
-> Html.Html msg
invalidFeedback attributes children =
Html.div
(Attributes.class "invalid-feedback" :: attributes)
children
toAttributes : List (Option msg) -> List (Html.Attribute msg)
toAttributes modifiers =
let
options =
List.foldl applyModifier defaultOptions modifiers
in
[ Attributes.class "form-group" ]
++ options.attributes
defaultOptions : Options msg
defaultOptions =
{ attributes = []
}
applyModifier : Option msg -> Options msg -> Options msg
applyModifier modifier options =
case modifier of
Attrs attrs ->
{ options | attributes = options.attributes ++ attrs }
{- Grid related functions -}
{-| Create a form group row element. Use this function when creating horizontal forms (in various shapes)
It reuses the options from Bootstrap.Grid.Row which gives you
a ton of customization options for how to layout columns within this row.
- `options` List of Bootstrap.Grid.Row options
- `cols` List of column elements (see [`col`](#col) or [`colLabel`](#colLabel))
-}
row : List (Row.Option msg) -> List (Col msg) -> Html.Html msg
row options cols =
Html.div
(Attributes.class "form-group" :: GridInternal.rowAttributes options)
(List.map renderCol cols)
{-| Create a Grid column for use in [`form rows`](#row). It reuses the options from Bootstrap.Grid.Col which gives
you a ton of customization options for layout.
- `options` List of Bootstrap.Grid.Col options
- `children` List of child elements
-}
col : List (Col.Option msg) -> List (Html.Html msg) -> Col msg
col options children =
Col
{ elemFn = Html.div
, options = options
, children = children
}
{-| Create a label element as a grid column to be used in a [`form row`](#row).
Handy for use in horizontal form in various shapes.
- `options` List of Bootstrap.Grid.Col options for layout customization
- `children` List of child elements
-}
colLabel : List (Col.Option msg) -> List (Html.Html msg) -> Col msg
colLabel options children =
Col
{ elemFn = Html.label
, options = Col.attrs [ Attributes.class "col-form-label" ] :: options
, children = children
}
{-| Create a shorter (height) [`colLabel`](#colLabel)
-}
colLabelSm :
List (GridInternal.ColOption msg)
-> List (Html.Html msg)
-> Col msg
colLabelSm options =
colLabel (Col.attrs [ Attributes.class "col-form-label-sm" ] :: options)
{-| Create a taller [`colLabel`](#colLabel)
-}
colLabelLg :
List (GridInternal.ColOption msg)
-> List (Html.Html msg)
-> Col msg
colLabelLg options =
colLabel (Col.attrs [ Attributes.class "col-form-label-lg" ] :: options)
renderCol : Col msg -> Html.Html msg
renderCol (Col { elemFn, options, children }) =
elemFn
(GridInternal.colAttributes options)
children