F#
HTML
Result
Hosted on
Try WebSharper
<
>
namespace LoginWithReactivePiglets open WebSharper open WebSharper.UI.Next open WebSharper.UI.Next.Html [<JavaScript>] module Client = open WebSharper.JavaScript open WebSharper.UI.Next.Client open WebSharper.UI.Next.Piglets open WebSharper.Forms.Bootstrap let cls = Attr.Class let loginForm = Piglet.Return (fun user pass check -> user, pass, check) <*> (Piglet.Yield "" |> Validation.IsNotEmpty "Must enter a username") <*> (Piglet.Yield "" |> Validation.IsNotEmpty "Must enter a password") <*> Piglet.Yield false |> Piglet.WithSubmit |> Piglet.Run (fun (user, pass, check) -> JS.Alert("Welcome, " + user + "!") ) |> Piglet.Render (fun user pass check submit -> form [ Controls.Input "Username" [] (user, [cls "sr-only"], [cls "input-lg"; attr.readonly ""]) Controls.Simple.TextAreaWithError "Username - echoed" user submit.View Controls.TextAreaWithError "Username - echoed" [] (user, [], []) submit.View Controls.Simple.InputWithError "Username - echoed" user submit.View Controls.Simple.InputPasswordWithError "Password" pass submit.View Controls.Checkbox "Keep me logged in" [] (check, [cls "input-lg"], []) Controls.Radio "This is a radio button" [] (check, [], []) Controls.Button "Log in" [cls "btn btn-primary"] submit.Trigger Controls.ShowErrors [attr.style "margin-top:1em;"] submit ] ) |> fun s -> s.RunById "main"
<html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> </head> <body> <div id="main"></div> <!--[BODY]--> </body> </html>