Assembla Development

There are two styles to use forms the default form style and the ".new-form" style. The default style is recommended to use when you have a page with many fields (e.g. the Profile page) and the ".new-form" style when you have a few fields and you want big fields. Here are some samples of this:

Default form style sample

To display this style you don't have to add a specifc tag to the form. On this sample, the <h2> is using ".h2-separator" that adds a grey underline to the title, which is recommendable to separate blocks on pages with many fields.

<h2 class="h2-separator">Account Information</h2>
<fieldset>
<p>Your login ID is <b>username</b>.</p>
<label for="new_user_email" id="email">E-mail</label>
<input id="new_user_email" name="new_user[email]" size="30" type="text" value="username@gmail.com" />
<label class="inline">show to <select id="new_user_email_p" name="new_user[email_p]" style="width:100px"><option value="90">Nobody</option>
<option value="45" selected="selected">Teammates</option>
<option value="5">Public</option></select></label>
<label for="new_user_time_zone">Time zone</label>
<select id="new_user_time_zone" name="new_user[time_zone]"><option value=""></option>
<option value="International Date Line West">(GMT-11:00) International Date Line West</option>
<label for="new_user_language_preference">Language Preference</label>
<select id="new_user_language_preference" name="new_user[language_preference]"><option value=""></option>
<option value="en" selected="selected">English</option>
<option value="es">Spanish</option></select>
</fieldset>

"New form" style

If you want the following result, wrap the form in a <div> with the tag ".new-form".

<form action="#" method="post"><input name="_method" type="hidden" value="put" />        
<fieldset>
<label for="Username">Username</label>
<input id="space_tool_username" name="space_tool[username]" size="30" type="text" value="" />
<label for="Password">Password</label>
<input id="space_tool_password" name="space_tool[password]" size="30" type="password" value="" />
<p class="tip"><b>Recommended:</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus a mi.</p>
<label for="Password">Other</label>
<input id="" name="" size="50" type="text" value="" />
<label for="prueba">Description</label>
<textarea cols="65" id="space_description" name="space[description]" rows="3"></textarea>
<label><input id="space_tool[filters][code]" name="space_tool[filters][code]" type="checkbox" value="true" /> Code commits</label>
<label><input id="space_tool[filters][flow]" name="space_tool[filters][flow]" type="checkbox" value="true" /> Message Events</label>
</fieldset>
<div class="size-button"><input class="button" name="commit" type="submit" value="Save" /></div>
</form>  

Other uses

You can also combine forms inside of boxes (view "Style Guide - Basics") to make configuration panels like the one used on the Twitter and Github tool. Notice in this sample, the use of a <div class="bold-border"> on the "Username" and "Password" fields.

<h2 class="blue-box-title">Configuration</h2>
<div class="blue-box new-form">
<form action="/spaces/espacioprueba/twitter_tool" method="post"><input name="_method" type="hidden" value="put" />        
<fieldset>
<div class="bold-border">        
<label for="Username">Username</label>
<input id="space_tool_username" name="space_tool[username]" size="30" type="text" value="" />
<label for="Password">Password</label>
<input id="space_tool_password" name="space_tool[password]" size="30" type="password" value="" />
</div>
<p class="tip"><b>Recommended:</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus a mi.</p>
<label for="Password">Other</label>
<input id="" name="" size="50" type="text" value="" />
<label for="prueba">Description</label>
<textarea cols="65" id="space_description" name="space[description]" rows="3"></textarea>
<label><input id="space_tool[filters][code]" name="space_tool[filters][code]" type="checkbox" value="true" /> Code commits</label>
<label><input id="space_tool[filters][flow]" name="space_tool[filters][flow]" type="checkbox" value="true" /> Message Events</label>
</fieldset>
<div class="size-button"><input class="button" name="commit" type="submit" value="Save" /></div>
</form>
</div>