https://github.com/agrafix/elm-bootforms
Quickly create forms using bootstrap and elm
https://github.com/agrafix/elm-bootforms
Last synced: 3 months ago
JSON representation
Quickly create forms using bootstrap and elm
- Host: GitHub
- URL: https://github.com/agrafix/elm-bootforms
- Owner: agrafix
- Created: 2015-10-03T19:08:23.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-04-03T21:14:09.000Z (about 10 years ago)
- Last Synced: 2025-10-11T10:43:47.738Z (8 months ago)
- Language: Elm
- Size: 33.2 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# elm-bootforms
This package tries to provide a very simple and powerful interface to HTML(5) forms powered by [bootstrap](http://getbootstrap.com/). It uses [evancz/elm-html](http://package.elm-lang.org/packages/evancz/elm-html/latest/) as HTML rendering backend.
## Docs
See [agrafix/elm-bootforms](http://package.elm-lang.org/packages/agrafix/elm-bootforms/latest/) on the central elm package repo.
## Example
```elm
import Date
import Html.Form.Input as I
type alias Model =
{ date: I.FormValue String Date.Date
, name: I.FormValue String String
}
type Action
= Nop
| SetDate (I.FormValueAction String Date.Date)
| SetName (I.FormValueAction String String)
init : (Model, Effects Action)
init =
(
{ date = { userInput = "", value = Err "no date", focused = False }
, name = I.stringFormVal ""
}
, Effects.none
)
noFx : Model -> (Model, Effects Action)
noFx m = (m, Effects.none)
update : Action -> Model -> (Model, Effects Action)
update a m =
case a of
Nop -> noFx m
SetDate f -> ({ m | date = I.apply f m.date }, I.mappedEffect SetDate f)
SetName f -> ({ m | name = I.apply f m.name }, I.mappedEffect SetName f)
view : Signal.Address Action -> Model -> H.Html
view addr =
H.lazy <| \m ->
H.div []
[ H.h2 [] [ text "My super form" ]
, I.dateInput
{ id = "some-date"
, label = "Date"
, helpBlock = Just "Example: 04.02.2015"
, value = m.date
, onValue = Signal.message addr << SetDate
}
, I.textInput
{ id = "some-name"
, label = "The name"
, helpBlock = Just "Example: 14:35"
, value = m.name
, onValue = Signal.message addr << SetDeparture
}
}
```
## Install
Install using [elm-package](https://github.com/elm-lang/elm-package).
# Roadmap
* Support generating complete forms with error handling
* ...