JSFiddle - React, Tailwind, and code Playground
HTML
<div id="app">
</div></div>
CSS
label {
display: block;
}
label, button {
margin-bottom: 1em;
}
JavaScript
var Form = {
controller: function(attrs) {
var ctrl = this;
ctrl.submit = function(e) {
e.preventDefault();
alert('You entered: ' + ctrl.username + ' / ' + ctrl.password);
}
ctrl.assignValue = function(e) { ctrl[e.target.name] = e.target.value};
},
view: function(ctrl, attrs) {
return m('form', { onsubmit: ctrl.submit, oninput: ctrl.assignValue }, [
m('label', [
'Username',
m('input[type=text][name=username]')
]),
m('label', [
'Password',
m('input[type=password][name=password]')
]),
m('button[type=submit]', 'Login')
]);
}
};
m.mount(document.getElementById('app'), Form);