EdutainmentLIVE / elm-bootstrap / Bootstrap.Form

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Forms

form : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Create an Html form element

formInline : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Create an inline form for placing elements horizontally.

Note: You should stick to inline elements to get the effect you are probably expecting!

Groups

Use form groups to group items together (label + input is a typical simple example)

group : List (Option msg) -> List (Html msg) -> Html msg

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.

label : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Create a form control label. Suitable for use in form groups.


type Option msg

Opaque type representing options for customing form groups.

attrs : List (Html.Attribute msg) -> Option msg

Use this function to handle any Html.Attribute option you wish for your form group.

Grid layouts

row : List (Bootstrap.Grid.Row.Option msg) -> List (Col msg) -> Html msg

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.

col : List (Bootstrap.Grid.Col.Option msg) -> List (Html msg) -> Col msg

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.

colLabel : List (Bootstrap.Grid.Col.Option msg) -> List (Html msg) -> Col msg

Create a label element as a grid column to be used in a form row. Handy for use in horizontal form in various shapes.

colLabelSm : List (Bootstrap.Grid.Internal.ColOption msg) -> List (Html msg) -> Col msg

Create a shorter (height) colLabel

colLabelLg : List (Bootstrap.Grid.Internal.ColOption msg) -> List (Html msg) -> Col msg

Create a taller colLabel


type Col msg

Opaque type representing a column in a form row

Validation

validFeedback : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Function to provide validation feedback information for valid inputs

invalidFeedback : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Function to provide validation feedback information for invalid inputs

Handy helpers

help : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Creates a block level text element, suitable for providing context related help text in form groups.

helpInline : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Creates an inline text element, suitable for providing context related help text for inputs.