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.
-
git clone
this repository npm install
bower install
{{#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.
- 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.
ember server
- Visit your app at http://localhost:4200.
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.