ember-form-fields
v0.1.0
Published
Semantic HTML5 form wrappers for your forms
Downloads
4
Readme
Ember-form-fields
Kickstart your ember forms with this addon: ember-form-fields is an addon for cleanly wrapping your form elements.
Out of the box, you can:
- Wrap your form groups in proper
fieldset
elements - Group your form controls vertically or horizontally (with
layout="vertical"
or withlayout="horizontal"
- Use proper
legend
elements on yourfieldset
s
In general: proper HTML5 <form>
s.
Installation
git clone
this repositorynpm install
bower install
Usage
{{#form-field title="My label title"}}
{{input type="text" autofocus=true value=model.firstName title="Please specify your first name" required=true autocomplete="given-name"}}
{{/form-field}}
layout
simply adds the class to form-field
. So you might add some styles like these. No styles are shipped with this addon; it is your responsibility to create styles.
title
is used to provide the text for the associated label.
(For more info on which autocomplete
value to use, please refer to MDN)
Usage with Ember CLI HTML5 Validation
The following shows a simple login form using the ember-cli-html5-validation addon:
{{#validatable-form action="login" class="login-form"}}
{{#form-section title="Login" icon="lock"}}
{{#if loginFailed}}
<p>Invalid username or password.</p>
{{/if}}
{{#form-field title="Username" layoutDirection="vertical"}}
{{input autofocus=true value=model.username required=true type="text" placeholder="Username" id="username"}}
{{/form-field}}
{{#form-field title="Password" layoutDirection="vertical"}}
{{input type="password" value=model.password required=true placeholder="Password" id="password"}}
{{/form-field}}
{{/form-section}}
{{#form-actions}}
{{async-button class="button" icon="out2" title="Log in" isValid=isValid}}
{{/form-actions}}
{{/validatable-form}}
The form-actions
component is simply a short-hand notation for <footer class="form-actions">
. As such, you may choose to omit the component from mark-up in favour of your own implentation.
Adding Icons
- Optionally, you can install the ember addon to make your dependencies clear
- Add
icon="icon"
to your{{form-section}}
: ex.{{form-section title="Register" icon="user"}}
Make sure to set up your own icons. You can do this by using a tool like icomoon.
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.