Style individual form controls and utilize common layouts.
<fieldset>
s, WebKit validation bubbles, and most textual <input>
s.<input>
s are styled automatically, but .form-control
is available should you need it.type
on your <button>
s.Form controls in Dojo currently have no basic layout specified (this is by design). You’ll need to use <fieldset>
s, <div>
s, or other elements and styles to rearrange them.
<form>
<label for="name">Name</label>
<input type="text" id="name">
<label for="email">Email address</label>
<input type="email" id="email">
<label>
<input type="checkbox"> Remember me
</label>
<label>
<input type="radio" id="herp" name="herpderp" checked> Herp
</label>
<label>
<input type="radio" id="derp" name="herpderp"> Derp
</label>
<button class="btn" type="submit">Submit</button>
</form>
Textual form controls have a white background by default. You can change this to a light gray with .input-contrast
.
<form>
<input type="text" placeholder="Default input">
<input class="input-contrast" type="text" placeholder="Input with contrast">
</form>
Make inputs smaller, larger, or full-width with an additional class.
<form>
<input class="input-mini" type="text" placeholder="Mini input">
</form>
<form>
<input class="input-large" type="text" placeholder="Large input">
</form>
<form>
<input class="input-block" type="text" placeholder="Full-width input">
</form>
<form>
<dl class="form">
<dt><label>Example Text</label></dt>
<dd><input type="text" class="textfield" value="Example Value"></dd>
</dl>
<dl class="form">
<dt><label>Example Label</label></dt>
<dd>
<select>
<option>Choose an option</option>
<option>Git</option>
<option>Subversion</option>
<option>Social Coding</option>
<option>Beets</option>
<option>Bears</option>
<option>Battlestar Galactica</option>
</select>
</dd>
</dl>
</form>
Utilities to spice up the alignment and styling of checkbox and radio controls.
<form>
<div class="form-checkbox">
<label>
<input type="checkbox" checked="checked">
Available for hire
</label>
<p class="note">
This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!
</p>
</div>
</form>
You may also add emphasis to the label:
<form>
<div class="form-checkbox">
<label>
<input type="checkbox" checked="checked">
<em class="highlight">Available for hire</em>
</label>
</div>
</form>
Attached an input and button to one another.
<form>
<div class="input-group">
<input type="text" placeholder="Username">
<span class="input-group-button">
<button class="btn">
<span class="ki-clippy"></span>
</button>
</span>
</div>
</form>
Align buttons to the right—via float: right
on the buttons—in forms with .form-actions
. The floats are automatically cleared for you.
<div class="form-actions">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
</div>