Internal.Input.Input
The type for a Field that can be rendered using input
or inputStyled
.
Internal.Input.Options a
The type for a Field that represents a set of options.
Can be rendered as a dropdown:
Or as a set of radio buttons:
input : List (Html.Attribute msg) -> Form.Validation.Field error parsed Input -> Html msg
These Fields are defined using Form.Field
using functions like Form.Field.text
,
Form.Field.textarea
, Form.Field.int
, and Form.Field.date
.
This will render a form field HTML element with all of the appropriate attributes.
Often it's convenient to create a helper function that adds labels and renders the field's error messages with any styles and layout conventions in your application.
fieldView :
Form.Context String input
-> String
-> Validation.Field String parsed FieldView.Input
-> Html msg
fieldView context label field =
Html.div []
[ Html.label []
[ Html.text (label ++ " ")
, FieldView.input [] field
, errorsView context field
]
]
errorsView :
Form.Context String input
-> Validation.Field String parsed kind
-> Html msg
errorsView { submitAttempted, errors } field =
if submitAttempted || Validation.statusAtLeast Validation.Blurred field then
errors
|> Form.errorsForField field
|> List.map (\error -> Html.li [ Html.Attributes.style "color" "red" ] [ Html.text error ])
|> Html.ul []
else
Html.ul [] []
radio : List (Html.Attribute msg) -> (option -> (List (Html.Attribute msg) -> Html msg) -> Html msg) -> Form.Validation.Field error parsed2 (Options option) -> Html msg
Render an Options
Field
as a set of radio
elements.
Radio buttons are highly customizable. Even more so than dropdowns (<select>
elements) because you can render HTML for each entry rather than just text.
To render using this radio
function, you pass in
<fieldset>
that is rendered around the radio inputs.Options
Field to render the radio buttons forExample:
import Form.FieldView as FieldView
import Html
type Size
= Small
| Medium
| Large
dropdownView field =
Html.div []
[ FieldView.radio []
(\size toRadio ->
Html.div []
[ Html.label []
[ Html.text (sizeToString size)
, toRadio []
]
]
)
field
]
sizeToString : Size -> String
sizeToString size =
case size of
Small ->
"Small"
Medium ->
"Medium"
Large ->
"Large"
Internal.Input.Hidden
There are no render helpers for hidden fields because the Form.renderHtml
helper functions automatically render hidden fields for you.
select : List (Html.Attribute msg) -> (parsed -> ( List (Html.Attribute msg), String )) -> Form.Validation.Field error parsed2 (Options parsed) -> Html msg
Render an Options
field as a select
element.
import Form.FieldView as FieldView
type Size
= Small
| Medium
| Large
dropdownView field =
FieldView.select []
(\size ->
( -- we can optionally add HTML attributes here
[]
, sizeToString size
)
)
field
sizeToString : Size -> String
sizeToString size =
case size of
Small ->
"Small"
Medium ->
"Medium"
Large ->
"Large"
valueButton : String -> List (Html.Attribute msg) -> List (Html msg) -> Form.Validation.Field error parsed kind -> Html msg
Gives you a submit button that will submit the form with a specific value for the given Field.
radioStyled : List (Html.Styled.Attribute msg) -> (parsed -> (List (Html.Styled.Attribute msg) -> Html.Styled.Html msg) -> Html.Styled.Html msg) -> Form.Validation.Field error parsed2 (Options parsed) -> Html.Styled.Html msg
Same as radio
, but renders to Html.Styled
.
selectStyled : List (Html.Styled.Attribute msg) -> (parsed -> ( List (Html.Styled.Attribute msg), String )) -> Form.Validation.Field error parsed2 (Options parsed) -> Html.Styled.Html msg
Same as select
, but renders to Html.Styled
.
inputStyled : List (Html.Styled.Attribute msg) -> Form.Validation.Field error parsed Input -> Html.Styled.Html msg
Same as input
, but renders to Html.Styled
.
valueButtonStyled : String -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Form.Validation.Field error parsed kind -> Html.Styled.Html msg
Gives you a submit button that will submit the form with a specific value for the given Field.